You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

4.6 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

title description spline isComponent
Radio 单选框 用于在预设的一组选项中执行单项选择,并呈现选择结果。 form true

引入

全局引入,在 miniprogram 根目录下的app.json中配置,局部引入,在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "t-radio": "tdesign-miniprogram/radio/radio",
  "t-radio-group": "tdesign-miniprogram/radio-group/radio-group"
}

代码演示

纵向单选框

{{ base }}

横向单选框

{{ horizontal }}

单选框状态

{{ status }}

勾选样式

{{ theme }}

勾选显示位置

{{ align }}

非通栏单选样式

{{ card }}

特殊样式

{{ special }}

API

Radio Props

名称 类型 默认值 说明 必传
placement String left 复选框和内容相对位置。可选项left/right N
allow-uncheck Boolean false 【开发中】是否允许取消选中 N
block Boolean true 是否为块级元素 N
checked Boolean false 是否选中 N
default-checked Boolean undefined 是否选中。非受控属性 N
content String / Slot - 单选内容 N
content-disabled Boolean false 是否禁用组件内容content触发选中 N
disabled Boolean undefined 是否为禁用态 N
external-classes Array - 组件类名,分别用于设置 组件外层、单选图标、主文案、内容 等元素类名。['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border'] N
icon String / Array / Slot 'circle' 自定义选中图标和非选中图标。使用 Array 时表示:[选中态图标,非选中态图标]。使用 String 时,值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标,值为 slot 时使用插槽。TS 类型:`'circle' 'line' 'dot'
label String / Slot - 主文案 N
max-content-row Number 5 内容最大行数限制 N
max-label-row Number 3 主文案最大行数限制 N
name String - HTML 元素原生属性 N
value String / Number / Boolean false 单选按钮的值。TS 类型:RadioValue `type RadioValue = string number

Radio Events

名称 参数 描述
change (checked: boolean) 值变化时触发

RadioGroup Props

名称 类型 默认值 说明 必传
placement String null 复选框和内容相对位置;仅在使用 options 时生效。可选项left/right N
borderless Boolean false 是否开启无边框模式 N
disabled Boolean undefined 是否禁用全部子单选框 N
icon String / Array 'fill-circle' 自定义选中图标和非选中图标。示例:[选中态图标,非选中态图标]。值为 fill-circle 表示图标为填充型图标,值为 stroke-line 表示图标为描边型图标;仅在使用 options 时生效。TS 类型:`'fill-circle' 'stroke-line'
keys Object - 用来定义 value / label 在 options 中对应的字段别名。TS 类型:KeysType N
name String - HTML 元素原生属性 N
options Array - 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时,表示 label 和 value 值相同。TS 类型:Array<RadioOption> type RadioOption = string | number | RadioOptionObj interface RadioOptionObj { label?: string; value?: string | number; disabled?: boolean }详细类型定义 N
value String / Number / Boolean false 选中的值。TS 类型:RadioValue N
default-value String / Number / Boolean undefined 选中的值。非受控属性。TS 类型:RadioValue N

RadioGroup Events

名称 参数 描述
change (value: RadioValue) 选中值发生变化时触发