ControllerBar

ControllerBar is a control bar that contains one or more buttons. ControllerBar.Group is a collection of control bars.

Code demo

Note: for more information, see ControllerBar Demo.

ControllerBar

import { ControllerBar } from "tuya-panel-kit";
 
<ControllerBar
  size={44}
  button={[
    { text: "1", type: "primary" },
    { text: "2", type: "primary" },
  ]}
 />;

ControllerBar.Group Base Edition

import { ControllerBar } from "tuya-panel-kit";
 
<ControllerBar.Group style={{ marginTop: 20 }}>
  <ControllerBar
    size={44}
    button={[
      { text: "1", type: "primary" },
      { text: "2", type: "primary" },
    ]}
  />
  <ControllerBar
    size={44}
    button={[
      { text: "3", type: "primary" },
      { text: "4", type: "primary" },
    ]}
  />
 </ControllerBar.Group>;

ControllerBar.Group Swiper Edition

import { ControllerBar } from "tuya-panel-kit";
 
<ControllerBar.Group
  type="swiper"
  style={{ marginTop: 20 }}
  swiperConfig={{
    style: { height: 60 },
    dotActiveStyle: { backgroundColor: "red" },
    dotStyle: { backgroundColor: "blue" },
  }}
  size={44}
 >
  <ControllerBar
    size={44}
    button={[
      { text: "1", type: "primary" },
      { text: "2", type: "primary" },
    ]}
  />
  <ControllerBar
    size={44}
    button={[
      { text: "3", type: "primary" },
      { text: "4", type: "primary" },
    ]}
  />
 </ControllerBar.Group>;

ControllerBar.Group Divide Edition

import { ControllerBar } from "tuya-panel-kit";
 
<ControllerBar.Group type="divide" style={{ marginTop: 20 }}>
  <ControllerBar
    size={44}
    button={[
      { text: "1", type: "primary" },
      { text: "2", type: "primary" },
    ]}
  />
  <ControllerBar
    size={44}
    button={[
      { text: "3", type: "primary" },
      { text: "4", type: "primary" },
    ]}
  />
 </ControllerBar.Group>;

API

style

The style of the outer container.

Type	Required
ViewPropTypes.style	No

wrapperStyle

Button style.

Type	Required
ViewPropTypes.style	No

type

The button background type.

• primary: the button follows global.brand in the theme.
• normal: the default background color is transparent.

Type	Required	Default value
enum	No	normal

size

Button size.

• noSet: the button size is not set, but filled with a child element.
• large: the button is in a large size, 48 px.
• normal: the button is in normal size, 40 px.
• small: the button is in a small size, 32 px.

Type	Required	Default value
enum/number	No	noSet

stretch

Stretch of the button follows the parent container.

Type	Required	Default value
bool	No	true

backgroundType

Whether the background is translucent.

• pure: pure.
• alpha: translucent.

backgroundColor

Background color.

Type	Required	Default value
ColorPropType	No	#fff

hasBottomBorder

Whether there is a border at the bottom.

Type	Required	Default value
bool	No	false

button

Buttons in the controllerBar.

Type	Required	Default value
Array[ButtonPropTypes]	Yes	None

Group API

style

The style of the outer container.

Type	Required	Default value
ViewPropTypes.style	No	None

type

Group type.

• warp: normal word-wrap.
• swiper: slide.
• divide: adjacent underlined style.

Type	Required	Default value
enum	No	warp

size

Button size.

• noSet: the button size is not set, but filled with a child element.
• large: the button is in a large size, 48 px.
• normal: the button is in normal size, 40 px.
• small: the button is in a small size, 32 px.

Type	Required	Default value
enum/number	No	noSet

swiperConfig

When type is swiper, this is the configuration of swiper.

Type	Required	Default value
SwiperPropTypes	No	None

children

Child nodes.

Type	Required	Default value
node	Yes	None