dropdown
组件是包含了一个 dropdown 按钮和一个 dropdown 菜单的容器。
-
dropdown
是主容器
-
dropdown-trigger
是 button
的容器
-
dropdown-menu
是切换菜单组件,默认隐藏
-
dropdown-content
下来菜单的盒子,由白背景和阴影
-
dropdown-item
是下来菜单的单个项目,既可以是 a
也可以是 div
元素
-
dropdown-divider
分给或分组下拉菜单项目的 水平线
HTML
Dropdown 内容
#
dropdown-item
可以使用锚点(anchor)链接 <a>
或者使用 <div>
,然后插入任何类型的内容。
HTML
可悬停或者切换
#
dropdown
组件有 2 个扩展修饰符
-
is-hoverable
:dropdown 当 (悬停)hovering 是触发 dropdown-trigger
显示下拉菜单
-
is-active
:下来菜单全时始终显示
CSS :hover
扩展也能很好运行, is-active
类只是为了那些想要通过 JavaScript 控制下来菜单显示的用户而准备的。
HTML
HTML
向右对齐
#
您可以添加 is-right
修饰符,就拥有了一个(右对齐)right-aligned 的 dropdown。
HTML
HTML
上拉菜单(Dropup)
#
您可以添加 is-up
修饰符是下拉菜单成上拉菜单。
HTML
Variables
#
Name
Type
Value
Computed Value
Computed Type
variable
color
size
size
variable
shadow
variable
color
variable
color
variable
color
variable
color
variable
color