# t-radio-group

RadioGroup 单选框组

t-radio-group 组件介绍

单选框组组件，支持布局方向（横向或纵向），不同的显示模式（radio、button、cell），丰富主题配置。

t-radio-group 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-radio-group 基础用法

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card title="RadioGroup 多选框组"
				class="mb-15"
				sub-title="支持布局方向（横向或纵向）。不同的显示模式(radio、button、cell)丰富主题配置"></t-card>
		<t-card title="亮点"
				class="mb-15"
				type="error"
				sub-title="支持任意子组件参与布局,支持父组件统一设置子组件属性,让代码更简洁【父组件拥有子组件所有属性,子组件和父组件同时设置相同属性,子组件属性优先级高于父组件】"></t-card>
		<t-radio-group :class="`${radio_mode=='cell'?'fv':'fl'} r-10 fww p-10 mb-15 tvg`"
					   v-model="radio"
					   :size="radio_size"
					   :type="radio_type"
					   icon="radio-button-fill"
					   :mode="radio_mode"
					   @change="onchange"
					   child-class="mrb-15"
					   :transition="true">
			<t-radio value="1">苹果</t-radio>
			<t-radio value="2">香蕉</t-radio>
			<t-radio value="3">橙子</t-radio>
			<t-radio value="4">石榴</t-radio>
			<t-radio value="99"
					 :border="false">梨子</t-radio>
		</t-radio-group>
		<t-button class="mb-15"
				  @click="test">赋值{{radio_size}}</t-button>
		<t-group title="单选类型："
				 class="mb-15">
			<t-radio-group class="f fl fww r-10"
						   v-model="radio_mode"
						   type="primary">
				<t-radio value="radio">radio</t-radio>
				<t-radio value="button">button</t-radio>
				<t-radio value="cell">cell</t-radio>
			</t-radio-group>
		</t-group>
		<view :class="[`fl faic p-10 mb-15 tvg trm`]">
			<t-text class="mr-5">主题：</t-text>
			<t-radio-group :class="[`f fl fww r-10`]"
						   v-model="radio_type"
						   type="primary">
				<t-radio value="">默认</t-radio>
				<t-radio value="primary">主要</t-radio>
				<t-radio value="success">成功</t-radio>
				<t-radio value="info">信息</t-radio>
				<t-radio value="warning">警告</t-radio>
				<t-radio value="error">危险</t-radio>
			</t-radio-group>
		</view>
		<view :class="[`fl faic p-10 mb-15 tvg trm`]">
			<t-text class="mr-5">尺寸：</t-text>
			<t-radio-group :class="[`f fl fww r-10`]"
						   v-model="radio_size"
						   type="primary">
				<t-radio value="large">large</t-radio>
				<t-radio value="medium">medium</t-radio>
				<t-radio value="small">small</t-radio>
				<t-radio value="mini">mini</t-radio>
			</t-radio-group>
		</view>
	</view>
</template>

<script setup>
	const radio = ref<string>('1')
	const radio_type = ref<string>('success')
	const radio_mode = ref<string>('radio')
	const radio_size = ref<string>('medium')

	const type = ref<string>('success')
	function test() {
		radio.value = "3"
	}
	function themeupdate(e : string) {
		type.value = e == '0' ? '' : e
	}
	function onchange(e : string) {
		console.log(e)
	}
</script>

t-radio-group Props

属性名	类型	默认值	说明	可选值
size	String	"medium"	组件尺寸	large, medium, small, mini
type	String	""	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain
childClass	String	""	统一设置子元素样式	-
transition	Boolean	false	是否支持动画	true, false
duration	Number	200	动画时间	-
labelClass	String	""	显示文本样式	-
icon	String	"check-fill"	图标	-
iconBoxClass	String	""	图标容器样式	-
activeClass	String	""	选中时的组件的样式	-
inactiveClass	String	""	未选中时的组件的样式	-
iconClass	String	""	图标样式	-
activeIconClass	String	""	选中时图标的样式	-
inactiveIconClass	String	""	未选中时图标的样式	-
activeLabelClass	String	""	选中时文本的样式	-
inactiveLabelClass	String	""	未选中时文本的样式	-
mode	String	"radio"	显示模式	button, radio, cell
border	Boolean	true	是否显示边框	true, false
modelValue	String	""	双向绑定的值	-

t-radio-group Events

事件名	说明	回调参数
change	选中状态发生变化时触发	当前选中的值
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成触发	组件的节点信息
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象

Mode 说明

模式值	说明	显示效果
radio	单选框模式	显示圆形单选框
button	按钮样式	显示按钮样式
cell	列表模式	显示列表样式

t-radio-group Slots

插槽名	说明
default	内容插槽，用于放置t-radio子组件