ControllerBar 底部栏
ControllerBar
是有着一个或以上按钮的控制栏;ControllerBar.Group
是控制栏的集合。
代码演示
基础底部栏
import { ControllerBar } from 'tuya-panel-kit'<ControllerBarsize={44}button={[{ text: '1', type: 'primary' },{ text: '2', type: 'primary' },]}/>
ControllerBar.Group base 版
import { ControllerBar } from 'tuya-panel-kit'<ControllerBar.Group style={{ marginTop: 20 }}><ControllerBarsize={44}button={[{ text: '1', type: 'primary' },{ text: '2', type: 'primary' },]}/><ControllerBarsize={44}button={[{ text: '3', type: 'primary' },{ text: '4', type: 'primary' },]}/></ControllerBar.Group>
ControllerBar.Group Swiper 版
import { ControllerBar } from 'tuya-panel-kit'<ControllerBar.Grouptype="swiper"style={{ marginTop: 20 }}swiperConfig={{style: { height: 60 },dotActiveStyle: { backgroundColor: 'red' },dotStyle: { backgroundColor: 'blue' },}}size={44}><ControllerBarsize={44}button={[{ text: '1', type: 'primary' },{ text: '2', type: 'primary' },]}/><ControllerBarsize={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 }}><ControllerBarsize={44}button={[{ text: '1', type: 'primary' },{ text: '2', type: 'primary' },]}/><ControllerBarsize={44}button={[{ text: '3', type: 'primary' },{ text: '4', type: 'primary' },]}/></ControllerBar.Group>
API
extends ViewProps