2020-07-28 10:03:53 +08:00
|
|
|
---
|
|
|
|
|
title: DropDownButton
|
2021-01-07 23:35:03 +08:00
|
|
|
description:
|
2020-07-28 10:03:53 +08:00
|
|
|
type: 0
|
|
|
|
|
group: ⚙ 组件
|
|
|
|
|
menuName: DropDownButton
|
2021-01-07 23:35:03 +08:00
|
|
|
icon:
|
2020-07-28 10:03:53 +08:00
|
|
|
order: 44
|
|
|
|
|
---
|
2021-01-07 23:35:03 +08:00
|
|
|
|
2020-07-28 10:03:53 +08:00
|
|
|
## 基本用法
|
|
|
|
|
|
2021-01-07 23:35:03 +08:00
|
|
|
```schema
|
2020-07-28 10:03:53 +08:00
|
|
|
{
|
|
|
|
|
"type": "page",
|
|
|
|
|
"body": {
|
|
|
|
|
"type": "dropdown-button",
|
|
|
|
|
"label": "下拉菜单",
|
|
|
|
|
"buttons": [
|
|
|
|
|
{
|
|
|
|
|
"type": "button",
|
2021-02-09 21:56:15 +08:00
|
|
|
"label": "按钮1",
|
|
|
|
|
"disabled": true
|
2020-07-28 10:03:53 +08:00
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "按钮2"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "button",
|
|
|
|
|
"label": "按钮3"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 属性表
|
|
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| --------------- | --------------- | ----------------- | ----------------------------------------- |
|
|
|
|
|
| type | `string` | `dropdown-button` | 类型 |
|
|
|
|
|
| label | `string` | | 按钮文本 |
|
|
|
|
|
| className | `string` | | 外层 CSS 类名 |
|
|
|
|
|
| block | `boolean` | | 块状样式 |
|
|
|
|
|
| size | `string` | | 尺寸，支持`'xs'`、`'sm'`、`'md'` 、`'lg'` |
|
|
|
|
|
| align | `string` | | 位置，可选`'left'`或`'right'` |
|
|
|
|
|
| buttons | `Array<action>` | | 配置下拉按钮 |
|
|
|
|
|
| caretIcon | `string` | | caretIcon |
|
2021-01-07 23:35:03 +08:00
|
|
|
| iconOnly | `boolean` | | 只显示 icon |
|
2020-07-28 10:03:53 +08:00
|
|
|
| defaultIsOpened | `boolean` | | 默认是否打开 |
|
|
|
|
|
| closeOnOutside | `boolean` | | 点击外侧区域是否收起 |
|
