TabBar 标签栏拆分版

更新时间:2024-06-05 03:14:34下载pdf

简介

tabBar用于拆分 tab,进行更细粒度的控制。目前 tabBar 支持两种类型,默认类型等同于tab

代码演示

说明:详细示例参考 Demo

默认

import { TabBar } from "tuya-panel-kit"; this.state = { tab: "2", }; const tabs = Array.from(Array(10), (v, k) => k + 1).map((v) => { return { key: `${v}`, title: `Tab${v}` }; }); <TabBar tabs={tabs} activeKey={this.state.tab} onChange={(value) => this.setState({ tab: value })} underlineStyle={{ width: 20, marginHorizontal: 30 }} />;

Radio

import { TabBar } from "tuya-panel-kit"; this.state = { tab: "2", }; const tabRadios = Array.from(Array(3), (v, k) => k + 1).map((v) => { return { key: `${v}`, title: `Tab${v}` }; }); <TabBar type="radio" tabs={tabRadios} activeKey={this.state.tab} onChange={(value) => this.setState({ tab: value })} style={{ borderColor: "red", margin: 10 }} />;

交互演示

TabBar 标签栏拆分版

API

type

tab 类型。

类型 必传 默认值
enum: radio、default default

tabs

tab 数据。

类型 必传 默认值
Array|TabModel

activeKey

所选中 tabkey

类型 必传 默认值
string|number

defaultActiveKey

默认所选中 tabkey

类型 必传 默认值
string|number 0

onChange

tab 切换的回调。

类型 必传 默认值
key => {}

wrapperStyle

tab 内层容器样式。

类型 必传 默认值
ViewPropTyps.style

style

tab 外层容器样式。

类型 必传 默认值
ViewPropTyps.style

默认 Tab 特定属性

underlineStyle

下划线的样式。

类型 必传 默认值
ViewPropTyps.style

tabStyle

每个 tab 的样式。

类型 必传 默认值
ViewPropTyps.style

tabActiveStyle

所选中 tab 的样式。

类型 必传 默认值
ViewPropTyps.style

tabTextStyle

每个 tab 内文字的样式。

类型 必传 默认值
Text.propTypes.style

tabActiveTextStyle

所选中 tab 的文字样式。

类型 必传 默认值
Text.propTypes.style

TabModel

title

tab 的标题或者节点名称。

类型 必传 默认值
string|element

style

tab 的定制样式。

类型 必传 默认值
ViewPropTyps.style

activeStyle

所选中 tab 的定制样式。

说明:仅默认类型支持。

类型 必传 默认值
ViewPropTyps.style

textStyle

tab 的定制文字样式。

类型 必传 默认值
Text.propTypes.style

activeTextStyle

所选中 tab 的定制文字样式。

类型 必传 默认值
Text.propTypes.style

Radio 独有属性

activeColor

所选中 tab 的颜色。

类型 必传 默认值
string #fff

gutter

tab 之间的间隔。

类型 必传 默认值
number 2