Tantalum UI

Radio/RadioGroup 单选项 

import { TaRadio, TaCell, TaGroup, showToast } from '@/index'

const groups = [
  { value: 'man', label: '男' },
  { value: 'woman', label: '女' }
]

export default function ExpRadio() {
  function renderItems() {
    return groups.map(item => (
      <TaRadio key={item.value} checkedValue={item.value}>
        {item.label}
      </TaRadio>
    ))
  }

  function onChange(value: string | number) {
    console.log('change', value)
    showToast(`Change Value: ${value}`)
  }

  return (
    <>
      <TaGroup title="基础用法">
        <TaCell label="默认">
          <TaRadio />
        </TaCell>
        <TaCell label="带文案">
          <TaRadio>勾选</TaRadio>
        </TaCell>
        <TaCell label="默认激活">
          <TaRadio checked>勾选</TaRadio>
        </TaCell>
        <TaCell label="自定义颜色">
          <TaRadio checked activeColor="#8b1721">
            勾选
          </TaRadio>
        </TaCell>
        <TaCell label="禁用">
          <TaRadio disabled>勾选</TaRadio>
        </TaCell>
      </TaGroup>
      <TaGroup title="CheckboxGroup">
        <TaCell label="默认">
          <TaRadio.Group>{renderItems()}</TaRadio.Group>
        </TaCell>
        <TaCell label="内联">
          <TaRadio.Group inline value="woman" activeColor="#8b1721">
            {renderItems()}
          </TaRadio.Group>
        </TaCell>
        <TaCell label="禁用">
          <TaRadio.Group value="man" disabled>
            {renderItems()}
          </TaRadio.Group>
        </TaCell>
        <TaCell label="通过options设置">
          <TaRadio.Group options={groups} />
        </TaCell>
      </TaGroup>
      <TaGroup title="事件监听">
        <TaCell label="change">
          <TaRadio.Group onChange={onChange}>{renderItems()}</TaRadio.Group>
        </TaCell>
      </TaGroup>
    </>
  )
}

Import 

import { TaRadio, TaRadioGroup } from 'tantalum-ui-mobile-react'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

import type { RadioOptionItem } from 'tantalum-ui-mobile-react'

Radio

Radio Props

属性类型默认值必填说明
checkedbooleanfalse否当前是否选中，可用来设置默认选中
checkedValuestring | number''否该项值，RadioGroup 的 onChange 事件会携带 radio 的 value
disabledbooleanfalse否是否禁用
activeColorstring否自定义激活态的图标颜色

Radio Events

事件名称描述回调函数参数
onCheckedChange勾选发生改变时触发checked: boolean

Radio Slots 

<TaRadio>男</TaRadio>
<TaRadio>女</TaRadio>

RadioGroup

注：

  • 内部由多个 Radio 组成。
  • 支持表单，具体可参考 Form。

RadioGroup Props

属性类型默认值必填说明
valuestring | number''否当前选择子项的 value 值
namestring否标识
inlinebooleanfalse否是否使用内联布局，默认纵向布局
activeColorstring否自定义子项激活态的图标颜色
optionsRadioOptionItem[]否子项配置，优先级低于 slot 放入 Radio 组件

RadioOptionItem

key类型默认值必填说明
valuestring | number是值， 同 Radio 组件 value
labelstring是描述，同 Radio 组件 slot default

RadioGroup Events

事件描述回调函数参数
onChange选中项发生改变时触发value: string | number

RadioGroup Slots

children 

<TaRadio.Group>
  <TaRadio>男</TaRadio>
  <TaRadio>女</TaRadio>
</TaRadio.Group>