Radio单选框

单选框。

何时使用#

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

代码演示

基本

最简单的用法。

expand codeexpand code
      加载中
单选组合

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

expand codeexpand code
      加载中
RadioGroup 组合 - 配置方式

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

expand codeexpand code
      加载中
单选组合 - 配合 name 使用

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

expand codeexpand code
      加载中
填底的按钮样式

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

expand codeexpand code
      加载中



不可用

nz-radio 不可用。

expand codeexpand code
      加载中
RadioGroup 垂直

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

expand codeexpand code
      加载中




按钮样式

按钮样式的单选组合。

expand codeexpand code
      加载中




大小

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

expand codeexpand code
      加载中

API#

[nz-radio] | [nz-radio-button]#

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

nz-radio-group#

单选框组合，用于包裹一组 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]#

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

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