Tantalum UI

Checkbox/CheckboxGroup 多选项 

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

const groups = ['A', 'B', 'C']

export default function ExpCheckbox() {
  function renderItems() {
    return groups.map(item => (
      <TaCheckbox key={item} checkedValue={item}>
        {item}
      </TaCheckbox>
    ))
  }

  function renderCellItems() {
    return groups.map(item => (
      <TaCell
        key={item}
        label={'单元格 ' + item}
        renderIcon={() => <TaCheckbox circle checkedValue={item} />}
      />
    ))
  }

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

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

Import 

import { TaCheckbox, TaCheckboxGroup } from 'tantalum-ui-mobile-react'

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

Import Type

组件导出的类型定义：

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

Checkbox

Checkbox Props

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

Checkbox Events

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

Checkbox Slots 

<TaCheckbox>开朗</TaCheckbox>
<TaCheckbox>活泼</TaCheckbox>

CheckboxGroup

注：

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

CheckboxGroup Props

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

CheckboxOptionItem

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

CheckboxGroup Events

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

CheckboxGroup Slots

children 

<TaCheckbox.Group>
  <TaCheckbox>开朗</TaCheckbox>
  <TaCheckbox>活泼</TaCheckbox>
</TaCheckbox.Group>