2015-05-21 22:24:19 +08:00
|
|
|
# Button
|
2015-05-12 17:50:03 +08:00
|
|
|
|
2015-07-29 16:29:18 +08:00
|
|
|
- category: Components
|
2015-05-21 22:24:19 +08:00
|
|
|
- chinese: 按钮
|
2015-07-29 16:29:18 +08:00
|
|
|
- order: 0
|
2015-05-12 17:50:03 +08:00
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
2015-06-17 18:22:20 +08:00
|
|
|
按钮用于开始一个即时操作。
|
2015-06-14 17:54:08 +08:00
|
|
|
|
2015-05-27 15:43:29 +08:00
|
|
|
## 何时使用
|
2015-05-15 18:03:27 +08:00
|
|
|
|
2015-06-17 17:43:04 +08:00
|
|
|
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
|
2015-06-14 17:54:08 +08:00
|
|
|
|
2015-06-05 20:26:41 +08:00
|
|
|
|
2015-06-07 14:03:00 +08:00
|
|
|
## 如何使用
|
2015-06-05 20:26:41 +08:00
|
|
|
|
2015-06-07 14:03:00 +08:00
|
|
|
- 按钮的基础样式为 `ant-btn`。
|
2015-06-05 20:26:41 +08:00
|
|
|
|
2015-06-07 14:03:00 +08:00
|
|
|
在这里我们统一使用 **ant** 作为类名空间，当然你也可以自定义(通过覆盖 `@css-prefix` 变量即可)。
|
2015-06-05 20:26:41 +08:00
|
|
|
|
2015-06-07 14:03:00 +08:00
|
|
|
- 通过类组装的形式来产生不同的按钮样式，推荐遵循如下顺序：
|
|
|
|
|
```
|
|
|
|
|
.ant-btn
|
|
|
|
|
↓
|
2015-06-14 17:54:08 +08:00
|
|
|
.ant-btn-primary | .ant-btn-ghost
|
2015-06-07 14:03:00 +08:00
|
|
|
↓
|
2015-06-14 17:54:08 +08:00
|
|
|
.ant-btn-circle | .ant-btn-circle-outline
|
2015-06-07 14:03:00 +08:00
|
|
|
↓
|
|
|
|
|
.ant-btn-lg | .ant-btn-sm
|
|
|
|
|
```
|
2015-05-15 18:03:27 +08:00
|
|
|
|
2015-06-07 14:03:00 +08:00
|
|
|
- 按钮的样式参数说明如下：
|
2015-05-15 18:03:27 +08:00
|
|
|
|
2015-06-07 14:03:00 +08:00
|
|
|
| 类名 | 说明 |
|
|
|
|
|
| ------------- | ------------- |
|
2015-06-17 18:22:20 +08:00
|
|
|
| `.ant-btn` | 按钮基础样式。 |
|
2015-06-11 17:16:32 +08:00
|
|
|
| `.ant-btn-primary` `.ant-btn-ghost` | 使用这些列出的类可以快速创建一个带有预定义样式的按钮。 |
|
2015-06-17 18:22:20 +08:00
|
|
|
| `.ant-btn-circle` `.ant-btn-circle-outline` | 用于创建圆形按钮，`.ant-btn-circle-outline` 为描边按钮。 |
|
|
|
|
|
| `.ant-btn-lg` `.ant-btn-sm` | 定义按钮大小尺寸，目前提供三种尺寸：大中小，默认为中。 |
|
|
|
|
|
| `.ant-btn-group` | 按钮组合，通过按钮组容器把一组按钮放在同一行里。 |
|
