Tantalum UI

Tab 标签列表 

import { TaTab, TaGroup, TabOnChange, showToast } from '@/index'
import { shortTabList, tabList, mixTabList, subTabList } from './data'

export default function ExpTab() {
  const onChange: TabOnChange = (value, index) => {
    console.log('change', value, index)
    showToast(`切换到第${index + 1}个`)
  }

  return (
    <>
      <TaGroup title="基础用法">
        <div className="exp-tab-box">
          <TaTab options={shortTabList} />
        </div>
      </TaGroup>
      <TaGroup title="滚动（阈值 scrollThreshold = 4）">
        <div className="exp-tab-box">
          <TaTab options={tabList} />
        </div>
      </TaGroup>
      <TaGroup title="Mix">
        <div className="exp-tab-box">
          <TaTab options={mixTabList} value={2} />
        </div>
      </TaGroup>
      <TaGroup title="带副标签">
        <div className="exp-tab-box">
          <TaTab options={subTabList} />
        </div>
      </TaGroup>
      <TaGroup title="change 事件">
        <div className="exp-tab-box">
          <TaTab options={shortTabList} onChange={onChange} />
        </div>
      </TaGroup>
    </>
  )
}

Import 

import { TaTab } from 'tantalum-ui-mobile-react'

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

Import Type

组件导出的类型定义：

import type {
  TabOnChange,
  TabOptions,
  TabOption,
  BadgeOption,
  TabRef
} from 'tantalum-ui-mobile-react'

Props

属性类型默认值必填说明
valuestring | number否当前激活项的 value 值
optionsTabOptions[]是tab 数据集
scrollThresholdnumber4否超过 scrollThreshold 个 Tab 使用滚动形式
colorstring否自定义默认态字体和图标颜色
activeColorstring否自定义激活态的字体和图标颜色

TabOptions 

type TabOption = {
  label: string
  value: number | string
  icon?: IconData
  activeIcon?: IconData
  badge?: BadgeOption
  subLabel?: string
}

type TabOptions = (number | string | TabOption)[]
key类型默认值必填说明
valuestring | number是唯一值
labelstring是标签名
iconstring | Component否设置图标，使用 Icon 组件
activeIconstring | Component否设置激活态图标，没有设置则沿用 icon 属性
badgeBadgeOption否徽标，使用 Badge 组件
subLabelstring否副标签名，如果设置了该字段，则显示带有副标签的列表
const options = [
  {
    value: 1,
    label: '首页',
    icon: 'HomeOutlined',
    badge: '热'
  },
  {
    value: 2,
    label: '搜索',
    icon: 'SearchOutlined',
    badge: {
      dot: true,
      content: 1
    }
  }
]

也可以直接设置为 string[] 或 number[]，如：

const options = ['aaa', 'bbb', 'ccc']

将被转为：

const options = [
  {
    value: 'aaa',
    label: 'aaa'
  },
  {
    value: 'bbb',
    label: 'bbb'
  }
  {
    value: 'ccc',
    label: 'ccc'
  }
]

注：注意数组项要保持唯一性。

BadgeOption 

type BadgeOption =
  | number
  | string
  | Partial<{
      color: string
      content: string | number
      offset: number[]
      animated: boolean
      dot: boolean
      maxCount: number
      showZero: boolean
    }>

参数主要是基于 Badge 组件的 props，如果传入是 number 或者 string 则设置直接设置 content 属性。

Events

事件描述回调函数参数TypeScript 函数
onChange点击切换 tab 时触发( value：string | number, index: number )TabOnChange

onChange 的回调参数

参数类型描述
valuestring | number当前激活项的 value 值
indexnumber当前激活项的索引值

Methods 

interface TabRef {
  switchTo: (value: string | number) => void
  switchToIndex: (index: number) => void
}
方法名说明
switchTo切换到指定 value 的 Tab
switchToIndex切换到指定索引的 Tab