NG-ZORROButton按钮
使用 |
文档 |
何时使用#
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
在 Ant Design 中，我们有五种按钮。
- 🔵 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
- ⚪️ 默认按钮：用于没有主次之分的一组行动点。
- 🫥 虚线按钮：常用于添加操作。
- 🔤 文本按钮：用于最次级的行动点。
- 🔗 链接按钮：一般用于链接，即导航至某位置。
以及四种状态属性与上面配合使用。
- ⚠️ 危险：删除/移动/修改权限等危险操作，一般需要二次确认。
- 👻 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
- 🚫 禁用：行动点不可用的时候，一般需要文案解释。
- 🔃 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。
代码演示
按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
加载中
按钮有大、中、小三种尺寸。
通过设置 nzSize 为 largesmall 分别把按钮设为大、小尺寸。若不设置 nzSize，则尺寸为中。
加载中
添加 nzLoading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。
加载中
Basic
With Icon
可以将多个 nz-button 放入 nz-button-group 的容器中。
通过设置 nzSize 为 largesmall 分别把按钮组合设为大、小尺寸。若不设置 nzSize，则尺寸为中。
警告：<nz-button-group> 在 v19 中被弃用，请使用 <nz-space-compact> 组件替代。
加载中
nzBlock 属性将使按钮适合其父宽度。
加载中
当需要在 nz-button 内嵌入图标时，可以直接在 nz-button 内嵌入对应的 icon。
加载中
添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变。
加载中
按钮组合使用时，推荐使用1个主操作 + n 个次操作，3个以上操作时把更多操作放到 nz-dropdown 中组合使用。
加载中
添加 nzGhost 属性后，幽灵按钮将其他按钮的内容反色，背景变为透明，常用在有色背景上。
加载中
使用 nzDanger 将按钮标识为危险状态。
加载中
API#
[nz-button]#
注意：nz-button 是一个 Directive，除以下表格之外还支持例如 disabled 等原生 button 的所有属性。
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：nzType -> nzShape -> nzSize -> nzLoading -> disabled
按钮的属性说明如下：
| 属性 | 说明 | 类型 | 默认值 | 支持全局配置 |
|---|---|---|---|---|
[disabled] | 禁止与 button 交互 | boolean | false | |
[nzGhost] | 幽灵属性，使按钮背景透明 | boolean | false | |
[nzLoading] | 设置按钮载入状态 | boolean | false | |
[nzShape] | 设置按钮形状，可选值为 circleround 或者不设 | 'circle'|'round' | - | |
[nzSize] | 设置按钮大小，可选值为 smalllarge 或者不设 | 'large'|'small'|'default' | 'default' | ✅ |
[nzType] | 设置按钮类型，可选值为 primarydashedtextlink 或者不设 | 'primary'|'dashed'|'link'|'text' | - | |
[nzBlock] | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
[nzDanger] | 设置危险按钮 | boolean | false |
nz-button-group#
| 属性 | 说明 | 类型 | 默认值 | 支持全局配置 |
|---|---|---|---|---|
[nzSize] | 设置按钮大小，可选值为 smalllarge 或者不设 | 'large'|'small'|'default' | 'default' | - |