Switch开关

开关选择器。

何时使用

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

代码演示

Switch开关 - 图1

基本

最简单的用法。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-switch-basic',
  4. template: `
  5. <nz-switch [(ngModel)]="switchValue"></nz-switch>
  6. `
  7. })
  8. export class NzDemoSwitchBasicComponent {
  9. switchValue = false;
  10. }

Switch开关 - 图2

文字和图标

带有文字和图标。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-switch-text',
  4. template: `
  5. <nz-switch [ngModel]="true" nzCheckedChildren="开" nzUnCheckedChildren="关"></nz-switch>
  6. <br />
  7. <nz-switch [ngModel]="false" nzCheckedChildren="1" nzUnCheckedChildren="0"></nz-switch>
  8. <br />
  9. <nz-switch
  10. [ngModel]="true"
  11. [nzCheckedChildren]="checkedTemplate"
  12. [nzUnCheckedChildren]="unCheckedTemplate"
  13. ></nz-switch>
  14. <ng-template #checkedTemplate><i nz-icon type="check"></i></ng-template>
  15. <ng-template #unCheckedTemplate><i nz-icon type="close"></i></ng-template>
  16. `,
  17. styles: [
  18. `
  19. nz-switch {
  20. margin-bottom: 8px;
  21. }
  22. `
  23. ]
  24. })
  25. export class NzDemoSwitchTextComponent {}

Switch开关 - 图3

加载中

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-switch-loading',
  4. template: `
  5. <nz-switch [ngModel]="true" nzLoading></nz-switch>
  6. <br />
  7. <nz-switch nzSize="small" [ngModel]="false" nzLoading></nz-switch>
  8. `,
  9. styles: [
  10. `
  11. nz-switch {
  12. margin-bottom: 8px;
  13. }
  14. `
  15. ]
  16. })
  17. export class NzDemoSwitchLoadingComponent {}

Switch开关 - 图4

不可用

Switch 失效状态。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-switch-disabled',
  4. template: `
  5. <nz-switch [(ngModel)]="switchValue" [nzDisabled]="isDisabled"></nz-switch>
  6. <br />
  7. <button nz-button [nzType]="'primary'" (click)="isDisabled = !isDisabled">Toggle disabled</button>
  8. `,
  9. styles: [
  10. `
  11. nz-switch {
  12. margin-bottom: 8px;
  13. }
  14. `
  15. ]
  16. })
  17. export class NzDemoSwitchDisabledComponent {
  18. switchValue = false;
  19. isDisabled = true;
  20. }

Switch开关 - 图5

两种大小

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-switch-size',
  4. template: `
  5. <nz-switch [ngModel]="true"></nz-switch>
  6. <br />
  7. <nz-switch nzSize="small" [ngModel]="true"></nz-switch>
  8. `,
  9. styles: [
  10. `
  11. nz-switch {
  12. margin-bottom: 8px;
  13. }
  14. `
  15. ]
  16. })
  17. export class NzDemoSwitchSizeComponent {}

Switch开关 - 图6

完整控制

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-switch-control',
  4. template: `
  5. <nz-switch [(ngModel)]="switchValue" [nzControl]="true" (click)="clickSwitch()" [nzLoading]="loading"></nz-switch>
  6. `
  7. })
  8. export class NzDemoSwitchControlComponent {
  9. switchValue = false;
  10. loading = false;
  11. clickSwitch(): void {
  12. if (!this.loading) {
  13. this.loading = true;
  14. setTimeout(() => {
  15. this.switchValue = !this.switchValue;
  16. this.loading = false;
  17. }, 3000);
  18. }
  19. }
  20. }

API

单独引入此组件

想要了解更多关于单独引入组件的内容,可以在快速上手页面进行查看。

  1. import { NzSwitchModule } from 'ng-zorro-antd';

nz-switchcomponent

参数说明类型默认值
[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()移除焦点