双键组件

更新时间：2022-03-07 01:37:32下载pdf

DoubleKey

预览效果

组件属性

字段名	类型	描述	默认值
radius	number	按键圆角	34
padding	number	按键内边距	4
height	number	按键高	150
width	number	按键宽	68
bgColor	string	按键激活时的背景色	‘rgb(255,255,255)’
activeBgColor	string	按键按下后的背景色	‘rgb(250,250,250)’
disabledBgColor	string	按键未激活时的背景色	‘rgb(250,250,250)’
contentColor	string	按键激活时的内容颜色	rgba(122,123,136,1)’
disabledContentColor	string	按键未激活时的内容颜色	‘rgba(122,123,136,0.5)’
onPress	function	按键短按触发事件	null
onLongPress	function	按键长按触发事件	null
outStyle	StyleProp	按键外部样式	null
outBgColor	string	外边框背景色	‘rgb(246, 246, 246)’
tip	string	提示文字	‘’
tipStyle	StyleProp	提示文字样式	null
status	boolean	按键激活状态	false
repeat	boolean	按键长按时，是否连续重复触发	false
repeatIntervalTime	number	连续重复触发时间间隔	300
icon	string	Icon path属性	‘’
img	ImageSourcePropType	按键图片	null
imgStyle	StyleProp	图片样式	null
iconSize	number	icon尺寸大小	20
text	string	按键显示文字	‘’
textStyle	StyleProp	按键显示文字样式	null
useART	boolean	基础组件IconFont的useART属性	false
type	‘horizontal’ \| ‘vertical’	组件显示方式：水平和垂直	‘vertical’
loading	boolean	是否展示loading效果	false
loadingContent	Element	自定义loading内容	null

使用示例

import React, { FC } from 'react';
import { DoubleKey } from 'tuya-panel-remote-sdk'
import { Utils } from 'tuya-panel-kit';

const { convertX: cx } = Utils.RatioUtils;
const add = require('./res/add.png');
const minus = require('./res/minus.png');
const loadingImg = require('./res/loading.png');

// 默认效果1
<DoubleKey status={true} tip="音量" img={[add, minus]} />
<DoubleKey status={false} tip="音量" img={[add, minus]} />
<DoubleKey
  status={true}
  tip="音量"
  img={[add, minus]}
  type="horizontal"
/>
<DoubleKey
  status={false}
  tip="音量"
  img={[add, minus]}
  type="horizontal"
/>
// 默认效果2
<DoubleKey status={[true, false]} tip="音量" img={[add, minus]} />
<DoubleKey status={[false, true]} tip="音量" img={[add, minus]} />
<DoubleKey
  status={[true, false]}
  tip="音量"
  img={[add, minus]}
  type="horizontal"
/>
<DoubleKey
  status={[false, true]}
  tip="音量"
  img={[add, minus]}
  type="horizontal"
/>
// 自定义样式1
<DoubleKey
  status={true}
  tip="音量"
  img={[add, minus]}
  bgColor={['rgba(207,92,78,1)', 'rgba(249,206,94,1)']}
  activeBgColor={['rgba(207,92,78,0.5)', 'rgba(249,206,94,0.5)']}
  outBgColor="rgba(207,92,78,0.2)"
  contentColor="white"
  tipStyle={{ color: 'white' }}
/>
<DoubleKey
  status={false}
  tip="音量"
  img={[add, minus]}
  bgColor={['rgba(207,92,78,1)', 'rgba(249,206,94,1)']}
  disabledBgColor={['rgba(207,92,78,0.5)', 'rgba(249,206,94,0.5)']}
  outBgColor="rgba(207,92,78,0.1)"
  disabledContentColor="white"
  tipStyle={{ color: 'white' }}
/>
<DoubleKey
  status={true}
  text={["加", "减"]}
  type="horizontal"
  contentColor={['white', 'white']}
  bgColor={['rgba(87,140,238,1)', 'rgba(75,158,101,1)']}
  activeBgColor={['rgba(87,140,238,0.5)', 'rgba(75,158,101,0.5)']}
  outBgColor="rgba(rgba(87,140,238,0.2))"
/>
<DoubleKey
  status={false}
  text={["加", "减"]}
  type="horizontal"
  disabledContentColor={['white', 'white']}
  bgColor={['rgba(87,140,238,1)', 'rgba(75,158,101,1)']}
  disabledBgColor={['rgba(87,140,238,0.5)', 'rgba(75,158,101,0.5)']}
  outBgColor="rgba(rgba(87,140,238,0.1))"
/>
// 自定义样式2
<DoubleKey
  status={true}
  tip="音量"
  img={[add, minus]}
  bgColor={['rgba(207,92,78,1)', 'rgba(249,206,94,1)']}
  activeBgColor={['rgba(207,92,78,0.5)', 'rgba(249,206,94,0.5)']}
  outBgColor="rgba(207,92,78,0.2)"
  contentColor="white"
  tipStyle={{ color: 'white' }}
  radius={0}
  width={cx(80)}
  height={cx(160)}
/>
<DoubleKey
  status={false}
  tip="音量"
  img={[add, minus]}
  bgColor={['rgba(207,92,78,1)', 'rgba(249,206,94,1)']}
  disabledBgColor={['rgba(207,92,78,0.5)', 'rgba(249,206,94,0.5)']}
  outBgColor="rgba(207,92,78,0.2)"
  disabledContentColor="white"
  tipStyle={{ color: 'white' }}
  radius={0}
  width={cx(80)}
  height={cx(160)}
/>
<DoubleKey
  status={true}
  text={["加", "减"]}
  type="horizontal"
  contentColor="white"
  tipStyle={{ color: 'white' }}
  bgColor={['rgba(87,140,238,1)', 'rgba(75,158,101,1)']}
  activeBgColor={['rgba(87,140,238,0.5)', 'rgba(75,158,101,0.5)']}
  outBgColor="rgba(rgba(87,140,238,0.2))"
  radius={cx(20)}
  height={cx(80)}
  width={cx(160)}
/>
<DoubleKey
  status={false}
  text={["加", "减"]}
  type="horizontal"
  disabledContentColor="white"
  bgColor={['rgba(87,140,238,1)', 'rgba(75,158,101,1)']}
  disabledBgColor={['rgba(87,140,238,0.5)', 'rgba(75,158,101,0.5)']}
  outBgColor="rgba(rgba(87,140,238,0.2))"
  radius={cx(20)}
  height={cx(80)}
  width={cx(160)}
/>
// Loading
<PressKey
  width={cx(100)}
  height={cx(50)}
  onPress={() =>
  this.setState({
    loading: !this.state.loading,
    isFirst: loading ? !isFirst : isFirst,
  })
          }
  text={loading ? "结束" : "开始"}
  status={true}
/>
<DoubleKey
  status={true}
  tip="音量"
  text={["加", "减"]}
  loading={[loading && isFirst, loading && !isFirst]}
  bgColor="rgba(195,117,241,1)"
  activeBgColor="rgba(195,117,241,0.5)"
  contentColor="white"
  outBgColor="rgba(195,117,241,0.3)"
  tipStyle={{ color: 'white' }}
  />
<DoubleKey
  status={true}
  tip="音量"
  img={[add, minus]}
  loading={[loading && isFirst, loading && !isFirst]}
  loadingContent={<Image source={loadingImg} />}
/>

上一篇品牌搜索组件

下一篇方向盘组件