تگ ها

برچسب های تگ کوچک برای درج در هر مکان

رنگ دارد
سایز دارد
متغیر دارد

تگ Bulma عنصری کوچک اما همه کاره است. برای اتصال اطلاعات به یک بلوک یا کامپوننت دیگر بسیار مفید است. اندازه آن باعث می شود تا نمایش آن به تعداد زیاد نیز آسان باشد و این امر برای لیست های طولانی از موارد مناسب است.

به طور پیش فرض، تگ یک برچسب با ارتفاع 1.5rem است.
برچسب تگ

<span class="tag">
برچسب تگ
</span>
                    

رنگ ها #

مانند button ها، 10 رنگ مختلف وجود دارد.

Black

Dark

Light

White

Primary

Link

Info

Success

Warning

Danger

<span class="tag is-black">Black</span>
<span class="tag is-dark">Dark</span>
<span class="tag is-light">Light</span>
<span class="tag is-white">White</span>
<span class="tag is-primary">Primary</span>
<span class="tag is-link">Link</span>
<span class="tag is-info">Info</span>
<span class="tag is-success">Success</span>
<span class="tag is-warning">Warning</span>
<span class="tag is-danger">Danger</span>
                    
از 0.8.0

اکنون می توانید نسخه light یک رنگ را انتخاب کنید.

Primary

Link

Info

Success

Warning

Danger

<span class="tag is-primary is-light">Primary</span>
<span class="tag is-link is-light">Link</span>
<span class="tag is-info is-light">Info</span>
<span class="tag is-success is-light">Success</span>
<span class="tag is-warning is-light">Warning</span>
<span class="tag is-danger is-light">Danger</span>
                    

اندازه #

تگ در 3 اندازه متفاوت است.

در حالی که اندازه پیش فرض normal است، در صورت نیاز به تنظیم مجدد تگ در اندازه normal، کلاس اصلاح کننده is-normal وجود دارد.

Normal

Medium

Large


<span class="tag is-link is-normal">Normal</span>
<span class="tag is-primary is-medium">Medium</span>
<span class="tag is-info is-large">Large</span>
                    
از 0.7.4

می توانید اندازه همه تگ ها را همزمان تغییر دهید:

All Medium Size

<div class="tags are-medium">
  <span class="tag">All</span>
  <span class="tag">Medium</span>
  <span class="tag">Size</span>
</div>
                    
All Large Size

<div class="tags are-large">
  <span class="tag">All</span>
  <span class="tag">Large</span>
  <span class="tag">Size</span>
</div>
                    

با این وجود می توانید اندازه اصلی یک زیر مجموعه از تگ ها را به سادگی با استفاده از یکی از کلاس های اصلاح کننده آن حفظ کنید:

Medium Normal Medium Large Medium

<div class="tags are-medium">
  <span class="tag">Medium</span>
  <span class="tag is-normal">Normal</span>
  <span class="tag">Medium</span>
  <span class="tag is-large">Large</span>
  <span class="tag">Medium</span>
</div>
                    

اصلاح کننده ها #

برای ایجاد تگ گرد می توانید کلاس اصلاح کننده is-rounded را اضافه کنید.
Rounded

<span class="tag is-rounded">Rounded</span>
                                    
برای تبدیل برچسب به button حذف می توانید کلاس اصلاح کننده is-delete را اضافه کنید.

<a class="tag is-delete"></a>
                                    

ترکیبات #

می توانید button حذف را اضافه کنید.

Bar

Hello

World


<span class="tag is-success">
   Bar
  <button class="delete is-small"></button>
</span>
<span class="tag is-warning is-medium">
  Hello
  <button class="delete is-small"></button>
</span>
<span class="tag is-danger is-large">
   World
  <button class="delete"></button>
</span>
                    

لیست تگ ها #

اکنون می توانید یک لیست تگ با بخش tags ایجاد کنید.

یک دو سه

<div class="tags">
  <span class="tag">One</span>
  <span class="tag">Two</span>
  <span class="tag">Three</span>
</div>
                    

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

یک دو سه چهار پنج شش هفت هشت نه ده یازده دوازده سیزده چهارده پانزده شانزده هفده هجده نوزده بیست

<div class="tags">
    <span class="tag">یک</span>
    <span class="tag">دو</span>
    <span class="tag">سه</span>
    <span class="tag">چهار</span>
    <span class="tag">پنج</span>
    <span class="tag">شش</span>
    <span class="tag">هفت</span>
    <span class="tag">هشت</span>
    <span class="tag">نه</span>
    <span class="tag">ده</span>
    <span class="tag">یازده</span>
    <span class="tag">دوازده</span>
    <span class="tag">سیزدهspan class="nt"></span>
    <span class="tag">چهارده</span>
    <span class="tag">پانزده</span>
    <span class="tag">شانزده</span>
    <span class="tag">هفده</span>
    <span class="tag">هجده</span>
    <span class="tag">نوزدهspan class="nt"></span>
    <span class="tag">بیست</span>
</div>
                    

می توانید تگ ها را با کلاس اصلاح has-addons پیوست کنید.

Package Bulma

<div class="tags has-addons">
  <span class="tag">Package</span>
  <span class="tag is-primary">Bulma</span>
</div>
                    

می توانید تگ text را با تگ delete با هم پیوست کنید.

Alex Smith

<div class="tags has-addons">
  <span class="tag is-danger">Alex Smith</span>
  <a class="tag is-delete"></a>
</div>
                    

اگر می خواهید بخش های tags را به هم متصل کنید ،کافی است از عنصر field همراه با کلاس های اصلاح کننده is-grouped و is-grouped-multiline استفاده کنید.

npm
build passing
chat on gitter

<div class="field is-grouped is-grouped-multiline">
    <div class="control">
    <div class="tags has-addons">
        <span class="tag is-dark">npm</span>
        <span class="tag is-info"></span>
    </div>
    </div>

    <div class="control">
    <div class="tags has-addons">
        <span class="tag is-dark">build</span>
        <span class="tag is-success">passing</span>
    </div>
    </div>

    <div class="control">
    <div class="tags has-addons">
        <span class="tag is-dark">chat</span>
        <span class="tag is-primary">on gitter</span>
    </div>
    </div>
</div>
                    

این می تواند برای لیست طولانی تگ های وبلاگ مفید باشد.


<div class="field is-grouped is-grouped-multiline">
    <div class="control">
    <div class="tags has-addons">
        <a class="tag is-link">Technology</a>
        <a class="tag is-delete"></a>
    </div>
    </div>

    <div class="control">
    <div class="tags has-addons">
        <a class="tag is-link">CSS</a>
        <a class="tag is-delete"></a>
    </div>
    </div>

    <div class="control">
    <div class="tags has-addons">
        <a class="tag is-link">Flexbox</a>
        <a class="tag is-delete"></a>
    </div>
    </div>

    <div class="control">
    <div class="tags has-addons">
        <a class="tag is-link">Web Design</a>
        <a class="tag is-delete"></a>
    </div>
    </div>

    <div class="control">
    <div class="tags has-addons">
        <a class="tag is-link">Open Source</a>
        <a class="tag is-delete"></a>
    </div>
    </div>

    <div class="control">
    <div class="tags has-addons">
        <a class="tag is-link">Community</a>
        <a class="tag is-delete"></a>
    </div>
    </div>

    <div class="control">
    <div class="tags has-addons">
        <a class="tag is-link">Documentation</a>
        <a class="tag is-delete"></a>
    </div>
    </div>
</div>
                    

متغیرها #

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

نام نوع مقدار پیش فرض مقدار محاسبه شده
نام نوع مقدار پیش فرض مقدار محاسبه شده
$tag-background-color color $background hsl(0, 0%, 96%)
$tag-color color $text hsl(0, 0%, 29%)
$tag-radius size $radius 4px
$tag-delete-margin size 1px
$tag-colors function $colors mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)