下拉组件(Dropdown)

可发现内容的交互式下拉菜单(这个是下拉菜单导航,select见下一章表单部分),配套js文件https://www.bulmacss.cn/article/read/6.html

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

  • dropdown 主容器
    • dropdown-trigger 下拉触发按钮的容器
    • dropdown-menu 下拉菜单,可切换菜单,默认情况下隐藏
      • dropdown-content 下拉内容框,带有白色背景和阴影
        • dropdown-item 下列选项,下拉列表项下拉列表中的每一项,可以是a或div
        • dropdown-divider 下拉分隔线,用于分隔下拉项的水平线

HTML

<div class="dropdown is-active">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
  <span>下拉按钮</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">
  下拉选项1
  </a>
  <a class="dropdown-item">
  下拉选项2
  </a>
  <a href="#" class="dropdown-item is-active">
  下拉选项3(激活)
  </a>
  <a href="#" class="dropdown-item">
  下拉选项4
  </a>
  <hr class="dropdown-divider">
  <a href="#" class="dropdown-item">
  下拉选项5(带分割线)
  </a>
</div>
</div>
</div>

下拉项可以用锚链接,也可以使用

HTML

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

可悬停或可切换 #

The dropdown 有两个附加的修饰符:

  • is-hoverable: 可悬停的,当鼠标悬停在菜单上方时显示菜单选项
  • is-active: 下拉列表将一直显示

虽然CSS:hover实现可以完美地工作,但是对于希望用JavaScript控制下拉列表显示的用户,is-active类是可用的。

HTML

<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
  <span>点击显示选项</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>

示例

HTML

<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
  <span>鼠标放在上面显示</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 修饰符,使下拉列表右对齐。

Example

HTML

<div class="dropdown is-active">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu5">
  <span>Left 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-menu5" role="menu">
<div class="dropdown-content">
  <div class="dropdown-item">
    <p>The dropdown is <strong>left-aligned</strong> by default.</p>
  </div>
</div>
</div>
</div>

Example

HTML

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

向上弹出菜单 #

可以添 is-up修改器,使下拉菜单显示在下拉按钮上方。

Example

HTML

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

Name
Type
Value
Computed Value
Computed Type
$dropdown-menu-min-width
size
12rem
$dropdown-content-background-color
variable
$scheme-main
hsl(0, 0%, 100%)
color
$dropdown-content-arrow
variable
$link
hsl(229, 53%,  53%)
color
$dropdown-content-offset
size
4px
$dropdown-content-padding-bottom
size
0.5rem
$dropdown-content-padding-top
size
0.5rem
$dropdown-content-radius
variable
$radius
4px
size
$dropdown-content-shadow
shadow
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
variable
$text
hsl(0, 0%, 29%)
color
$dropdown-item-hover-color
variable
$scheme-invert
hsl(0, 0%, 4%)
color
$dropdown-item-hover-background-color
variable
$background
hsl(0, 0%, 96%)
color
$dropdown-item-active-color
variable
$link-invert
#fff
color
$dropdown-item-active-background-color
variable
$link
hsl(229, 53%,  53%)
color
$dropdown-divider-background-color
variable
$border-light
hsl(0, 0%, 93%)
color

返回头部

问题反馈
返回顶部