English
English
简体中文
Contact Us
Register
Log In
Language
English
English
简体中文
Contact Us
Log In
Register
Go to main website
App Develop

App Development

Tuya provides multiple mobile app development methods such as no-code or IoT App SDK development to maximize the monetization of IoT apps.
layoutIndex

ControllerBar

Last Updated on : 2021-12-21 07:41:59download

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