Fz Design

Appearance

Radio 单选 ​

单选和单选组

基本用法 ​

和原生保持一致，通过 name 绑定同一组选项。可以设置 disabled 来禁用选项。

尺寸 ​

可以通过设置 size 属性，来设置不同的大小，可设置的值有：small、default、large。

按钮组 ​

需要使用 v-model 绑定一个值。

TIP

disabled 属性可以禁用指定选项，作用在 fz-radio-group 组件上可以全部禁用，作用在 fz-radio 上可以指定禁用某一项。

按钮组尺寸 ​

size 属性可以配置不同的尺寸。

背景色效果 ​

background 属性可以配置带有背景色的效果。

垂直排列 ​

vertical 属性可以垂直排列。

Radio API ​

API ​

Attributes ​

参数说明类型默认值
model-value绑定值RadioModelValuenull
size尺寸RadioSize-
name原生 namestring-
label选框对应的值RadioModelValue-
disabled是否禁用boolean-

Slots ​

名称说明
default展示的内容，默认为 label

Events ​

事件名称说明类型
change改变时触发(val: RadioModelValue) => void

Interface ​

组件导出以下类型定义：

ts
import type {
  RadioInstance,
  RadioProps,
  RadioSize,
  RadioModelValue
} from 'fighting-design'
import type {
  RadioInstance,
  RadioProps,
  RadioSize,
  RadioModelValue
} from 'fighting-design'

RadioGroup API ​

API ​

Attributes ​

参数说明类型默认值
model-value绑定值RadioModelValuenull
size尺寸RadioSize-
vertical是否纵向排列boolean-
background背景状态boolean-
disabled是否禁用boolean-
columnGap横向排列的间距string|number-
rowGap纵向排列的间距string|number-

Slots ​

名称说明
defaultRadio 组件

Events ​

事件名称说明类型
change改变时触发(val: RadioModelValue) => void

Interface ​

组件导出以下类型定义：

ts
import type { RadioGroupInstance, RadioGroupProps } from 'fighting-design'
import type { RadioGroupInstance, RadioGroupProps } from 'fighting-design'