color
|
<color>
|
#ff007dff
|
No
|
Text color of the toggle.
|
font-size
|
<length>
|
16px
|
No
|
Font size of the toggle.
|
allow-scale
|
boolean
|
true
|
No
|
Whether the font size changes with the system's font size settings.
NOTE: If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.
|
font-style
|
string
|
normal
|
No
|
Font style of the toggle.
|
font-weight
|
number | string
|
normal
|
No
|
Font weight of the toggle. For details, see font-weight of the text component.
|
font-family
|
<string>
|
sans-serif
|
No
|
Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.
|
width
|
<length> | <percentage>
|
-
|
No
|
Component width.
If this attribute is not set, the width required for the element content is used.
|
height
|
<length> | <percentage>
|
-
|
No
|
Component height.
If this length attribute is not set, the length required for the element content is used.
|
padding
|
<length>
|
0
|
No
|
The attribute can have one to four values: If you set only one value, it specifies the padding for four sides.
If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.
If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.
If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).
|
padding-[left|top|right|bottom]
|
<length>
|
0
|
No
|
Left, top, right, and bottom padding (in px).
|
padding-[start|end]
|
<length>
|
0
|
No
|
Start and end padding.
|
margin
|
<length>
|
0
|
No
|
Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:
If you set only one value, it specifies the margin for all the four sides.
If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.
If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.
If you set four values, they are margins for top, right, bottom, and left sides, respectively.
|
margin-[left|top|right|bottom]
|
<length>
|
0
|
No
|
Left, top, right, and bottom margins.
|
margin-[start|end]
|
<length>
|
0
|
No
|
Start and end margins.
|
background
|
<linear-gradient>
|
-
|
No
|
This attribute supports Gradient Styles only but is not compatible with background-color or background-image.
|
background-color
|
<color>
|
-
|
No
|
Background color.
|
background-image
|
string
|
-
|
No
|
Background image. Currently, this attribute is not compatible with background-color or background. Both Internet and local image resources are supported.
|
background-size
|
- string
- <length> <length>
- <percentage> <percentage>
|
auto
|
No
|
Background image size.
- The string values are as follows:
- contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
- cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background localization area.
- auto: The original image width-height ratio is retained.
- The two <length> values are as follows:
Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.
- The two <percentage> values are as follows:
Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.
|
background-repeat
|
string
|
repeat
|
No
|
Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.
- repeat: Draws images along the x-axis and y-axis at the same time.
- repeat-x: Draws images along the x-axis.
- repeat-y: Draws images along the y-axis.
- no-repeat: The image is not drawn repeatedly.
|
background-position
|
- string string
- <length> <length>
- <percentage> <percentage>
|
0px 0px
|
No
|
- Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
- left: leftmost in the horizontal direction
- right: rightmost in the horizontal direction
- top: top in the vertical direction
- bottom: bottom in the vertical direction
- center: center position
- Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
- Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
- Using both <percentage> and <length>.
|
opacity
|
number
|
1
|
No
|
Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.
|
display
|
string
|
flex
|
No
|
How and whether to display the box containing an element. Available values are as follows:
- flex: flexible layout
- none: The element is hidden.
|
visibility
|
string
|
visible
|
No
|
Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the display attribute to none.) Available values are as follows:
- visible: The element is visible.
- hidden: The element is hidden but still takes up space.
NOTE: If both visibility and display are set, only display takes effect.
|
flex
|
number
|
-
|
No
|
How to divide available space of the parent component for a child component. It is used as a shorthand attribute to set the flex-grow attribute of the parent component.
NOTE: This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.
|
flex-grow
|
number
|
0
|
No
|
How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value 0 indicates that the child component does not grow.
NOTE: This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.
|
flex-shrink
|
number
|
1
|
No
|
How much a child component will shrink. The shrink occurs only when the sum of default child component widths is greater than that of the parent component. Value 0 indicates that the child component does not shrink.
NOTE: This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.
|
flex-basis
|
<length>
|
-
|
No
|
Initial length of the flex item on the main axis.
NOTE: This attribute takes effect only when the parent component is <div>, <list-item>, or <tabs>.
|
position
|
string
|
relative
|
No
|
Positioning type of an element. Dynamic changes are not supported.
- fixed: The element is positioned related to the browser window.
- absolute: The element is positioned absolutely to its parent element.
- relative: The element is positioned relative to its normal position.
NOTE: The absolute attribute takes effect only when the parent component is <div> or <stack>.
|
[left|top|right|bottom]
|
<length>
|
-
|
No
|
left|top|right|bottom must be used together with position to determine the offset position of an element.
- The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
- The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
- The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
- The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.
|