DropDownButton

基本用法

  1. {
  2.     "type": "page",
  3.     "body": {
  4.         "type": "dropdown-button",
  5.         "label": "下拉菜单",
  6.         "buttons": [
  7.             {
  8.                 "type": "button",
  9.                 "label": "按钮1",
  10.                 "disabled": true
  11.             },
  12.             {
  13.                 "type": "button",
  14.                 "label": "按钮2"
  15.             },
  16.             {
  17.                 "type": "button",
  18.                 "label": "按钮3"
  19.             }
  20.         ]
  21.     }
  22. }

分组展示模式

配置children可以实现分组展示，分组标题支持配置icon。

1.5.7 及以上版本

```schema: scope=”body” { “type”: “dropdown-button”, “label”: “下拉菜单”, “buttons”: [ { “label”: “RD”, “icon”: “fa fa-user”, “children”: [ { “type”: “button”, “label”: “前端FE” }, { “type”: “button”, “label”: “后端RD” } ] }, { “label”: “QA”, “icon”: “fa fa-user”, “children”: [ { “type”: “button”, “label”: “测试QA”, }, { “type”: “button”, “label”: “交付测试DQA”, “disabled”: true }, { “type”: “divider” } ] }, { “label”: “Manager”, “icon”: “fa fa-user”, “children”: [ { “type”: “button”, “label”: “项目经理PM” }, { “type”: “button”, “label”: “项目管理中心PMO”, “visible”: false } ] } ] }

  2. ## 关闭下拉菜单
  4. 配置`"closeOnClick": true`可以实现点击按钮后自动关闭下拉菜单。
  6. ```schema
  7. {
  8.     "type": "page",
  9.     "body": {
  10.         "type": "dropdown-button",
  11.         "label": "下拉菜单",
  12.         "closeOnClick": true,
  13.         "closeOnOutside": true,
  14.         "buttons": [
  15.             {
  16.                 "type": "button",
  17.                 "label": "按钮1",
  18.                 "disabled": true
  19.             },
  20.             {
  21.                 "type": "button",
  22.                 "label": "按钮2"
  23.             },
  24.             {
  25.                 "type": "button",
  26.                 "label": "按钮3"
  27.             }
  28.         ]
  29.     }
  30. }

触发方式

1.4.0 及以上版本

默认是点击鼠标触发，可以通过 "trigger": "hover" 配置为鼠标移上去后触发

  1. {
  2.     "type": "page",
  3.     "body": {
  4.         "type": "dropdown-button",
  5.         "label": "下拉菜单",
  6.         "trigger": "hover",
  7.         "buttons": [
  8.             {
  9.                 "type": "button",
  10.                 "label": "按钮1",
  11.                 "disabled": true
  12.             },
  13.             {
  14.                 "type": "button",
  15.                 "label": "按钮2"
  16.             },
  17.             {
  18.                 "type": "button",
  19.                 "label": "按钮3"
  20.             }
  21.         ]
  22.     }
  23. }

设置图标

通过 icon 可以设置左侧图标

  1. {
  2.     "type": "page",
  3.     "body": {
  4.         "type": "dropdown-button",
  5.         "label": "下拉菜单",
  6.         "trigger": "hover",
  7.         "icon": "fa fa-home",
  8.         "buttons": [
  9.             {
  10.                 "type": "button",
  11.                 "label": "按钮1",
  12.                 "disabled": true
  13.             },
  14.             {
  15.                 "type": "button",
  16.                 "label": "按钮2"
  17.             },
  18.             {
  19.                 "type": "button",
  20.                 "label": "按钮3"
  21.             }
  22.         ]
  23.     }
  24. }

只显示图标

可以设置 level 及 hideCaret 来只显示图标，并配合 tooltip 来显示提示文字

  1. {
  2.     "type": "page",
  3.     "body": {
  4.         "type": "dropdown-button",
  5.         "level": "link",
  6.         "icon": "fa fa-ellipsis-h",
  7.         "hideCaret": true,
  8.         "tooltip": "提示",
  9.         "buttons": [
  10.             {
  11.                 "type": "button",
  12.                 "label": "按钮1",
  13.                 "disabled": true
  14.             },
  15.             {
  16.                 "type": "button",
  17.                 "label": "按钮2"
  18.             },
  19.             {
  20.                 "type": "button",
  21.                 "label": "按钮3"
  22.             }
  23.         ]
  24.     }
  25. }

设置右侧图标

1.5.0 及以上版本

通过 rightIcon 设置右侧图标，同时通过 hideCaret 隐藏右侧下拉图标

  1. {
  2.     "type": "page",
  3.     "body": {
  4.         "type": "dropdown-button",
  5.         "label": "下拉菜单",
  6.         "trigger": "hover",
  7.         "rightIcon": "fa fa-ellipsis-v",
  8.         "hideCaret": true,
  9.         "buttons": [
  10.             {
  11.                 "type": "button",
  12.                 "label": "按钮1",
  13.                 "disabled": true
  14.             },
  15.             {
  16.                 "type": "button",
  17.                 "label": "按钮2"
  18.             },
  19.             {
  20.                 "type": "button",
  21.                 "label": "按钮3"
  22.             }
  23.         ]
  24.     }
  25. }

属性表

属性名 类型 默认值 说明
type string dropdown-button 类型
label string 按钮文本
className string 外层 CSS 类名
btnClassName string 按钮 CSS 类名
menuClassName string 下拉菜单 CSS 类名
block boolean 块状样式
size string 尺寸，支持'xs'、'sm'、'md' 、'lg'
align string 位置，可选'left'或'right'
buttons Array<DropdownButton> 配置下拉按钮
iconOnly boolean 只显示 icon
defaultIsOpened boolean 默认是否打开
closeOnOutside boolean true 点击外侧区域是否收起
closeOnClick boolean false 点击按钮后自动关闭下拉菜单
trigger click 或 hover click 触发方式
hideCaret boolean false 隐藏下拉图标