BrickButton

Last Updated on : 2024-06-05 03:14:29download

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', }, }