English
English
简体中文
Contact Us
Register
Log In
layoutIndex

UnitText

Last Updated on : 2022-03-01 07:55:04download

Overview

UnitText is used to show the display type text.

Code demo

import React from "react"; import { ScrollView } from "react-native"; import { UnitText } from "tuya-panel-kit"; import svgs from "tuya-panel-kit/src/components/iconfont/svg/defaultSvg"; // eslint-disable-line import svgsART from "tuya-panel-kit/src/components/iconfont/art/defaultSvg"; // eslint-disable-line import TesterTitle from "../../components/TesterTitle"; const UnitTextScene = () => { return ( <ScrollView style={{ flex: 1, marginTop: 16 }}> <TesterTitle title="Basic UnitText" /> <UnitText value="99" size={36} unit="celsius" valueColor="red" unitColor="red" /> <TesterTitle title="Customize the color of each value of UnitText" /> <UnitText value="032" size={36} unit={svgs.fahrenheit} valueColor="red" valueColors={["rgba(0, 0, 0, 0.3)", undefined, "blue"]} unitColor="red" /> <TesterTitle title="Basic UnitText (ART version)" /> <UnitText useART={true} value="99" size={50} unit="celsius" valueColor="red" unitColor="red" /> <TesterTitle title="Customize the color of each value of UnitText (ART version)" /> <UnitText useART={true} value="032" size={50} unit={svgsART.fahrenhei} valueColor="red" valueColors={["rgba(0, 0, 0, 0.3)", undefined, "blue"]} unitColor="red" /> </ScrollView> ); }; export default UnitTextScene;

API

style

The style of the outer container of the UnitText component.

Type Required Default value
ViewPropTypes.style No null

size

The font size of the UnitText component. size is the abbreviation of valueSize or unitSize.

  • valueSize value is the same as the size value.
  • unitSize value is one half of the size value.
Type Required Default value
number No 96

value

The numerical value displayed by the UnitText component.

Type Required Default value
string Yes null

valueSize

The value of the numerical value in the UnitText component.

Type Required Default value
number No null

valueColor

The color of the numerical value in the UnitText component.

Type Required Default value
ColorPropType No white

valueColors

The color of each numerical value in the UnitText component, which can be set separately.

Type Required Default value
array No None

unit

The setting of the unit in the UnitText component. The string of unit parameter value is the built-in SVG name. For IconFont built-in font images, see IconFont.

Type Required Default value
string No None

unitSize

The size of the unit in the UnitText component.

Type Required Default value
number No null

unitColor

The color of the unit in the UnitText component.

Type Required Default value
ColorPropType No white

unitPaddingLeft

The left padding of the unit in the UnitText component.

Type Required Default value
number No 0

unitPaddingTop

The top padding of the unit in the UnitText component.

Type Required Default value
number No 0