TabBar

Last Updated on : 2024-06-05 03:14:34download

Overview

tabBar is used to split the tab for more fine-grained control. Currently, tabBar supports two types. The default type is equivalent to tab.

Code demo

Note: for more information, see Demo.

Default

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 }} />;

API

type

tab type.

Type Required Default value
enum: radio, default No default

tabs

tab data.

Type Required Default value
Array|TabModel Yes None

activeKey

The key of the selected tab.

Type Required Default value
string|number No None

defaultActiveKey

The key of the tab that is selected by default.

Type Required Default value
string|number No 0

onChange

Callback of tab switching.

Type Required Default value
key => {} No None

wrapperStyle

The style of the inner container of tab.

Type Required Default value
ViewPropTyps.style No None

style

The style of the outer container of tab.

Type Required Default value
ViewPropTyps.style No None

Specific properties of default tab

underlineStyle

Style of the underline.

Type Required Default value
ViewPropTyps.style No None

tabStyle

The style of each tab.

Type Required Default value
ViewPropTyps.style No None

tabActiveStyle

The style of the selected tab.

Type Required Default value
ViewPropTyps.style No None

tabTextStyle

The style of the text in each tab.

Type Required Default value
Text.propTypes.style No None

tabActiveTextStyle

The style of the text in the selected tab.

Type Required Default value
Text.propTypes.style No None

TabModel

title

tab title or node name.

Type Required Default value
string|element No None

style

tab custom style.

Type Required Default value
ViewPropTyps.style No None

activeStyle

The custom style of the selected tab.

Note: only the default type supports this property.

Type Required Default value
ViewPropTyps.style No None

textStyle

Custom text style of tab.

Type Required Default value
Text.propTypes.style No None

activeTextStyle

The custom style of the text in the selected tab.

Type Required Default value
Text.propTypes.style No None

Unique properties of radio

activeColor

The color of the selected tab.

Type Required Default value
string No #fff

gutter

The spacing between tab.

Type Required Default value
number No 2