Button 按钮

代码演示

Studio 风格

import { ClassicButton } from 'tuya-panel-style-button';
import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';

<View
  style={{
    display: 'flex',
  }}
>
  <ClassicButton
    onLongPress={() => console.log('long press')}
    icon={TuyaRNSvgs.power}
    text="switch"
  />
  <Text style={styles.title}>没有图标、没有背景</Text>
  <View style={{ flexDirection: 'row' }}>
    <ClassicButton
      width={90}
      showIcon={false}
      icon={TuyaRNSvgs.power}
      text="switch"
      iconColor="#FFF"
      padding={[5, 0, 0, 5]}
    />
    <ClassicButton
      width={90}
      showIconBg={false}
      icon={TuyaRNSvgs.power}
      text="switch"
      iconColor="#158CFC"
      style={{ marginLeft: 10 }}
    />
  </View>
  <Text style={styles.title}>设置内边距</Text>
  <ClassicButton
    icon={TuyaRNSvgs.power}
    text="switch"
    iconColor="#FFF"
    style={{ marginLeft: 10 }}
    padding={[10, 40, 0, 0]}
  />
</View>;

北欧风格

import { NordicButton } from 'tuya-panel-style-button';
import TuyaRNSvgs from 'tuya-panel-kit/lib/components/iconfont/svg/defaultSvg';

<NordicButton icon={TuyaRNSvgs.power} text="switch" iconColor="#FFF" />;

亚克力风格

<AcrylicButton
  icon={TuyaRNSvgs.power}
  text="switch"
  iconColor="#FFF"
  isSupportAcrylic={isShow}
/>

API

ClassicButton

属性名	描述	类型	默认值
style	最外层容器样式	StyleProp	`--`
iconBgStyle	图标背景样式	StyleProp	`--`
textStyle	文字样式	StyleProp	`--`
activeOpacity	触摸时的透明度	number	`--`
text	按钮文字	string	`--`
disabled	禁用组件	boolean	`false`
width	宽度	number	`--`
padding	最外层容器内边距，格式为 [paddingTop, paddingRight, paddingBottom, paddingLeft]	number[]	`--`
radius	圆角	number	`--`
backgroundColor	组件背景颜色	string	`--`
fontColor	按钮文字颜色	string	`(必选)`
fontSize	按钮文字大小	number	`(必选)`
fontWeight	按钮文字字重	"normal" \| "bold" \| "100" \| "200" \| "300" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900"	`(必选)`
milliseconds	规定长安的时间单位为 ms	number	`200`
onPress	点击按钮回调函数	() => void	`--`
onLongPress	长按按钮回调函速	() => void	`--`
icon	图标 svg path	string	`--`
image	图片地址，图标的优先级更高	string	`--`
iconSize	图标尺寸	number	`cx(24)`
iconBgSize	组件背景尺寸	number	`cx(50)`
showIcon	是否显示图标	boolean	`true`
showIconBg	是否显示图标背景	boolean	`true`
iconColor	图标颜色	string	`#fff`
iconBgColor	图标背景颜色只能设置 rgb、rgba 或者 hex	BackgroundType	`#158CFB`
iconBgRadius	图标背景圆角	number	`cx(50)`
imageRadius	图片圆角	number	`0`

Tuya Design

Button 按钮

代码演示

Studio 风格

北欧风格

亚克力风格

API

ClassicButton