2020-07-28 10:03:53 +08:00
|
|
|
---
|
|
|
|
|
title: Button 按钮
|
2021-01-07 23:35:03 +08:00
|
|
|
description:
|
2020-07-28 10:03:53 +08:00
|
|
|
type: 0
|
|
|
|
|
group: ⚙ 组件
|
|
|
|
|
menuName: Button 按钮
|
2021-01-07 23:35:03 +08:00
|
|
|
icon:
|
2020-07-28 10:03:53 +08:00
|
|
|
order: 29
|
|
|
|
|
---
|
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: scope="body"
|
2020-07-28 10:03:53 +08:00
|
|
|
{
|
|
|
|
|
"label": "弹个框",
|
|
|
|
|
"type": "button",
|
|
|
|
|
"actionType": "dialog",
|
|
|
|
|
"dialog": {
|
|
|
|
|
"title": "弹框",
|
|
|
|
|
"body": "这是个简单的弹框。"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2021-10-29 17:38:57 +08:00
|
|
|
<!-- `button` 实际上是 `action` 的别名，更多用法见[action](./action) -->
|
|
|
|
|
|
|
|
|
|
## 属性表
|
|
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ---------------- | ------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------- |
|
|
|
|
|
| className | `string` | | 指定添加 button 类名 |
|
|
|
|
|
| href | `string` | | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 |
|
|
|
|
|
| size | `'xs' \| 'sm' \| 'md' \| 'lg' ` | | 设置按钮大小 |
|
|
|
|
|
| actionType | `'button' \| 'reset' \| 'submit'\| 'clear'\| 'url'` | button | 设置按钮类型 |
|
|
|
|
|
| level | `'link' \| 'primary' \| 'enhance' \| 'secondary' \| 'info'\|'success' \| 'warning' \| 'danger' \| 'light'\| 'dark' \| 'default'` | default | 设置按钮样式 |
|
|
|
|
|
| tooltip | `'string' \| 'TooltipObject'` | | 气泡提示内容 |
|
|
|
|
|
| tooltipPlacement | `'top' \| 'right' \| 'bottom' \| 'left' ` | top | 气泡框位置器 |
|
|
|
|
|
| tooltipTrigger | `'hover' \| 'focus'` | | 触发 tootip |
|
|
|
|
|
| disabled | `'boolean'` | false | 按钮失效状态 |
|
|
|
|
|
| block | `'boolean'` | false | 将按钮宽度调整为其父宽度的选项 |
|
|
|
|
|
| loading | `'boolean'` | false | 显示按钮 loading 效果 |
|
|
|
|
|
| loadingOn | `'string'` | | 显示按钮 loading 表达式 |
|
|
|
|
|
|
|
|
|
|
更多使用说明，请参看 [Grid Props](https://react-bootstrap.github.io/layout/grid/#col-props)
|
