Tabs

تب های افقی ریسپانسیو، با استایل های مختلف

Colors No
Sizes Yes
Variables Yes

tabs Bulma یک کامپوننت ناوبری ساده است که در نسخه های مختلف ارائه می شود. آنها فقط به ساختار زیر نیاز دارند:

  • بخش tabs
  • <ul> تگ HTML
  • لیستی از <li> تگ HTML
  • <a> تگ HTML برای هر لینک

استایل پیش فرض تب ها در پایین یک خط است


    <div class="tabs">
    <ul>
    <li class="is-active"><a>تصاویر</a></li>
    <li><a>موزیک</a></li>
    <li><a>ویدیوها</a></li>
    <li><a>اسناد</a></li>
    </ul>
    </div>

جهت #

برای جهت دادن به tabs list، از کلاس اصلاح کننده is-centered یا is-left در بخش .tabs استفاده کنید:


<div class="tabs">
  <ul>
    <li class="is-active"><a>تصاویر</a></li>
    <li><a>موزیک</a></li>
    <li><a>ویدیوها</a></li>
    <li><a>اسناد</a></li>
  </ul>
</div>

<div class="tabs">
  <ul>
    <li class="is-active"><a>تصاویر</a></li>
    <li><a>موزیک</a></li>
    <li><a>ویدیوها</a></li>
    <li><a>اسناد</a></li>
  </ul>
</div>
                      

آیکون ها #

می توانید از آیکون هایFont Awesome استفاده کنید.


<div class="tabs is-centered">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
        <span>تصاویر</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
        <span>موزیک</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
        <span>ویدیو</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
        <span>اسناد</span>
      </a>
    </li>
  </ul>
</div>
                      

اندازه #

می توانید از بین 3 اندازه: is-small is-medium and is-large یکی را انتخاب کنید.


<div class="tabs">
  <ul>
    <li class="is-active"><a>تصاویر</a></li>
    <li><a>موزیک</a></li>
    <li><a>ویدیوها</a></li>
    <li><a>اسناد</a></li>
  </ul>
</div>
                      

<div class="tabs">
  <ul>
    <li class="is-active"><a>تصاویر</a></li>
    <li><a>موزیک</a></li>
    <li><a>ویدیوها</a></li>
    <li><a>اسناد</a></li>
  </ul>
</div>
                      

<div class="tabs">
  <ul>
    <li class="is-active"><a>تصاویر</a></li>
    <li><a>موزیک</a></li>
    <li><a>ویدیوها</a></li>
    <li><a>اسناد</a></li>
  </ul>
</div>
                      

استایل #

اگر میخواهید تب ها دارای استایل borders باشند، کافیست کلاس اصلاح کننده is-boxed را اضافه کنید.

<div class="tabs is-centered">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
        <span>تصاویر</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
        <span>موزیک</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
        <span>ویدیو</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
        <span>اسناد</span>
      </a>
    </li>
  </ul>
</div>
                      

اگر می خواهید تب های جداگانه ای داشته باشید (مانند radio button ها که با کلیک کردن یکی گزینه های دیگر را لغو انتخاب می کند)، از کلاس اصلاح کننده is-toggle استفاده کنید.


<div class="tabs is-centered">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
        <span>تصاویر</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
        <span>موزیک</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
        <span>ویدیو</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
        <span>اسناد</span>
      </a>
    </li>
  </ul>
</div>
از 0.6.2

اگر از هر دو حالت is-toggle و is-toggle-rounded استفاده کنید، اولین و آخرین آیتم ها گرد می شوند.


<div class="tabs is-centered">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
        <span>تصاویر</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
        <span>موزیک</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
        <span>ویدیو</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
        <span>اسناد</span>
      </a>
    </li>
  </ul>
</div>
                      

If you want the tabs to take up the whole width available, use is-fullwidth.


<div class="tabs is-fullwidth">
  <ul>
    <li>
      <a>
        <span>راست</span>
        <span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
        <span>بالا</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
        <span>چپ</span>
      </a>
    </li>
  </ul>
 </div>
</div>

ترکیبات #

می توانید کلاس اصلاح کننده های مختلف را ترکیب کنید. برای مثال، تب های وسط چین، یا تمام عریض.


<div class="tabs is-centered">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
        <span>تصاویر</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
        <span>موزیک</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
        <span>ویدیو</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
        <span>اسناد</span>
      </a>
    </li>
  </ul>
</div>
                      

<div class="tabs is-centered">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
        <span>تصاویر</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
        <span>موزیک</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
        <span>ویدیو</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
        <span>اسناد</span>
      </a>
    </li>
  </ul>
</div>
                      

<div class="tabs is-centered">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
        <span>تصاویر</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
        <span>موزیک</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
        <span>ویدیو</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
        <span>اسناد</span>
      </a>
    </li>
  </ul>
</div>
                      

<div class="tabs is-centered">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
        <span>تصاویر</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
        <span>موزیک</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
        <span>ویدیو</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
        <span>اسناد</span>
      </a>
    </li>
  </ul>
</div>
                      

متغیرها #

برای شخصی سازی این کامپوننت می توانید از این متغیرها استفاده کنید. قبل از وارد کردن Bulma یک یا چند متغیر مورد از متغیر هارا به سادگی تنظیم کنید.یاد بگیرید چگونه.

نام نوع مقدار پیش فرض مقدار ماسبه شده
نام نوع مقدار پیش فرض مقدار ماسبه شده
$tabs-border-bottom-color color $border hsl(0, 0%, 86%)
$tabs-border-bottom-style string solid
$tabs-border-bottom-width size 1px
$tabs-link-color color $text hsl(0, 0%, 29%)
$tabs-link-hover-border-bottom-color color $text-strong hsl(0, 0%, 21%)
$tabs-link-hover-color color $text-strong hsl(0, 0%, 21%)
$tabs-link-active-border-bottom-color color $link hsl(217, 71%, 53%)
$tabs-link-active-color color $link hsl(217, 71%, 53%)
$tabs-link-padding size 0.5em 1em
$tabs-boxed-link-radius size $radius 4px
$tabs-boxed-link-hover-background-color color $background hsl(0, 0%, 96%)
$tabs-boxed-link-hover-border-bottom-color color $border hsl(0, 0%, 86%)
$tabs-boxed-link-active-background-color color $scheme-main hsl(0, 0%, 100%)
$tabs-boxed-link-active-border-color color $border hsl(0, 0%, 86%)
$tabs-boxed-link-active-border-bottom-color string transparent
$tabs-toggle-link-border-color color $border hsl(0, 0%, 86%)
$tabs-toggle-link-border-style string solid
$tabs-toggle-link-border-width size 1px
$tabs-toggle-link-hover-background-color color $background hsl(0, 0%, 96%)
$tabs-toggle-link-hover-border-color color $border-hover hsl(0, 0%, 71%)
$tabs-toggle-link-radius size $radius 4px
$tabs-toggle-link-active-background-color color $link hsl(217, 71%, 53%)
$tabs-toggle-link-active-border-color color $link hsl(217, 71%, 53%)
$tabs-toggle-link-active-color color $link-invert #fff