标签页 Tabs
选项卡切换组件，用于在不同的内容区域之间进行切换
安装使用
import { TiTabs } from '@titian-design/mobile-react'
使用
API安装使用
import { TiTabs } from 'titian-h5-react'
基本用法
单独使用
TiTabs API
属性 Properties
| 名称 | 类型 | 必填 | 默认值 | 说明 | 备注 |
|---|---|---|---|---|---|
| variant | string | 否 | pure | 标签页的风格，可选值：block pure calendar multi | - |
| tabs | array | Array<Option> | 是 | - | 数据项, ['首页', '我的'] 或者 [{label: '首页'}，{label: '我的'}] | - |
| activeTab | number | string | 否 | 0 | 选中项索引，或者 tab-key 对应的值 | - |
| disabledTabs | array | 否 | - | 禁用的数据项 | - |
| duration | number | 否 | 500 | 滑动动画时长 | - |
| divider | string | 否 | - | 分割线类型，可选值：line shadow default | - |
| sticky | boolean | 否 | false | 是否有吸顶效果 | - |
| offsetTop | number | 否 | 0 | 吸顶距离 | - |
| usePureCss | boolean | 否 | false | 使用css的position: sticky实现 | - |
| count | number | 否 | 5 | 单屏展示的菜单数量 | - |
| tabWidth | number | 否 | - | 每个菜单的宽度，单位 px，设置此项后 count 则无效 | - |
| gap | number | 否 | -1 | tab(文字)间距，单位 px，设置此项后 tab-width 和 count 无效 | - |
| autoGap | boolean | 否 | true | 当 tab 总宽度不够一屏，采用平铺模式 | - |
| useSlot | boolean | 否 | false | 是否启用插槽，即内置 swiper 组件 | - |
| extStyle | string | Record<string, string> | 否 | - | 根节点样式 | - |
| tabKey | string | 否 | label | tabs 如果是对象数组，对应每项的关键词 key | - |
| alias | Record<string, string> | 否 | - | 数据项默认字段名label description tag date的别名，用于自定义数据，可替代tabKey属性 | - |
| scrollWithAnimation | boolean | 否 | true | tab切换，是否使用过度动画 | - |
| asyncChange | boolean | 否 | false | 是否采用受控模式，异步设置active-tab | - |
Option
API 中的 tabs 可以为一个对象数组，数组中的每一个对象有以下 key：
| 名称 | 类型 | 必填 | 默认值 | 说明 | 备注 |
|---|---|---|---|---|---|
| label | string | 否 | - | 标题 | - |
| description | string | 否 | - | variant设置calendar或者multi可用，标题下描述文字 | - |
| tag | string | 否 | - | variant设置multi可用，最下方标签，如设置日期标签国庆节等 | - |
| date | string | 否 | - | variant设置multi可用，设置日期如：2022-12-01，如果是当前日期，下标tag将会写成当前 | - |
事件 Events
| 名称 | 参数列表 | 描述 | 备注 |
|---|---|---|---|
| onChange | (e: CustomEvent<{index: number, item: Record<string, string>}>) => void | 当前激活的标签 | - |
| onFixed | (e: CustomEvent<{isFixed: boolean}>) => void | 使用吸顶功能是，吸顶状态改变是触发 | - |
| onTiClick | (e: CustomEvent<{index: number, item: Record<string, string>}>) => void | 点击tab项时触发 | - |
| onDisabled | (e: CustomEvent<{index: number, item: Record<string, string>}>) => void | 点击禁用的tab项时触发 | - |
插槽 Slots
| 名称 | 说明 | 备注 |
|---|---|---|
| tab-content-${index} | 每个标签页展示项，index为tabs的索引，如果使用插槽请用可扩展样式类名swiper-class设置容器高度。 | - |
外部样式类 External Classes
| 名称 | 说明 | 备注 |
|---|---|---|
| tabClass | tab容器样式名 | - |
| tabActiveClass | 激活项tab容器样式名 | - |
| tabTextClass | tab 文字样式名 | 可设置缺省或者截断 |
| tabTextActiveClass | 激活项tab文字样式名 | |
| swiperClass | swiper 容器样式名 | - |
| tabsClass | tabs 样式名 | - |
| tabsMarkClass | 当前项底部标志类名 | 如果修改下划线的宽度，在自定义样式类里加--tabs-mark-width: 10px |
| extClass | 根节点样式类名 | - |
CSS 变量 CSS Variable
| 变量 | 默认值 | 说明 | 备注 |
|---|---|---|---|
--tabs-background-color | theme.color.gray.background.default | tabs背景颜色 | - |
--tabs-swiper-background-color | #fff | tabs下方swiper内容部分背景颜色 | - |
--tabs-tab-height | 88px | tabs高度 | - |
--tabs-swiper-height | 150px | tabs下方swiper内容部分高度 | - |
--tabs-tab-color | theme.color.gray.texticon.550 | tabs文字颜色 | - |
--tabs-tab-font-size | theme.fontSize.t6 | tabs文字字号 | - |
--tabs-label-font-weight | theme.fontWeight.regular | tabs文字字重 | - |
--tabs-active-font-size | theme.fontSize.t6 | tabs激活项文字字号 | - |
--tabs-active-font-weight | theme.fontWeight.semibold | tabs激活项文字字重 | - |
--tabs-active-text-color | theme.color.gray.texticon.900 | tabs激活项文字颜色 | - |
--tabs-active-line-color | theme.color.brand.1000 | tabs激活项下标颜色，默认跟随主题色 | - |
--tabs-tab-description-font-size | theme.fontSize.t4 | 描述文字大小（variant="multi"） | - |
theme.fontSize.t2 | 描述文字大小（variant="calendar"） | - | |
--tabs-tab-tag-font-size | theme.fontSize.t2 | multi模式下最下方标签的文字大小 | - |
--tabs-tab-tag-line-height | theme.lineHeight.single.t3 | multi模式下最下方标签的文字大小 | - |
--tabs-tab-description-line-height | theme.lineHeight.single.t3 | 描述文字行高 | - |
--tabs-tab-description-font-size | theme.fontSize.t4 | 描述文字大小 | - |