📝 optimize button usage

This commit is contained in:
afc163 2020-01-03 15:30:05 +08:00
parent 7e1dc348a9
commit b15136f41f
2 changed files with 8 additions and 4 deletions

View File

@ -10,17 +10,19 @@ To trigger an operation.
A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic. A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.
In Ant Design we provide 4 types of button and 4 other properties additionally. In Ant Design we provide 4 types of button.
- Primary button: indicate the main action, one primary button at most in one section. - Primary button: indicate the main action, one primary button at most in one section.
- Default button: indicate a series of actions without priority. - Default button: indicate a series of actions without priority.
- Dashed button: used for adding action commonly. - Dashed button: used for adding action commonly.
- Link button: used for external links. - Link button: used for external links.
And 4 other properties additionally.
- `danger`: used for actions of risk, like deletion or authorization. - `danger`: used for actions of risk, like deletion or authorization.
- `ghost`: used in situations with complex background, home pages usually. - `ghost`: used in situations with complex background, home pages usually.
- `disabled`when actions is not available. - `disabled`: when actions is not available.
- `loading`: add loading spinner in button. - `loading`: add loading spinner in button, avoiding multiple submits too.
## API ## API

View File

@ -11,13 +11,15 @@ subtitle: 按钮
标记了一个(或封装一组)操作命令,响应用户点击行为,触发相应的业务逻辑。 标记了一个(或封装一组)操作命令,响应用户点击行为,触发相应的业务逻辑。
在 Ant Design 中,我们有四种按钮类似和四种属性配合使用 在 Ant Design 中,我们有四种按钮。
- 主按钮:用于主行动点,一个操作区域只能有一个主按钮。 - 主按钮:用于主行动点,一个操作区域只能有一个主按钮。
- 默认按钮:用于没有主次之分的一组行动点。 - 默认按钮:用于没有主次之分的一组行动点。
- 虚线按钮:常用于添加操作。 - 虚线按钮:常用于添加操作。
- 链接按钮:用于次要或外链的行动点。 - 链接按钮:用于次要或外链的行动点。
以及四种状态属性与上面配合使用。
- 危险:删除/移动/修改权限等危险操作,一般需要二次确认。 - 危险:删除/移动/修改权限等危险操作,一般需要二次确认。
- 幽灵:用于背景色比较复杂的地方,常用在首页/产品页等展示场景。 - 幽灵:用于背景色比较复杂的地方,常用在首页/产品页等展示场景。
- 禁用:行动点不可用的时候,一般需要文案解释。 - 禁用:行动点不可用的时候,一般需要文案解释。