下拉菜单
一个交互式下拉菜单，用于发现内容
dropdown 组件是下拉按钮和下拉菜单的容器。
dropdown 主容器
dropdown-trigger button 的容器
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>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> 并插入几乎任何类型的内容。
示例
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><div></code> instead.</p>
</div>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item"> This is a link </a>
</div>
</div>
</div>
dropdown 组件有 2 个附加修饰符
is-hoverable：当悬停在 dropdown-trigger 上时，下拉菜单将显示
is-active：下拉菜单将始终显示
示例
HTML
<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>示例
HTML
<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 修饰符，以获得右对齐下拉菜单。
示例
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>示例
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 修饰符，以获得显示在下拉按钮上方的下拉菜单。
示例
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>|
Sass 变量
|
CSS 变量
|
值
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|