دکمه

button کلاسیک، در رنگ ها، اندازه ها و حالت های مختلف

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

button المان اصلی هر طراحی است.

<button class="button">Button</button>

از کلاس button می توان در موارد زیر استفاده کرد:

  • <a> anchor links
  • <button> form buttons
  • <input type="submit"> submit inputs
  • <input type="reset"> reset inputs
Anchor

<a class="button">Anchor</a>
<button class="button">Button</button>
<input class="button" type="submit" value="Submit input">
<input class="button" type="reset" value="Reset input">
                      

رنگ ها #

button در همه رنگ های مختلف موجود است که با $colors Sass map تعریف شده است.


<button class="button is-white">White</button>
<button class="button is-light">Light</button>
<button class="button is-dark">Dark</button>
<button class="button is-black">Black</button>
<button class="button is-text">Text</button>
<button class="button is-ghost">Ghost</button>
                      

<div class="buttons">
  <button class="button is-primary">Primary</button>
  <button class="button is-link">Link</button>
</div>

<div class="buttons">
   <button class="button is-info">Info</button>
   <button class="button is-success">Success</button>
   <button class="button is-warning">Warning</button>
   <button class="button is-danger">Danger</button>
</div>
                      
از 0.8.0

نسخه light هر رنگ وجود دارد. به سادگی کلاس اصلاح کننده is-light به رنگ اضافه کنید تا نسخه light روی button اعمال شود.

                                
<div class="buttons">
  <button class="button is-primary is-light">Primary</button>
  <button class="button is-link is-light">Link</button>
</div>

<div class="buttons">
  <button class="button is-info is-light">Info</button>
  <button class="button is-success is-light">Success</button>
  <button class="button is-warning is-light">Warning</button>
  <button class="button is-danger is-light">Danger</button>
</div>
                      
                    

اندازه #

button در 4 اندازه متفاوت وجود دارد:

  • small
  • normal
  • medium
  • large

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

                                
<button class="button is-small">Small</button>
<button class="button">Default</button>
<button class="button is-normal">Normal</button>
<button class="button is-medium">Medium</button>
<button class="button is-large">Large</button>
                      
                    
از 0.7.4

با قرار دادن یک buttons در div اصلی و اعمال یکی از 3 کلاس اصلاح کننده، می توانید اندازه چندین button را همزمان تغییر دهید.

  • buttons are-small
  • buttons are-medium
  • buttons are-large
                                
<div class="buttons are-medium">
  <button class="button">All</button>
  <button class="button">Medium</button>
  <button class="button">Size</button>
</div>
                      
                    

با استفاده از یک کلاس اصلاح کننده می توانید اندازه یکی ازbuttonهای زیر مجموعه را تغییر دهید.
به عنوان مثال، اگر می خواهید همه button ها small باشند و اندازه یکی normal باشد،به سادگی موارد زیر را انجام دهید

                                
<div class="buttons are-small">
  <button class="button">Small</button>
  <button class="button">Small</button>
  <button class="button">Small</button>
  <button class="button is-normal">Normal</button>
  <button class="button">Small</button>
</div>
                      
                    

نمایش #


<button class="button is-small is-fullwidth">Small</button>
<button class="button is-fullwidth">Normal</button>
<button class="button is-medium is-fullwidth">Medium</button>
<button class="button is-large is-fullwidth">Large</button>
                      
                    

استایل #

Outlined


<button class="button is-outlined">Outlined</button>
<button class="button is-primary is-outlined">Outlined</button>
<button class="button is-link is-outlined">Outlined</button>
<button class="button is-info is-outlined">Outlined</button>
<button class="button is-success is-outlined">Outlined</button>
<button class="button is-danger is-outlined">Outlined</button>
                      
                    

Inverted (رنگ متن به رنگ پس زمینه تبدیل می شود و بالعکس)


<button class="button is-primary is-inverted">Inverted</button>
<button class="button is-link is-inverted">Inverted</button>
<button class="button is-info is-inverted">Inverted</button>
<button class="button is-success is-inverted">Inverted</button>
<button class="button is-danger is-inverted">Inverted</button>
                                    

Invert Outlined (رنگ معکوس به رنگ متن و حاشیه در می آید)


<button class="button is-primary is-inverted is-outlined">Invert Outlined</button>
<button class="button is-link is-inverted is-outlined">Invert Outlined</button>
<button class="button is-info is-inverted is-outlined">Invert Outlined</button>
<button class="button is-success is-inverted is-outlined">Invert Outlined</button>
<button class="button is-danger is-inverted is-outlined">Invert Outlined</button>
                      

Rounded buttons

از 0.6.2

<button class="button is-rounded">Rounded</button>
<button class="button is-primary is-rounded">Rounded</button>
<button class="button is-link is-rounded">Rounded</button>
<button class="button is-info is-rounded">Rounded</button>
<button class="button is-success is-rounded">Rounded</button>
<button class="button is-danger is-rounded">Rounded</button>
                      

حالت ها #

Bulma حالت های مختلف دکمه های خود را استایل می دهد. هر حالت به عنوان یک شبه کلاس و یک کلاس CSS در دسترس است:

  • :hover و is-hovered
  • :focus وis-focused
  • :active و is-active

این به شما امکان می دهد استایل یک حالت خاص را بدون نیاز به تحریک آن بدست آورید.

Normal


<button class="button">Normal</button>
<button class="button is-primary">Normal</button>
<button class="button is-link">Normal</button>
<button class="button is-info">Normal</button>
<button class="button is-success">Normal</button>
<button class="button is-warning">Normal</button>
<button class="button is-danger">Normal</button>
                      

Hover


<button class="button is-hovered">Hover</button>
<button class="button is-primary is-hovered">Hover</button>
<button class="button is-link is-hovered">Hover</button>
<button class="button is-info is-hovered">Hover</button>
<button class="button is-success is-hovered">Hover</button>
<button class="button is-warning is-hovered">Hover</button>
<button class="button is-danger is-hovered">Hover</button>
                      

Focus


<button class="button is-focused">Focus</button>
<button class="button is-primary is-focused">Focus</button>
<button class="button is-link is-focused">Focus</button>
<button class="button is-info is-focused">Focus</button>
<button class="button is-success is-focused">Focus</button>
<button class="button is-warning is-focused">Focus</button>
<button class="button is-danger is-focused">Focus</button>
                      

Active


<button class="button is-active">Active</button>
<button class="button is-primary is-active">Active</button>
<button class="button is-link is-active">Active</button>
<button class="button is-info is-active">Active</button>
<button class="button is-success is-active">Active</button>
<button class="button is-warning is-active">Active</button>
<button class="button is-danger is-active">Active</button>
                      

Loading

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

از آنجا که loading spinner با استفاده از شبه کلاس :: after اجرا می شود، توسط المان <input type="submit"> پشتیبانی نمی شود. در نظر بگیرید به جای آن از <button type="submit"> استفاده کنید.


<button class="button is-loading">Loading</button>
<button class="button is-primary is-loading">Loading</button>
<button class="button is-link is-loading">Loading</button>
<button class="button is-info is-loading">Loading</button>
<button class="button is-success is-loading">Loading</button>
<button class="button is-warning is-loading">Loading</button>
<button class="button is-danger is-loading">Loading</button>
                      

Static

با استفاده از کلاس اصلاح کننده is-static می توانید button غیرفعال ایجاد کنید. این برای تراز کردن برچسب متن با ورودی مفید است ، به عنوان مثال هنگام استفاده از افزودنیهای فرم .

Static

<span class="button is-static">Static</span>
                            

غیرفعال

Bulma از ویژگی HTML disabled پشتیبانی می کند. در اینصورت عملکرد buttton غیرفعال می شود.

کلاس CSS is-disabled به دلیل دلیل ویژگی disabled HTML منسوخ شده است. بیشتر بدانید


<button class="button" title="Disabled button" disabled>Disabled</button>
<button class="button is-primary" title="Disabled button" disabled>Disabled</button>
<button class="button is-link" title="Disabled button" disabled>Disabled</button>
<button class="button is-info" title="Disabled button" disabled>Disabled</button>
<button class="button is-success" title="Disabled button" disabled>Disabled</button>
<button class="button is-warning" title="Disabled button" disabled>Disabled</button>
<button class="button is-danger" title="Disabled button" disabled>Disabled</button>
                      

با آیکون های Font Awesome

button های Bulma را می توان با افزودن یک آیکون Font Awesome به راحتی بهبود بخشید. برای نتیجه بهتر، متن داخلی را در یک المان جداگانه <<span> قرار دهید.


<p class="buttons">
  <button class="button">
    <span class="icon is-small">
      <i class="fas fa-bold"></i>
    </span>
  </button>
  <button class="button">
    <span class="icon is-small">
      <i class="fas fa-italic"></i>
    </span>
  </button>
  <button class="button">
   <span class="icon is-small">
     <i class="fas fa-underline"></i>
   </span>
  </button>
</p>
<p class="buttons">
  <button class="button">
    <span class="icon">
       <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
  <button class="button is-primary">
    <span class="icon">
      <i class="fab fa-twitter"></i>
    </span>
    <span>@jgthms</span>
  </button>
  <button class="button is-success">
    <span class="icon is-small">
      <i class="fas fa-check"></i>
    </span>
    <span>Save</span>
  </button>
  <button class="button is-danger is-outlined">
    <span>Delete</span>
    <span class="icon is-small">
      <i class="fas fa-times"></i>
     </span>
  </button>
</p>
<p class="buttons">
  <button class="button is-small">
    <span class="icon is-small">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
  <button class="button">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
  <button class="button is-medium">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
  <button class="button is-large">
    <span class="icon is-medium">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
</p>
                      

اگر button تنها شامل آیکون باشد، button به صورت مربع در می آید. باشد ، مهم نیست که اندازه button یا آیکون چیست.


<p class="buttons">
  <button class="button is-small">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
    </button>
</p>
<p class="buttons">
  <button class="button">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </button>
  <button class="button">
    <span class="icon">
      <i class="fas fa-heading fa-lg"></i>
    </span>
  </button>
</p>
<p class="buttons">
  <button class="button is-medium">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </button>
  <button class="button is-medium">
    <span class="icon">
      <i class="fas fa-heading fa-lg"></i>
    </span>
  </button>
  <button class="button is-medium">
    <span class="icon is-medium">
      <i class="fas fa-heading fa-2x"></i>
    </span>
  </button>
</p>
<p class="buttons">
  <button class="button is-large">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </button>
  <button class="button is-large">
    <span class="icon">
      <i class="fas fa-heading fa-lg"></i>
    </span>
  </button>
  <button class="button is-large">
    <span class="icon is-medium">
      <i class="fas fa-heading fa-2x"></i>
    </span>
  </button>
</p>
                      

Button group #

اگر می خواهید button ها را در یک خط با هم گروه کنید، از کلاس اصلاح کننده is-grouped در بخش field استفاده کنید :


<div class="field is-grouped">
  <p class="control">
    <button class="button is-link">
      Save changes
    </button>
  </p>
  <p class="control">
    <button class="button">
      Cancel
    </button>
   </p>
   <p class="control">
   <button class="button is-danger">
      Delete post
    </button>
  </p>
</div>
                      

Button addons #

اگر می خواهید از button ها به عنوان addons استفاده کنید ، از کلاس اصلاح کننده has-addons در بخش field استفاده کنید:


<div class="field has-addons">
  <p class="control">
    <button class="button">
       <span class="icon is-small">
         <i class="fas fa-align-right"></i>
       </span>
       <span>راست</span>
    </button>
  </p>
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-align-center"></i>
      </span>
      <span>وسط</span>
    </button>
  </p>
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-align-left"></i>
      </span>
      <span>چپ</span>
    </button>
  </p>
</div>
                      
                      

Button group با addons #

می توانید addonها را با هم گروه کنید


<div class="field has-addons">
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-bold"></i>
      </span>
      <span>Bold</span>
    </button>
  </p>
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-italic"></i>
      </span>
      <span>Italic</span>
    </button>
      </p>
      <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-underline"></i>
      </span>
      <span>Underline</span>
    </button>
  </p>
</div>
                        
<div class="field has-addons">
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-align-left"></i>
      </span>
      <span>Left</span>
    </button>
  </p>
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-align-right"></i>
      </span>
      <span>راست</span>
    </button>
  </p>
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-align-center"></i>
      </span>
      <span>وسط</span>
    </button>
  </p>
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-align-left"></i>
      </span>
      <span>چپ</span>
    </button>
  </p>
</div>
                      

لیستی از Button ها #

ازحالت ها 0.6.1

با استفاده از بخش button ها می توانید لیست button ها را ایجاد کنید.


<div class="buttons">
  <button class="button is-success">Save changes</button>
  <button class="button is-info">Save and continue</button>
  <button class="button is-danger">Cancel</button>
</div>

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


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

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


    <div class="buttons has-addons">
    <button class="button">بله</button>
    <button class="button">شاید</button>
    <button class="button">نه</button>
    </div>

برای تغییر جهت از کلاس اصلاح کننده is-centered یا is-right استفاده کنید


<div class="buttons has-addons is-centered">
  <button class="button">بله</button>
  <button class="button">شاید</button>
  <button class="button">نه</button>
</div>

<div class="buttons has-addons is-right">
  <button class="button">بله</button>
  <button class="button">شاید</button>
  <button class="button">نه</button>
</div>

برای ایجاد تفاوت در هر button می توانید از هر کلاس اصلاح کننده ای استفاده کنید. برای اطمینان از اینکه button انتخاب شده مشخص تر از بقیه button هاست ، کلاس اصلاح کننده is bijare را نیز اضافه کنید.


    <div class="buttons has-addons">
    <button class="button is-success is-selected">بله</button>
    <button class="button">شاید</button>
    <button class="button">نه</button>
    </div>

    <div class="buttons has-addons">
    <button class="button">بله</button>
    <button class="button is-info is-selected">شاید</button>
    <button class="button">نه</button>
    </div>

    <div class="buttons has-addons">
    <button class="button">بله</button>
    <button class="button">شاید</button>
    <button class="button is-danger is-selected">نه</button>
    </div>

تفاوت بین form groups و لیستی از Button ها

در حالی که استایل لیستی از button ها را می توان با کلاس field is-grouped یا کلاس جدید buttons به دست آورد، ولی چندین تفاوت وجود دارد:

  • buttons دارای نشانه گذاری ساده تر هستند
  • buttons تنها می تواند شامل المان های button باشد
  • field is-grouped می تواند شامل هر نوع ورودی control باشد.
  • field is-grouped می تواند همه کنترلر ها را در یک خط قرار دهد.
  • با field is-grouped می توانید یکی از کنترل ها را گسترش دهید.

اساساً، اگر فقط لیستی از button ها را می خواهید، استفاده از دکمه های buttons توصیه می شود. اگر به کنترل بیشتری بر روی یک ظاهر طراحی شده و المان ها نیاز دارید ، از یک form group استفاده کنید.


متغیرها #

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

نام نوع مقدار پیش فرض مقدار محاسبه شده
نام نوع مقدار پیش فرض مقدار محاسبه شده
$button-color color $text-strong hsl(0, 0%, 21%)
$button-background-color color $scheme-main hsl(0, 0%, 100%)
$button-family boolean false
$button-border-color color $border hsl(0, 0%, 86%)
$button-border-width variable $control-border-width
$button-padding-vertical size calc(0.5em - #{$button-border-width})
$button-padding-horizontal size 1em
$button-hover-color color $link-hover hsl(0, 0%, 21%)
$button-hover-border-color color $link-hover-border hsl(0, 0%, 71%)
$button-focus-color color $link-focus hsl(0, 0%, 21%)
$button-focus-border-color color $link-focus-border hsl(217, 71%, 53%)
$button-focus-box-shadow-size size 0 0 0 0.125em
$button-focus-box-shadow-color compound bulmaRgba($link, 0.25)
$button-active-color color $link-active hsl(0, 0%, 21%)
$button-active-border-color color $link-active-border hsl(0, 0%, 29%)
$button-text-color color $text hsl(0, 0%, 29%)
$button-text-decoration string underline
$button-text-hover-background-color color $background hsl(0, 0%, 96%)
$button-text-hover-color color $text-strong hsl(0, 0%, 21%)
$button-disabled-background-color color $scheme-main hsl(0, 0%, 100%)
$button-disabled-border-color color $border hsl(0, 0%, 86%)
$button-disabled-shadow string none
$button-disabled-opacity unitless 0.5
$button-static-color color $text-light hsl(0, 0%, 48%)
$button-static-background-color color $scheme-main-ter hsl(0, 0%, 96%)
$button-static-border-color color $border hsl(0, 0%, 86%)
$button-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)