| - | -- | -- | -- | -
|---|---|---|---|
| - | -- | -- | -
- If this attribute is not set, the width required for the element content is used. - |
-
| - | -- | -- | -
- If this length attribute is not set, the length required for the element content is used. - |
-
| - | -- | -- | -- | -
| - | -- | -- | -- | -
| - | -- | -- | -Maximum component width, which has no restriction by default - |
-
| - | -- | -- | -Maximum component height, which has no restriction by default - |
-
| - | -- | -- | -Shorthand attribute to set all padding attributes. -The attribute can have one to four values:
-
|
-
| - | -- | -- | -- | -
| - | -- | -- | -- | -
| - | -- | -- | -Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values: -
|
-
| - | -- | -- | -- | -
| - | -- | -- | -- | -
| - | -- | -- | -Shorthand attribute to set all borders. You can set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set. - |
-
| - | -- | -- | -Shorthand attribute to set the style for all borders. Available values are as follows: - - - |
-
| - | -- | -- | -Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid. - |
-
| - | -- | -- | -Shorthand attribute to set the borders for every side respectively. You can set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set. - |
-
| - | -- | -- | -Shorthand attribute to set the width of all borders, or separately set the width of each border. - |
-
| - | -- | -- | -Attribute to set widths of left, top, right, and bottom borders. - |
-
| - | -- | -- | -Shorthand attribute to set the color of all borders, or separately set the color of each border. - |
-
| - | -- | -- | -Attribute to set colors of left, top, right, and bottom borders. - |
-
| - | -- | -- | -Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time. - - |
-
| - | -- | -- | -Attribute to respectively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners - |
-
| - | -- | -- | -This attribute supports Gradient Styles only but is not compatible with background-color or background-image. - |
-
| - | -- | -- | -- | -
| - | -- | -- | -Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported. - -
|
-
| - | -
|
-- | -
-
|
-
| - | -- | -- | -How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically. - - |
-
| - | -
|
-- | -
|
-
| - | -- | -- | -Shadow style of the current component. The value consists of the horizontal position (mandatory), vertical position (mandatory), fuzzy radius (optional, default value: 0), extension distance (optional, default value: 0), and color (optional, default value: black) of the shadow. -Syntax: box-shadow: h-shadow v-shadow blur spread color - -
|
-
| - | -- | -- | -Radius of the blur area within the component layout. If the radius is not set, the default value 0 (no blur area) is used. Percentage values are not supported. - - - - |
-
| - | -- | -- | -Radius of the background blur area within the component layout. If the radius is not set, the default value 0 (no background blur) is used. Percentage values are not supported. - - - - |
-
| - | -- | -- | -Opacity of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. - |
-
| - | -- - | -- | -How and whether to display the box containing an element. Available values are as follows: - - |
-
| - | -- - | -- | -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: - - - |
-
| - | -- | -- | -How to divide available space of the parent component for each child component. -You can set one, two5+, or three5+ values for this style. -Set one value in either of the following ways: - -Set two values5+ in the following ways: -The first value must be a unitless number used to set flex-grow. The second value must be either of the following: - -Set three values5+ in the following ways: -The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis. - - |
-
| - | -- | -- | -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. - - |
-
| - | -- | -- | -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. - - |
-
| - | -- - | -- | -- - | -
| - | -- | -- | -Alignment mode on the cross axis of the parent element. This style overwrites the align-items style of the parent element. The align-items style is used only in the div and list styles of the parent container. Text alignment mode. Available values include: -
|
-
| - | -- | -- | -Positioning type of an element. Dynamic changes are not supported. - - - |
-
| - | -- | -- | -left|top|right|bottom must be used together with position to determine the offset position of an element. -
|
-
| - | -- | -- | -start | end must be used together with position to determine the offset of an element. -
|
-
| - | -- | -- | -Rendering sequence of child nodes under the same parent node. The larger the value is, the later the rendering data is. - - |
-
| - | -- | -- | -Indicates the fill color for SVG images. The following components (and attributes) are supported: button (icon attribute), piece (icon attribute), search (icon attribute), input (headericon attribute), textarea (headericon attribute), and image (src attribute), and toolbar-item (icon attribute). -The fill color value in the SVG image file is replaced with the value of image-fill during rendering, and is valid only for the fill attribute that is declared in the SVG image. - |
-
| - | -- | -- | -Clip area of a component. Only the content within this area is displayed. -<geometry-box>: applicable scope of the clip area's width and height. The default value is border-box. Available values include: -
<basic-shape>: shape of the clip area. Available values include: -
|
-
| - | -
|
-- | -Image used for the mask of a component: -Gradient color mask, for example: -linear-gradient(to left, black, white) -Solid color mask, for example: -linear-gradient(to right, grey , grey) -Mask filled by a local SVG image, for example, url(common/mask.svg) - |
-
| - | -
|
-- | -Display size of the mask image. The setting is valid only when mask-image is set to an image source. -The string values are as follows: -
length indicates the width and height of the 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. -When you set the width and height with percentage values, the image size is set in relative to the original size. 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. - |
-
| - | -
|
-- | -Display position of the mask image. The setting is valid only when mask-image is set to an image source. 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. -The string values are as follows: -
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%. - - |
-
| - | -- | -- | -- - - | -
| - | -- | -- | -
- 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). - |
-
| - | -- | -- | -
- If you set only one value, it specifies the width for four sides. -If you set two values, the first value specifies the top and bottom width, and the second value specifies the left and right width. -If you set three values, the first value specifies the top width, the second value specifies the left and right width, and the third value specifies the bottom width. -If you set four values, they respectively specify the width for top, right, bottom, and left sides (in clockwise order). - |
-
| - | -- | -- | -How far the border image can extend beyond the border box. -If you set only one value, it specifies the distance of the boarder image beyond the border on four sides. -If you set two values, the first value specifies the distance of the boarder image's top and bottom sides beyond the boarder, and the second value specifies the distance of the boarder image's left and right sides beyond the boarder. -If you set three values, the first value specifies the distance of the boarder image's top side beyond the boarder, the second value specifies the distance of the boarder image's left and right sides beyond the boarder, and the third value specifies the distance of the boarder image's bottom side beyond the boarder. -If you set four values, they respectively specify the distance of the boarder image's top, right, bottom, and left sides beyond the boarder (in clockwise order). - |
-
| - | -- | -- | -How the border image fills the border box. -stretch: stretches the image to fill the border box. -repeat: tiles the image to fill the border box. -round: tiles the image to fill the border box. When the image cannot be tiled for an integer number of times, it can be scaled based on the site requirements. - |
-
| - | -- | -- | -Shorthand attribute. The options are as follows: -
|
-
| - | -- | -- | -- | -
|---|---|---|---|
| - | -- | -- | -- - | -
| - | -- | -- | -- - | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -Offset for scrolling the list in the horizontal direction, in px. - |
-
| - | -- | -Offset for scrolling the list in the vertical direction, in px. - |
-
| - | -- | -- | -