Button按钮

按钮用于开始一个即时操作。

何时使用#

标记了一个(或封装一组)操作命令,响应用户点击行为,触发相应的业务逻辑。

在 Ant Design 中,我们有四种按钮。

  • 主按钮:用于主行动点,一个操作区域只能有一个主按钮。
  • 默认按钮:用于没有主次之分的一组行动点。
  • 虚线按钮:常用于添加操作。
  • 文本按钮:用于最次级的行动点。
  • 链接按钮:用于次要或外链的行动点。

以及四种状态属性与上面配合使用。

  • 危险:删除/移动/修改权限等危险操作,一般需要二次确认。
  • 幽灵:用于背景色比较复杂的地方,常用在首页/产品页等展示场景。
  • 禁用:行动点不可用的时候,一般需要文案解释。
  • 加载中:用于异步操作等待反馈的时候,也可以避免多次提交。
import { NzButtonModule } from 'ng-zorro-antd/button';

代码演示

Link Button

按钮有五种类型:主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。

expand codeexpand code
      加载中
    


Link

按钮有大、中、小三种尺寸。

通过设置 nzSizelargesmall 分别把按钮设为大、小尺寸。若不设置 nzSize,则尺寸为中。

expand codeexpand code
      加载中
    


添加 nzLoading 属性即可让按钮处于加载状态,最后两个按钮演示点击后进入加载状态。

expand codeexpand code
      加载中
    

Basic

With Icon

可以将多个 nz-button 放入 nz-button-group 的容器中。

通过设置 nzSizelargesmall 分别把按钮组合设为大、小尺寸。若不设置 nzSize,则尺寸为中。

警告:<nz-button-group>v19 中被弃用,请使用 <nz-space-compact> 组件替代。

expand codeexpand code
      加载中
    
Link

nzBlock 属性将使按钮适合其父宽度。

expand codeexpand code
      加载中
    

当需要在 nz-button 内嵌入图标时,可以直接在 nz-button 内嵌入对应的 icon

expand codeexpand code
      加载中
    



TextText(disabled)
LinkLink(disabled)
Danger TextDanger Text(disabled)
Danger LinkDanger Link(disabled)

添加 disabled 属性即可让按钮处于不可用状态,同时按钮样式也会改变。

expand codeexpand code
      加载中
    

按钮组合使用时,推荐使用1个主操作 + n 个次操作,3个以上操作时把更多操作放到 nz-dropdown 中组合使用。

expand codeexpand code
      加载中
    
Link

添加 nzGhost 属性后,幽灵按钮将其他按钮的内容反色,背景变为透明,常用在有色背景上。

expand codeexpand code
      加载中
    
Link

使用 nzDanger 将按钮标识为危险状态。

expand codeexpand code
      加载中
    

API#

[nz-button]#

注意:nz-button 是一个 Directive,除以下表格之外还支持例如 disabled 等原生 button 的所有属性

通过设置 Button 的属性来产生不同的按钮样式,推荐顺序为:nzType -> nzShape -> nzSize -> nzLoading -> disabled

按钮的属性说明如下:

属性说明类型默认值支持全局配置
[disabled]禁止与 button 交互booleanfalse
[nzGhost]幽灵属性,使按钮背景透明booleanfalse
[nzLoading]设置按钮载入状态booleanfalse
[nzShape]设置按钮形状,可选值为 circleround 或者不设'circle'|'round'-
[nzSize]设置按钮大小,可选值为 smalllarge 或者不设'large'|'small'|'default''default'
[nzType]设置按钮类型,可选值为 primarydashedtextlink 或者不设'primary'|'dashed'|'link'|'text'-
[nzBlock]将按钮宽度调整为其父宽度的选项booleanfalse
[nzDanger]设置危险按钮booleanfalse

nz-button-group#

属性说明类型默认值支持全局配置
[nzSize]设置按钮大小,可选值为 smalllarge 或者不设'large'|'small'|'default''default'-