ControllerBar 底部栏

ControllerBar 是有着一个或以上按钮的控制栏；ControllerBar.Group 是控制栏的集合。

代码演示

基础底部栏

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

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

ControllerBar.Group base 版

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 版

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 版

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

extends ViewProps

Tuya Design

ControllerBar 底部栏

代码演示

基础底部栏

ControllerBar.Group base 版

ControllerBar.Group Swiper 版

ControllerBar divide 版

API