Radio单选框

单选框。

何时使用#

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

代码演示

最简单的用法。

expand codeexpand code
      加载中
    

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

expand codeexpand code
      加载中
    

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

expand codeexpand code
      加载中
    

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

expand codeexpand code
      加载中
    

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

expand codeexpand code
      加载中
    



nz-radio 不可用。

expand codeexpand code
      加载中
    

垂直的 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()获取焦点