test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-03 04:28:32 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity
6cc379599d
amis2/docs/zh-CN/components/dropdown-button.md

292 lines
7.7 KiB
Markdown
Raw Normal View History

文档加上去了
2020-07-28 10:03:53 +08:00
---
title: DropDownButton
文档文字小调整；统一删掉 schema 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) * 文档优化 * 文档细节调整，删除示例的 height 设置，使用自动撑开 * sdk 使用完整例子，因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00
description:
文档加上去了
2020-07-28 10:03:53 +08:00
type: 0
group: ⚙ 组件
menuName: DropDownButton
文档文字小调整；统一删掉 schema 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) * 文档优化 * 文档细节调整，删除示例的 height 设置，使用自动撑开 * sdk 使用完整例子，因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00
icon:
文档加上去了
2020-07-28 10:03:53 +08:00
order: 44
---
文档文字小调整；统一删掉 schema 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) * 文档优化 * 文档细节调整，删除示例的 height 设置，使用自动撑开 * sdk 使用完整例子，因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00
文档加上去了
2020-07-28 10:03:53 +08:00
## 基本用法
文档文字小调整；统一删掉 schema 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) * 文档优化 * 文档细节调整，删除示例的 height 设置，使用自动撑开 * sdk 使用完整例子，因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
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",
dropdown 菜单可以配置 disabled (#1574)
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"
}
]
}
}
```
feat: DropDownButton支持分组，菜单CSS类名，添加下拉菜单max-width (#3302)
2021-12-30 22:42:43 +08:00
## 分组展示模式
配置`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
}
]
}
]
}
```
docs(dropdown-button.md): 自动关闭下拉菜单属性补充 issue #2987 (#3000) Co-authored-by: lurunze1226 <lurunze@baidu.com>
2021-11-19 11:57:53 +08:00
## 关闭下拉菜单
配置`"closeOnClick": true`可以实现点击按钮后自动关闭下拉菜单。
```schema
{
"type": "page",
"body": {
"type": "dropdown-button",
"label": "下拉菜单",
"closeOnClick": true,
"closeOnOutside": true,
"buttons": [
{
"type": "button",
"label": "按钮1",
"disabled": true
},
{
"type": "button",
"label": "按钮2"
},
{
"type": "button",
"label": "按钮3"
}
]
}
}
```
chore: DropDownButton 支持 hover 触发 (#2774)
2021-10-28 17:31:16 +08:00
## 触发方式
> 1.4.0 及以上版本
默认是点击鼠标触发，可以通过 `"trigger": "hover"` 配置为鼠标移上去后触发
```schema
{
"type": "page",
"body": {
"type": "dropdown-button",
"label": "下拉菜单",
"trigger": "hover",
"buttons": [
{
"type": "button",
"label": "按钮1",
"disabled": true
},
{
"type": "button",
"label": "按钮2"
},
{
"type": "button",
"label": "按钮3"
}
]
}
}
```
feat: dropdown 增加右侧 icon 设置 (#2882)
2021-11-08 18:53:07 +08:00
## 设置图标
通过 `icon` 可以设置左侧图标
```schema
{
"type": "page",
"body": {
"type": "dropdown-button",
"label": "下拉菜单",
"trigger": "hover",
"icon": "fa fa-home",
"buttons": [
{
"type": "button",
"label": "按钮1",
"disabled": true
},
{
"type": "button",
"label": "按钮2"
},
{
"type": "button",
"label": "按钮3"
}
]
}
}
```
docs: 补充 dropdown 只显示 icon 的示例
2021-11-11 11:56:32 +08:00
## 只显示图标
可以设置 `level` 及 `hideCaret` 来只显示图标，并配合 `tooltip` 来显示提示文字
```schema
{
"type": "page",
"body": {
"type": "dropdown-button",
"level": "link",
"icon": "fa fa-ellipsis-h",
"hideCaret": true,
"tooltip": "提示",
"buttons": [
{
"type": "button",
"label": "按钮1",
"disabled": true
},
{
"type": "button",
"label": "按钮2"
},
{
"type": "button",
"label": "按钮3"
}
]
}
}
```
feat: dropdown 增加右侧 icon 设置 (#2882)
2021-11-08 18:53:07 +08:00
## 设置右侧图标
> 1.5.0 及以上版本
通过 `rightIcon` 设置右侧图标，同时通过 `hideCaret` 隐藏右侧下拉图标
```schema
{
"type": "page",
"body": {
"type": "dropdown-button",
"label": "下拉菜单",
"trigger": "hover",
"rightIcon": "fa fa-ellipsis-v",
"hideCaret": true,
"buttons": [
{
"type": "button",
"label": "按钮1",
"disabled": true
},
{
"type": "button",
"label": "按钮2"
},
{
"type": "button",
"label": "按钮3"
}
]
}
}
```
文档加上去了
2020-07-28 10:03:53 +08:00
## 属性表
feat: DropDownButton支持分组，菜单CSS类名，添加下拉菜单max-width (#3302)
2021-12-30 22:42:43 +08:00
| 属性名 | 类型 | 默认值 | 说明 |
| --------------- | ----------------------- | ----------------- | ----------------------------------------- |
| 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 | 隐藏下拉图标 |
补充文档
2022-07-13 19:02:46 +08:00
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`event.data.xxx`事件参数变量来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
| 事件名称 | 事件参数 | 说明 |
| ---------- | -------- | -------------- |
| mouseenter | - | 鼠标移入时触发 |
| mouseleave | - | 鼠标移出时触发 |
## 动作表
暂无
Reference in New Issue Copy Permalink