Dropdown 下拉菜单
点击或移入操作区,会向下弹出一个菜单列表。 API文档 组件问题反馈和讨论使用方法
- 当页面上的操作命令过多时,用此组件可以收纳操作元素。
- 点击或移入触点,会出现一个下拉菜单。
基础样式 #
最简单的下拉样式 && 整体禁用<code>
显示代码
触发方式 #
最基本的触发方式是 hover ,可以更改为 click 触发。添加nv-event属性有"click"、"hover"(默认)<code>
显示代码
带下拉框的按钮 #
可以使用按钮形式触发下拉菜单,只需要添加样式"nv-dropdown-btn"<code>
显示代码
对齐方式 #
左对齐(默认),右对齐样式"nv-dropdown-right",等宽样式nv-dropdown-equal三种方式<code>
显示代码
多级菜单 #
菜单多用于功能较多的时候使用,建议最多二级。添加的子元素菜单只需要添加样式为"nv-dropdown-children"即可。<code>
显示代码
API #
自定义属性
属性
|
类型(是否必要)
|
描述
|
---|
data-type
|
string (选填)
|
(默认hover,可选 "click") eg: data-type="click"
|
data-menuwidth
|
string (选填)
|
下拉菜单宽度 eg: data-menuwidth="50px"
|
data-menuheight
|
string (选填)
|
下拉菜单高度 eg: data-menuheight="50px"
|
data-close-auto
|
Boolean (选填)
|
true 开启时将关闭,自动计算向上或向下翻折叠 eg: data-close-auto="true"
|
Class #
可配样式说明
类型
|
位置
|
描述
|
---|
nv-dropdown-btn
|
最外层
|
是否展示为按钮样式
|
nv-dropdown-up
|
最外层
|
向上翻折
|
nv-dropdown-right
|
最外层
|
下拉窗体右对齐
|
nv-dropdown-equal
|
最外层
|
下拉窗体与父级等宽
|
nv-dropdown-disabled
|
最外层
|
下拉整体禁用
|
nv-dropdown-item-disabled
|
下拉列表项
|
某一条下拉项禁用
|