Dropdown

An interactive dropdown menu for discoverable content

رنگ ندارد
اندازه ندارد
متغیرها Yes

کامپوننت dropdown دارای یک بخش dropdown button و dropdown menu می باشد. menu.

  • dropdown بخش اصلی
    • dropdown-trigger بخش button
    • dropdown-menu toggable menu،به طور پیش فرض مخفی
      • dropdown-content بخش dropdown دارای پس زمینه سفید و سایه دار
        • dropdown-item هر آیتمی از dropdown, که می تواند یک a یا یک div باشد.
        • dropdown-divider یک خط افقی برای جدا کردن آیتم های dropdown

<div class="dropdown is-active">
 <div class="dropdown-trigger">
  <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
   <span>Dropdown button</span>
   <span class="icon is-small">
    <i class="fas fa-angle-down" aria-hidden="true"></i>
   </span>
  </button>
 </div>
 <div class="dropdown-menu" id="dropdown-menu" role="menu">
  <div class="dropdown-content">
   <a href="#" class="dropdown-item">
     Dropdown item
   </a>
   <a class="dropdown-item">
     Other dropdown item
   </a>
   <a href="#" class="dropdown-item is-active">
     Active dropdown item
   </a>
   <a href="#" class="dropdown-item">
     Other dropdown item
   </a>
   <hr class="dropdown-divider">
   <a href="#" class="dropdown-item">
     With a divider
   </a>
   </div>
  </div>
</div>
                                    

در حالیکه dropdown-item می تواند به عنوان لینک <a> استفاده شود، می توانید به صورت <div> بنویسید هر نوع محتوایی در آن وارد کنید.


<div class="dropdown is-active">
 <div class="dropdown-trigger">
  <button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
   <span>Content</span>
   <span class="icon is-small">
    <i class="fas fa-angle-down" aria-hidden="true"></i>
   </span>
  </button>
 </div>
 <div class="dropdown-menu" id="dropdown-menu2" role="menu">
  <div class="dropdown-content">
   <div class="dropdown-item">
    <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
   </div>
   <hr class="dropdown-divider">
   <div class="dropdown-item">
    <p>You simply need to use a <code>&lt;div&gt;</code> instead.</p>
   </div>
   <hr class="dropdown-divider">
   <a href="#" class="dropdown-item">
    This is a link
   </a>
  </div>
 </div>
</div>
                                    

Hoverable or Toggable #

کامپوننت dropdown دارای 2 اصلاح کننده افزودنی است

  • is-hoverable: dropdown زمانی نمایش داده می شود که روی dropdown-trigger هاور می شود(نشانگر ماوس روی آن قرار داده می شود)
  • is-active: dropdown همیشه نشان داده می شود

در حالیکه کلاس CSS :hover به درستی کار می کند، is-active برای کاربرانی در دسترس است که می خواهند dropdown را با JavaScript نمایش دهند.


<div class="dropdown">
 <div class="dropdown-trigger">
  <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
   <span>Click me</span>
   <span class="icon is-small">
    <i class="fas fa-angle-down" aria-hidden="true"></i>
   </span>
  </button>
 </div>
 <div class="dropdown-menu" id="dropdown-menu3" role="menu">
  <div class="dropdown-content">
   <a href="#" class="dropdown-item">
     Overview
   </a>
   <a href="#" class="dropdown-item">
     Modifiers
   </a>
   <a href="#" class="dropdown-item">
     Grid
   </a>
   <a href="#" class="dropdown-item">
    Form
   </a>
   <a href="#" class="dropdown-item">
     Elements
   </a>
   <a href="#" class="dropdown-item">
     Components
   </a>
   <a href="#" class="dropdown-item">
     Layout
   </a>
   <hr class="dropdown-divider">
   <a href="#" class="dropdown-item">
     More
   </a>
  </div>
 </div>
</div>
                        
<div class="dropdown is-hoverable">
 <div class="dropdown-trigger">
  <button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
   <span>Hover me</span>
   <span class="icon is-small">
    <i class="fas fa-angle-down" aria-hidden="true"></i>
   </span>
  </button>
 </div>
 <div class="dropdown-menu" id="dropdown-menu4" role="menu">
  <div class="dropdown-content">
   <div class="dropdown-item">
    <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
   </div>
  </div>
 </div>
</div>
                                    

راست چین #

می توانید با اضافه کردن کلاس اصلاح کننده is-right یک dropdownراست چین داشته باشید.


<div class="dropdown is-right is-active">
 <div class="dropdown-trigger">
  <button class="button" aria-haspopup="true" aria-controls="dropdown-menu6">
   <span>Right aligned</span>
   <span class="icon is-small">
    <i class="fas fa-angle-down" aria-hidden="true"></i>
   </span>
  </button>
 </div>
 <div class="dropdown-menu" id="dropdown-menu6" role="menu">
  <div class="dropdown-content">
   <div class="dropdown-item">
    <p>Add the <code>is-right</code> modifier for a <strong>right-aligned</strong> dropdown.</p>
   </div>
  </div>
 </div>
</div>
                                    

Dropup #

با اضافه کردن کلاس اصلاح کننده is-up dropdown menu به سمت بالا باز می شود.


<div class="dropdown is-up">
 <div class="dropdown-trigger">
  <button class="button" aria-haspopup="true" aria-controls="dropdown-menu7">
   <span>Dropup button</span>
   <span class="icon is-small">
    <i class="fas fa-angle-up" aria-hidden="true"></i>
   </span>
  </button>
 </div>
 <div class="dropdown-menu" id="dropdown-menu7" role="menu">
  <div class="dropdown-content">
   <div class="dropdown-item">
    <p>You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.</p>
   </div>
  </div>
 </div>
</div>
                                    

متغیرها #

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

نام نوع مقدار پیش فرض مقدار محاسبه شده
نام نوع مقدار پیش فرض مقدار محاسبه شده
$dropdown-menu-min-width size 12rem
$dropdown-content-background-color color $scheme-main hsl(0, 0%, 100%)
$dropdown-content-arrow color $link hsl(217, 71%, 53%)
$dropdown-content-offset size 4px
$dropdown-content-padding-bottom size 0.5rem
$dropdown-content-padding-top size 0.5rem
$dropdown-content-radius size $radius 4px
$dropdown-content-shadow size 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
$dropdown-content-z string 20
$dropdown-item-color color $text hsl(0, 0%, 29%)
$dropdown-item-hover-color color $scheme-invert hsl(0, 0%, 4%)
$dropdown-item-hover-background-color color $background hsl(0, 0%, 96%)
$dropdown-item-active-color color $link-invert #fff
$dropdown-item-active-background-color color $link hsl(217, 71%, 53%)
$dropdown-divider-background-color color $border-light hsl(0, 0%, 93%)