ControllerBar

ControllerBar is a control bar with one or more buttons；ControllerBar.Group is a collection of control bars.

Code demo

Basic Bottom Bar

import { ControllerBar } from 'tuya-panel-kit'

<ControllerBar
  size={44}
  button={[
    { text: '1', type: 'primary' },
    { text: '2', type: 'primary' },
  ]}
/>

ControllerBar.Group base version

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 version

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 divide version

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

继承自 ViewProps

Tuya Design

ControllerBar

Code demo

Basic Bottom Bar

ControllerBar.Group base version

ControllerBar.Group Swiper version

ControllerBar divide version

API