Button 按钮

更新时间:2024-06-05 03:14:29下载pdf

Button是一个最常用的组件,主要用于纯文本、图片和按键等需要点击的场景。

代码演示

Button在指定场景中的代码示例如下。

说明:详细 Demo 参见 Button Demo

Text

import { Button } from "tuya-panel-kit"; <Button text="点击一下我" />;

Icon

import { Button } from "tuya-panel-kit"; <Button icon="selected" iconSize={24} text="文字" />;

Image

import { Button } from "tuya-panel-kit"; <Button image={require("../../res/2.png")} />;

交互演示

Button 按钮

API

继承 TouchableOpacity 组件,详情请见 TouchableOpacity

stretch

按钮是否拉伸,跟随父容器。

类型 必选 默认值
boolean false

size

按钮大小。

  • noSet: 不设置,靠子元素填充。
  • large: 大,48px。
  • normal: 普通,40px。
  • small: 小,32px。
类型 必传 默认值
enum/number noSet

type

按钮类型。

  • primary:跟随主题中的global.brand
  • normal:即默认背景色为transparent
类型 必传 默认值
enum normal

text

按钮的文字。

类型 必传 默认值
string

background

按钮背景,可为颜色值或渐变值。

类型 必传 默认值
stringobject

textSingleLine

按钮内的文字是否只显示一行,即超出部分显示省略号。

类型 必传 默认值
boolean true

textDirection

按钮内的文字排列方向,默认放置文字位于按钮底部。

  • left: 左
  • top: 顶部
  • right: 右
  • bottom: 底部
  • center: 中间
类型 必传 默认值
enum bottom

icon

按钮图标 ID,详情参见 iconFont-name

iconPath

按钮图标路径,详情参见 iconFont-d

iconSize

按钮图标的大小,详情参见 iconFont-size

iconColor

按钮图标的颜色,详情参见 iconFont-color

image

按钮图片的源图。

类型 必传 默认值
Image.propTypes.source

imageColor

按钮图片的 tintColor。

类型 必传 默认值
string

imageStyle

按钮内的 image 样式。

类型 必传 默认值
ViewPropTypes.style

activeOpacity

按钮点击时的透明度。

类型 必传 默认值
number(0到1) 0.5

disabled

是否不可点击。

类型 必传 默认值
boolean false

disabledOpacity

按钮不可用时的透明度。

类型 必传 默认值
number(0到1) 0.2

style

按钮的样式。

类型 必传 默认值
ViewPropTypes.style

wrApperStyle

按钮最外部容器样式。

类型 必传 默认值
ViewPropTypes.style

textStyle

按钮文字样式。

类型 必传 默认值
Text.propTypes.style

badgeStyle

徽标样式。

类型 必传 默认值
ViewPropTypes.style

badgeTextStyle

徽标文字样式。

类型 必传 默认值
Text.propTypes.style

onPress

点击回调。

类型 必传 默认值
() => {}

onLayout

按钮 onLayout 回调。

类型 必传 默认值
(e) => {}