Dropdown

交互式下拉菜单

New!

Since 0.4.4

Colors No

Sizes No

Variables Yes

dropdown 组件是下拉按钮和下拉菜单的容器。

dropdown 主容器
- dropdown-trigger button容器
- dropdown-menu 可切换的菜单，默认隐藏
  - dropdown-content 下拉框, 带有白色背景和阴影
    - dropdown-item 下拉菜单种的每个项目，可以是 a 或 div
    - dropdown-divider 下拉项目的 分割线

        <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: 当悬停下拉触发器时，下拉菜单会显示出来
is-active: 下拉菜单会 一直显示

虽然 CSS :hover 可以完美工作，但是 is-active 类可用于想使用 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>

Right aligned | 右对齐 #

您可以添加 is-right 修饰符得到一个 右对齐 的下拉菜单.

<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 | 上拉 #

New! 0.5.4

您可以使用 is-up 修饰符得到一个在上方显示的下拉菜单。

<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>

Variables | 变量 #

你可以使用这些变量来 自定义 这些 component。只需要在导入 Bulma 之前设置这些变量学习如何开始.

Name	Default value
Name	Default value
`$dropdown-content-background-color`	`$white`
`$dropdown-content-arrow`	`$link`
`$dropdown-content-offset`	`4px`
`$dropdown-content-radius`	`$radius`
`$dropdown-content-shadow`	`0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)`
`$dropdown-content-z`	`20`
`$dropdown-item-color`	`$grey-dark`
`$dropdown-item-hover-color`	`$black`
`$dropdown-item-hover-background-color`	`$background`
`$dropdown-item-active-color`	`$link-invert`
`$dropdown-item-active-background-color`	`$link`
`$dropdown-divider-background-color`	`$border`

这是一个 开源项目. 错别字? Or 有疑问? 在GitHub上改进这个页面。

Bulma Partners

Check out their products!

Dropdown

交互式 下拉菜单

Dropdown content | 下拉内容 #

Hoverable or Toggable | 悬浮 或 可切换 #

Right aligned | 右对齐 #

Dropup | 上拉 #

Variables | 变量 #

交互式下拉菜单

Hoverable or Toggable | 悬浮或可切换 #