Switch开关

开关选择器。

何时使用#

  • 需要表示开关状态/两种状态之间的切换时;
  • checkbox的区别是,切换 switch 会直接触发状态改变,而 checkbox 一般用于状态标记,需要和提交操作配合。
import { NzSwitchModule } from 'ng-zorro-antd/switch';

代码演示

最简单的用法。

expand codeexpand code
加载中




带有文字和图标。

expand codeexpand code
加载中


标识开关操作仍在执行中。

expand codeexpand code
加载中


Switch 失效状态。

expand codeexpand code
加载中


nzSize="small" 表示小号开关。

expand codeexpand code
加载中

Switch 的状态完全由用户接管,不再自动根据点击事件改变数据。

expand codeexpand code
加载中

API#

nz-switch#

参数说明类型默认值全局配置
[nzId]组件内部 button 的 id 值string-
[ngModel]指定当前是否选中,可双向绑定booleanfalse
[nzCheckedChildren]选中时的内容string | TemplateRef<void>-
[nzUnCheckedChildren]非选中时的内容string | TemplateRef<void>-
[nzDisabled]disable 状态booleanfalse
[nzSize]开关大小,可选值:defaultsmall'small' | 'default''default'
[nzLoading]加载中的开关booleanfalse
[nzControl]是否完全由用户控制状态booleanfalse
(ngModelChange)当前是否选中的回调EventEmitter<boolean>false

方法#

名称描述
focus()获取焦点
blur()移除焦点