TabBar

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