Radio单选框

单选框。

何时使用

  • 用于在多个备选项中选中单个状态。
  • 和 Select 的区别是,Radio 所有选项默认可见,方便用户在比较中选择,因此选项不宜过多。
  1. import { NzRadioModule } from 'ng-zorro-antd/radio';

代码演示

Radio单选框 - 图1

基本

最简单的用法。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-radio-basic',
  4. template: `
  5. <label nz-radio ngModel>Radio</label>
  6. `
  7. })
  8. export class NzDemoRadioBasicComponent {}

Radio单选框 - 图2

单选组合

一组互斥的 nz-radio 配合使用。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-radio-radiogroup',
  4. template: `
  5. <nz-radio-group [(ngModel)]="radioValue">
  6. <label nz-radio nzValue="A">A</label>
  7. <label nz-radio nzValue="B">B</label>
  8. <label nz-radio nzValue="C">C</label>
  9. <label nz-radio nzValue="D">D</label>
  10. </nz-radio-group>
  11. `
  12. })
  13. export class NzDemoRadioRadiogroupComponent {
  14. radioValue = 'A';
  15. }

Radio单选框 - 图3

RadioGroup 组合 - 配置方式

通过配置 options 参数来渲染单选框。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-radio-radiogroup-options',
  4. template: `
  5. <nz-radio-group [(ngModel)]="radioValue">
  6. <label nz-radio [nzValue]="o.value" *ngFor="let o of options">{{ o.label }}</label>
  7. </nz-radio-group>
  8. <nz-radio-group [(ngModel)]="radioValue">
  9. <label nz-radio [nzValue]="o.value" *ngFor="let o of options">{{ o.label }}</label>
  10. </nz-radio-group>
  11. <nz-radio-group [(ngModel)]="radioValue">
  12. <label nz-radio [nzValue]="o.value" *ngFor="let o of options">{{ o.label }}</label>
  13. </nz-radio-group>
  14. `
  15. })
  16. export class NzDemoRadioRadiogroupOptionsComponent {
  17. radioValue = 'Apple';
  18. options = [
  19. { label: 'Apple', value: 'Apple' },
  20. { label: 'Pear', value: 'Pear' },
  21. { label: 'Orange', value: 'Orange' }
  22. ];
  23. }

Radio单选框 - 图4

单选组合 - 配合 name 使用

可以为 nz-radio-group 配置 nzName 参数,为组合内的 input 元素赋予相同的 name 属性,使浏览器把 nz-radio-group 下的 nz-radio 真正看作是一组(例如可以通过方向键始终在同一组内更改选项)。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-radio-radiogroup-with-name',
  4. template: `
  5. <nz-radio-group [(ngModel)]="radioValue" nzName="radiogroup">
  6. <label nz-radio nzValue="A">A</label>
  7. <label nz-radio nzValue="B">B</label>
  8. <label nz-radio nzValue="C">C</label>
  9. <label nz-radio nzValue="D">D</label>
  10. </nz-radio-group>
  11. `
  12. })
  13. export class NzDemoRadioRadiogroupWithNameComponent {
  14. radioValue = 'A';
  15. }

Radio单选框 - 图5

填底的按钮样式

实色填底的单选按钮样式。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-radio-solid',
  4. template: `
  5. <nz-radio-group [(ngModel)]="radioValue" nzButtonStyle="solid">
  6. <label nz-radio-button nzValue="A">Hangzhou</label>
  7. <label nz-radio-button nzValue="B">Shanghai</label>
  8. <label nz-radio-button nzValue="C">Beijing</label>
  9. <label nz-radio-button nzValue="D">Chengdu</label>
  10. </nz-radio-group>
  11. `
  12. })
  13. export class NzDemoRadioSolidComponent {
  14. radioValue = 'A';
  15. }

Radio单选框 - 图6

不可用

nz-radio 不可用。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-radio-disable',
  4. template: `
  5. <div>
  6. <label nz-radio [nzDisabled]="disabled">Disabled</label>
  7. <br />
  8. <label nz-radio [nzDisabled]="disabled" [ngModel]="true">Disabled</label>
  9. <br />
  10. <br />
  11. <button nz-button nzType="primary" (click)="disabled = !disabled">Toggle disabled</button>
  12. </div>
  13. `
  14. })
  15. export class NzDemoRadioDisableComponent {
  16. disabled = true;
  17. }

Radio单选框 - 图7

RadioGroup 垂直

垂直的 nz-radio-group,配合更多输入框选项。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-radio-radiogroup-more',
  4. template: `
  5. <nz-radio-group [(ngModel)]="radioValue">
  6. <label nz-radio [ngStyle]="style" nzValue="A">Option A</label>
  7. <label nz-radio [ngStyle]="style" nzValue="B">Option B</label>
  8. <label nz-radio [ngStyle]="style" nzValue="C">Option C</label>
  9. <label nz-radio [ngStyle]="style" nzValue="M">
  10. More...
  11. <input type="text" nz-input *ngIf="radioValue === 'M'" />
  12. </label>
  13. </nz-radio-group>
  14. `,
  15. styles: [
  16. `
  17. [nz-radio] {
  18. display: block;
  19. }
  20. input {
  21. width: 100px;
  22. margin-left: 10px;
  23. }
  24. `
  25. ]
  26. })
  27. export class NzDemoRadioRadiogroupMoreComponent {
  28. radioValue = 'A';
  29. style = {
  30. display: 'block',
  31. height: '30px',
  32. lineHeight: '30px'
  33. };
  34. }

Radio单选框 - 图8

按钮样式

按钮样式的单选组合。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-radio-radiobutton',
  4. template: `
  5. <nz-radio-group [(ngModel)]="radioValue">
  6. <label nz-radio-button nzValue="A">Hangzhou</label>
  7. <label nz-radio-button nzValue="B">Shanghai</label>
  8. <label nz-radio-button nzValue="C">Beijing</label>
  9. <label nz-radio-button nzValue="D">Chengdu</label>
  10. </nz-radio-group>
  11. <br />
  12. <br />
  13. <nz-radio-group [(ngModel)]="radioValue">
  14. <label nz-radio-button nzValue="A">Hangzhou</label>
  15. <label nz-radio-button nzValue="B" nzDisabled>Shanghai</label>
  16. <label nz-radio-button nzValue="C">Beijing</label>
  17. <label nz-radio-button nzValue="D">Chengdu</label>
  18. </nz-radio-group>
  19. <br />
  20. <br />
  21. <nz-radio-group [(ngModel)]="radioValue">
  22. <label nz-radio-button nzValue="A" nzDisabled>Hangzhou</label>
  23. <label nz-radio-button nzValue="B" nzDisabled>Shanghai</label>
  24. <label nz-radio-button nzValue="C" nzDisabled>Beijing</label>
  25. <label nz-radio-button nzValue="D" nzDisabled>Chengdu</label>
  26. </nz-radio-group>
  27. `
  28. })
  29. export class NzDemoRadioRadiobuttonComponent {
  30. radioValue = 'A';
  31. }

Radio单选框 - 图9

大小

大中小三种组合,可以和表单输入框进行对应配合。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-radio-size',
  4. template: `
  5. <nz-radio-group [(ngModel)]="radioValue" nzSize="large">
  6. <label nz-radio-button nzValue="A">Hangzhou</label>
  7. <label nz-radio-button nzValue="B">Shanghai</label>
  8. <label nz-radio-button nzValue="C">Beijing</label>
  9. <label nz-radio-button nzValue="D">Chengdu</label>
  10. </nz-radio-group>
  11. <br />
  12. <br />
  13. <nz-radio-group [(ngModel)]="radioValue">
  14. <label nz-radio-button nzValue="A">Hangzhou</label>
  15. <label nz-radio-button nzValue="B">Shanghai</label>
  16. <label nz-radio-button nzValue="C">Beijing</label>
  17. <label nz-radio-button nzValue="D">Chengdu</label>
  18. </nz-radio-group>
  19. <br />
  20. <br />
  21. <nz-radio-group [(ngModel)]="radioValue" nzSize="small">
  22. <label nz-radio-button nzValue="A">Hangzhou</label>
  23. <label nz-radio-button nzValue="B">Shanghai</label>
  24. <label nz-radio-button nzValue="C">Beijing</label>
  25. <label nz-radio-button nzValue="D">Chengdu</label>
  26. </nz-radio-group>
  27. `
  28. })
  29. export class NzDemoRadioSizeComponent {
  30. radioValue = 'A';
  31. }

API

[nz-radio] | [nz-radio-button]directive

参数说明类型默认值
[nzAutoFocus]自动获取焦点booleanfalse
[nzDisabled]设定 disable 状态booleanfalse
[ngModel]指定当前是否选中,可双向绑定booleanfalse
[nzValue]设置 value,与 nz-radio-group 配合使用any-
(ngModelChange)选中变化时回调EventEmitter<boolean>-

nz-radio-groupcomponent

单选框组合,用于包裹一组 nz-radio

参数说明类型默认值
[ngModel]指定选中的 nz-radio 的 value 值any-
[nzName]nz-radio-group 下所有 input[type=”radio”]name 属性string-
[nzDisabled]设定所有 nz-radio disable 状态booleanfalse
[nzSize]大小,只对按钮样式生效‘large’ | ‘small’ | ‘default’‘default’
(ngModelChange)选中变化时回调EventEmitter<boolean>-
[nzButtonStyle]RadioButton 的风格样式,目前有描边和填色两种风格‘outline’ | ‘solid’‘outline’

方法

[nz-radio]directive

可以通过 ViewChild 等其他方式获取 NzRadioComponent 使用以下方法

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