组件

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
下拉列表项
某一条下拉项禁用