BrickButton

BrickButton is an extension of Button function.

Code demo

Note: for more information, see BrickButton Demo.

import { BrickButton } from "tuya-panel-kit";
 
<BrickButton text="loading" loading={true} />;

API

style

Container style.

Type	Required	Default value
ViewPropTypes.style	No	null

onPress

Click event.

Type	Required	Default value
()=> void	No	() => {}

onChange

Event listener collection.

• onShowUnderlay: call it when the underlying color is shown.
• onHideUnderlay: call it when the underlying color is hidden.

Type	Required	Default value
(eventName, ...args) => void	No	() => {}

loading

Show the reading status or not.

Type	Required	Default value
boolean	No	false

text

Button text.

Type	Required	Default value
PropTypes.string	No	PropTypes.array

textStyle

Button text style.

Type	Required	Default value
Text.propTypes.style	No	null

type

Button type.

• primary: rectangular.
• primaryGradient: rectangular with gradient.
• primaryBorder: rectangular with border radius.
• normal: normal sized button.
• small: small sized button.

Type	Required	Default value
oneOfType	No	primary

wrapperStyle

Content style inside the button.

Type	Required	Default value
ViewPropTypes.style	No	null

underlayColor

The color of the button when it is being clicked.

Type	Required	Default value
ColorPropType	No	null

showUnderlay

Determine whether to show the color of the button when it is being clicked.

Type	Required	Default value
ColorPropType	No	true

loadingColor

Main color of loading component.

Type	Required	Default value
ColorPropType	No	#fff

loadingBackground

Background color of loading.

Type	Required	Default value
number	No	rgba(0, 0, 0, 0.1)

loadingSize

Size of loading.

Type	Required	Default value
'small' | 'large' | number	No	‘small’

loadingStrokeWidth

Border width of loading.

Type	Required	Default value
number	No	2

background

Gradient background.

Type	Required	Default value
object	No	{ x1: '0%', y1: '0%', x2: '0%', y2: '100%', stops: { '0%': 'red', '30%': 'blue', '100%': 'yellow', }, }