Radio 单选框

介绍

在一组选项中进行单选，通常与 TnRadioGroup 配合使用。支持自定义颜色、边框样式及禁用状态。

引入

import { TnRadio, TnRadioGroup } from "@tuniao/tn-ui";

代码演示

基础用法

通过 TnRadioGroup 包裹 TnRadio，使用 modelValue 绑定当前选中值。每个 TnRadio 通过 label 属性指定对应值。

点我查看代码

@Local radioValue: string = "选项2";

TnRadioGroup({
  group: "fruit",
  modelValue: this.radioValue,
  onChange: (value: TnRadioValueType) => {
    this.radioValue = value as string;
  },
}) {
  TnRadio({ group: "fruit", label: "选项1" }) {
    Text("选项1")
  }
  TnRadio({ group: "fruit", label: "选项2" }) {
    Text("选项2")
  }
  TnRadio({ group: "fruit", label: "选项3" }) {
    Text("选项3")
  }
}

自定义颜色

通过 activeColor 属性自定义选中时的颜色，可在 TnRadioGroup 上统一设置，也可在单个 TnRadio 上单独设置。

点我查看代码

@Local radioValue: string = "apple";

// 在 Group 上统一设置
TnRadioGroup({
  group: "fruit",
  modelValue: this.radioValue,
  activeColor: "success",
  onChange: (value: TnRadioValueType) => {
    this.radioValue = value as string;
  },
}) {
  TnRadio({ group: "fruit", label: "apple" }) {
    Text("苹果")
  }
  TnRadio({ group: "fruit", label: "banana" }) {
    Text("香蕉")
  }
  // 在单个 Radio 上单独设置
  TnRadio({ group: "fruit", label: "orange", activeColor: "danger" }) {
    Text("橘子")
  }
}

边框样式

通过 showBorder 属性开启边框样式，选中时边框高亮显示。

点我查看代码

@Local radioValue: string = "2";

TnRadioGroup({
  group: "fruit",
  modelValue: this.radioValue,
  wrap: true,
  onChange: (value: TnRadioValueType) => {
    this.radioValue = value as string;
  },
}) {
  TnRadio({ group: "fruit", label: "1", showBorder: true }) {
    Text("边框选项1");
  };
  TnRadio({ group: "fruit", label: "2", showBorder: true }) {
    Text("边框选项2");
  };
  TnRadio({ group: "fruit", label: "3", showBorder: true }) {
    Text("边框选项3");
  };
}

禁用状态

通过 disabled 属性禁用单选框。可在 TnRadioGroup 上统一设置，也可在单个 TnRadio 上单独设置。通过 labelDisabled 可以单独禁用文字的点击切换功能。

点我查看代码

@Local radioValue: string = "apple";

// 全部禁用
TnRadioGroup({
  group: "fruit1",
  modelValue: this.radioValue,
  disabled: true,
}) {
  TnRadio({ group: "fruit1", label: "apple" }) {
    Text("苹果")
  }
  TnRadio({ group: "fruit1", label: "banana" }) {
    Text("香蕉")
  }
}

// 单个禁用
TnRadioGroup({
  group: "fruit2",
  modelValue: this.radioValue,
  onChange: (value: TnRadioValueType) => {
    this.radioValue = value as string;
  },
}) {
  TnRadio({ group: "fruit2", label: "apple" }) {
    Text("苹果")
  }
  TnRadio({ group: "fruit2", label: "banana", disabled: true }) {
    Text("香蕉（禁用）")
  }
}

API

TnRadioGroup Props

参数	说明	类型	默认值
group	单选框组标识	string	-
modelValue	当前选中值	TnRadioValueType	-
disabled	是否禁用整组	boolean	false
wrap	是否水平排列并换行	boolean	false
activeColor	选中时的颜色	string	-
groupSize	单选框组统一大小	number	-

TnRadio Props

参数	说明	类型	默认值
group	所属单选框组标识	string	-
label	单选框对应的值	TnRadioValueType	-
disabled	是否禁用	boolean	false
labelDisabled	是否禁用文字点击切换	boolean	false
activeColor	选中时的颜色	string	-
radioSize	单选框大小	number	-
showBorder	是否显示边框	boolean	false

TnRadioGroup Events

事件名	说明	回调参数
onChange	选中值变化时触发	(value: TnRadioValueType) => void

TnRadio Slots

名称	说明
defaultBuilder	自定义单选框标签内容，通过尾随闭包传入

TnRadio Events

事件名	说明	回调参数
onChange	选中状态变化时触发	(value: TnRadioValueType) => void

类型定义

type TnRadioValueType = string | number;