• Radio单选框
    • 何时使用
    • 单独引入此组件
    • 代码演示
    • API
      • [nz-radio] | [nz-radio-button]directive
      • nz-radio-groupcomponent
    • 方法
      • [nz-radio]directive

    Radio单选框

    单选框。

    何时使用

    • 用于在多个备选项中选中单个状态。
    • 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。

    单独引入此组件

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

    1. import { NzRadioModule } from 'ng-zorro-antd/radio';

    代码演示

    Radio单选框 - 图1

    基本

    最简单的用法。

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

    Radio单选框 - 图2

    单选组合

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

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

    Radio单选框 - 图3

    RadioGroup 组合 - 配置方式

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

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

    Radio单选框 - 图4

    单选组合 - 配合 name 使用

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

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

    Radio单选框 - 图5

    填底的按钮样式

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

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

    Radio单选框 - 图6

    不可用

    nz-radio 不可用。

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

    Radio单选框 - 图7

    RadioGroup 垂直

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

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

    Radio单选框 - 图8

    按钮样式

    按钮样式的单选组合。

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

    Radio单选框 - 图9

    大小

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

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

    API

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

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

    nz-radio-groupcomponent

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

    参数说明类型默认值
    [ngModel]指定选中的 nz-radio 的 value 值string-
    [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()获取焦点