Radio单选框

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

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

最简单的用法。


@Component({
  selector: 'nz-demo-radio-basic',
  template: `
    <label nz-radio ngModel>Radio</label>
  `
})
export class NzDemoRadioBasicComponent {}

单选组合

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-radio-radiogroup',
  template: `
    <nz-radio-group [(ngModel)]="radioValue">
      <label nz-radio nzValue="A">A</label>
      <label nz-radio nzValue="B">B</label>
      <label nz-radio nzValue="C">C</label>
      <label nz-radio nzValue="D">D</label>
    </nz-radio-group>
  `
})
export class NzDemoRadioRadiogroupComponent {
  radioValue = 'A';
}

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

单选组合 - 配合 name 使用

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-radio-radiogroup-with-name',
  template: `
    <nz-radio-group [(ngModel)]="radioValue" nzName="radiogroup">
      <label nz-radio nzValue="A">A</label>
      <label nz-radio nzValue="B">B</label>
      <label nz-radio nzValue="C">C</label>
    </nz-radio-group>
  `
})
export class NzDemoRadioRadiogroupWithNameComponent {
  radioValue = 'A';
}

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-radio-solid',
  template: `
    <div>
      <nz-radio-group [(ngModel)]="radioValue" [nzButtonStyle]="'solid'">
        <label nz-radio-button nzValue="A">Hangzhou</label>
        <label nz-radio-button nzValue="C">Beijing</label>
        <label nz-radio-button nzValue="D">Chengdu</label>
      </nz-radio-group>
    </div>
  `
})
export class NzDemoRadioSolidComponent {
  radioValue = 'A';
}

不可用

nz-radio 不可用。

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-radio-radiogroup-more',
  template: `
    <nz-radio-group [(ngModel)]="radioValue">
      <label nz-radio [ngStyle]="style" nzValue="A">Option A</label>
      <label nz-radio [ngStyle]="style" nzValue="B">Option B</label>
      <label nz-radio [ngStyle]="style" nzValue="C">Option C</label>
      <label nz-radio [ngStyle]="style" nzValue="M">
        More...
        <input type="text" nz-input *ngIf="radioValue == 'M'" style="width: 100px; margin-left: 10px;" />
      </label>
    </nz-radio-group>
  `,
  styles: [
    `
      [nz-radio] {
        display: block;
      }
  ]
})
export class NzDemoRadioRadiogroupMoreComponent {
  radioValue = 'A';
  style = {
    display: 'block',
    height: '30px',
    lineHeight: '30px'
  };
}

按钮样式

按钮样式的单选组合。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-radio-radiobutton',
  template: `
    <div>
      <nz-radio-group [(ngModel)]="radioValue">
        <label nz-radio-button nzValue="A">Hangzhou</label>
        <label nz-radio-button nzValue="B">Shanghai</label>
        <label nz-radio-button nzValue="C">Beijing</label>
        <label nz-radio-button nzValue="D">Chengdu</label>
      </nz-radio-group>
    </div>
      <nz-radio-group [(ngModel)]="radioValue">
        <label nz-radio-button nzValue="A">Hangzhou</label>
        <label nz-radio-button nzValue="B" nzDisabled>Shanghai</label>
        <label nz-radio-button nzValue="C">Beijing</label>
        <label nz-radio-button nzValue="D">Chengdu</label>
      </nz-radio-group>
    </div>
    <div style="margin-top:16px;">
      <nz-radio-group [(ngModel)]="radioValue">
        <label nz-radio-button nzValue="A" nzDisabled>Hangzhou</label>
        <label nz-radio-button nzValue="B" nzDisabled>Shanghai</label>
        <label nz-radio-button nzValue="C" nzDisabled>Beijing</label>
        <label nz-radio-button nzValue="D" nzDisabled>Chengdu</label>
      </nz-radio-group>
    </div>
  `
})
export class NzDemoRadioRadiobuttonComponent {
  radioValue = 'A';
}

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

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