广州市天河区天河路621号天娱广场西塔10楼
EAIC界面库
下拉框是一个包含了下拉按钮和下拉菜单的控件
.dropdown主容器.dropdown-trigger下拉按钮容器.dropdown-menu下拉菜单，缺省是隐藏状态.dropdown-content下拉框，含有阴影.dropdown-item每一个菜单项.dropdown-divider菜单项间的水平分割线
<div class="dropdown " >
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>下拉框</span>
<span class="icon is-small">
<i class="fa 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">
激活的菜单项
</a>
<a href="#" class="dropdown-item">
菜单项4
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
分割线下
</a>
</div>
</div>
</div>
下拉框内容
下拉框的内容除了菜单项，还可以是由div包含的任意内容
<div class="dropdown " >
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" >
<span>内容</span>
<span class="icon is-small">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>可以在这里插入 <strong>任意内容</strong> </p>
</div>
<hr class="dropdown-divider">
<div class="dropdown-item">
<p>可使用 <code><div></code> .</p>
</div>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
这是一个链接
</a>
</div>
</div>
</div>
悬浮菜单
下拉框的菜单弹出可以有两种方式，一种是添加
.is-active类，另一种是添加.is-hoverable
<div class="dropdown" >
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" >
<span>点击弹出</span>
<span class="icon is-small">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
预览
</a>
<a href="#" class="dropdown-item">
风格
</a>
<a href="#" class="dropdown-item">
表单
</a>
<a href="#" class="dropdown-item">
元素
</a>
<a href="#" class="dropdown-item">
控件
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
更多
</a>
</div>
</div>
</div>
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true">
<span>悬停时弹出</span>
<span class="icon is-small">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>这里插入 <strong>任意内容</strong> 弹出时可见</p>
</div>
</div>
</div>
</div>
右对齐
添加
.is-right类，菜单右对齐
<div class="dropdown is-right is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" >
<span>右对齐</span>
<span class="icon is-small">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>添加 <code>.is-right</code> 可以 <strong>右对齐</strong> 下拉框.</p>
</div>
</div>
</div>
</div>
向上弹出
添加
.is-up类，菜单向上弹出
<div class="dropdown is-up is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" >
<span>向上弹</span>
<span class="icon is-small">
<i class="fa fa-angle-up" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>添加 <code>.is-up</code> 可使菜单向上弹出.</p>
</div>
</div>
</div>
</div>
