| height | number | - | Height set for the component during playback of the animation. |
| backgroundColor | <color> | none | Background color set for the component during playback of the animation. |
| opacity | number | 1 | Opacity set for the component. The value ranges from 0 to 1. |
| backgroundPosition | string | - | The value format is **x y**, in percentage or pixels.<br>The first value indicates the horizontal position, and the second value indicates the vertical position.<br>If only one value is specified, the other value is **50%**.|
| backgroundPosition | string | - | The value format is **"x y"**, in percentage or pixels.<br>The first value indicates the horizontal position, and the second value indicates the vertical position.<br>If only one value is specified, the other value is **50%**.|
| transformOrigin | string | 'center center' | Origin position of the transformed element.<br>The first value indicates the x-axis position. The value can be **left**, **center**, **right**, a length, or a percentage.<br>The second value indicates the y-axis position. The value can be **top**, **center**, **bottom**, a length, or a percentage.|
| transform | [Transform](../arkui-js/js-components-common-animation.md) | - | Transformation type set for a transformed element. |
| offset | number | - | - The value of **offset** must be within (0.0, 1.0] and sorted in ascending order if it is provided.<br>- If there are only two frames, **offset** can be left empty.<br>- If there are more than two frames, **offset** is mandatory.|
| finished | boolean | Read-only attribute, which indicates whether the animation playback is complete. |
| pending | boolean | Read-only attribute, which indicates whether the animation is waiting for the completion of other asynchronous operations (for example, start an animation with a delay).|
| playState | string | Read-write attribute, which indicates the playback status of the animation:<br>- **idle**: The animation is not running (playback ended or not started).<br>- **running**: The animation is running.<br>- **paused**: The animation is paused.<br>- **finished**: Animation playback ends.|
| playState | string | Read-write attribute, which indicates the playback status of the animation:<br>- **idle**: The animation is not running (playback ended or not started).<br>- **running**: The animation is running.<br>- **paused**: The animation is paused.<br>- **finished**: The animation finishes playing.|
| startTime | number | Read-write attribute, which indicates the animation start time. This attribute is similar to **delay** in the **options** attribute. |
| width | <length>\|<percentage> | - | Component width.<br>If this attribute is not set, the width required for the element content is used.<br> |
| height | <length>\|<percentage> | - | Component height.<br>If this attribute is not set, the height required for the element content is used.<br> |
| width | <length>\|<percentage> | - | Component width.<br>If this attribute is not set, the width required for the element content is used. |
| height | <length>\|<percentage> | - | Component height.<br>If this attribute is not set, the height required for the element content is used. |
| max-width<sup>5+</sup> | <length>\|<percentage><sup>6+</sup> | - | Maximum component width, which has no restriction by default. |
| max-height<sup>5+</sup> | <length>\|<percentage><sup>6+</sup> | - | Maximum component height, which has no restriction by default. |
| padding | <length>\|<percentage><sup>5+</sup> | 0 | Shorthand attribute to set the padding for all sides in a declaration.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- 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.<br>- 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>\|<percentage><sup>5+</sup> | 0 | Left, top, right, and bottom padding. |
| padding-[start\| end] | <length>\|<percentage><sup>5+</sup> | 0 | Start and end padding. |
| padding-[start\|end] | <length>\|<percentage><sup>5+</sup> | 0 | Start and end padding. |
| margin | <length>\|<percentage><sup>5+</sup> | 0 | Shorthand attribute to set the margin for all sides in a declaration. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| margin-[left\| top \| right \|bottom] | <length>\|<percentage><sup>5+</sup> | 0 | Left, top, right, and bottom margins. |
| margin-[start\| end] | <length>\|<percentage><sup>5+</sup> | 0 | Start and end margins. |
| margin-[start\|end] | <length>\|<percentage><sup>5+</sup> | 0 | Start and end margins. |
| border | - | 0 | Shorthand attribute to set all borders. Set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set.|
| border-style | string | solid | Shorthand attribute to set the style for all borders. Available values are as follows:<br>- **dotted**: dotted border. The radius of a dot is half of **border-width**.<br>- **dashed**: dashed border.<br>- **solid**: solid border.|
| border-[left\|top\|right\|bottom]-style | string | solid | Styles of the left, top, right, and bottom borders. The available values are **dotted**, **dashed**, and **solid**.|
| border-[left\| top \| right \| bottom] | - | - | Shorthand attribute to set the borders for every side respectively. Set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set.|
| border-[left\|top\|right\|bottom] | - | - | Shorthand attribute to set the borders for every side respectively. Set **border-width**, **border-style**, and **border-color** in sequence. Default values are used for attributes that are not set.|
| border-width | <length> | 0 | Shorthand attribute to set the width for all borders, or separately set the width for each border. |
| border-[left\| top \| right \|bottom]-width | <length> | 0 | Attribute to set widths of left, top, right, and bottom borders. |
| border-[left\|top\|right\|bottom]-width | <length> | 0 | Attribute to set widths of left, top, right, and bottom borders. |
| border-color | <color> | black | Shorthand attribute to set the color for all borders, or separately set the color for each border. |
| border-[left\| top \| right \|bottom]-color | <color> | black | Attribute to set colors for left, top, right, and bottom borders. |
| border-radius | <length> | - | Attribute to set the radius for 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.|
| border-[top\| bottom]-[left \|right]-radius | <length> | - | Attribute to respectively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners |
| border-[left\|top\|right\|bottom]-color | <color> | black | Attribute to set colors for left, top, right, and bottom borders. |
| border-radius | <length> | - | Attribute to set the radius for 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.<br>In the four-value syntax, the values apply to lower-left corner, lower-right corner, upper-left corner, and upper-right corner, respectively.|
| border-[top\|bottom]-[left\|right]-radius | <length> | - | Attribute to respectively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners |
| background | <linear-gradient> | - | Background. This attribute supports [gradient styles](../arkui-js/js-components-common-gradient.md) only and is not compatible with **background-color** or **background-image**.|
| background-image | string | - | Background image. Both online and local image resources are supported. Currently, this attribute is not compatible with **background-color** or **background**.<br>Example:<br>- background-image: url("/common/background.png")<br>The SVG format is not supported.|
| background-size | - string<br>- <length><length><br>- <percentage><percentage> | auto | Background image size.<br>- The **string** values are as follows:<br> - **contain**: Expands the image to the maximum size so that its height and width are fully applicable to the content area.<br> - **cover**: Extends the background image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.<br> - **auto**: Retains the original aspect ratio of the image.<br>- The two **\<length>** values are as follows:<br> 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.<br>- The two **\<percentage>** values are as follows:<br> 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 | How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.<br>- **repeat**: The image is repeated along the x-axis and y-axis at the same time.<br>- **repeat-x**: The image is repeated along the x-axis.<br>- **repeat-y**: The image is repeated along the y-axis.<br>- **no-repeat**: The image is not repeated.|
| background-position | - string string<br>- <length><length><br>- <percentage><percentage> | 0px 0px | - 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.<br> - **left**: leftmost in the horizontal direction.<br> - **right**: rightmost in the horizontal direction.<br> - **top**: top in the vertical direction.<br> - **bottom**: bottom in the vertical direction.<br> - **center**: center position.<br>- Using **\<length>**: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is **0 0**. The unit is pixel. If only one value is specified, the other one is **50%**.<br>- 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%**.<br>- Using both **\<percentage>** and **\<length>**. |
| box-shadow<sup>5+</sup> | string | 0 | Syntax: **box-shadow: h-shadow v-shadow blur spread color**<br>Shadow style of the current component. The value includes 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.<br>Example:<br>- box-shadow :10px 20px 5px 10px \#888888<br>- box-shadow :100px 100px 30px red<br>- box-shadow :-100px -100px 0px 40px |
| filter<sup>5+</sup> | string | - | Syntax: **filter: blur(px)**<br>Radius of the blur area within the component layout. If this style is not set, the default value **0** (no blur) is used. Percentage values are not supported.<br>Example:<br>- filter: blur(10px) |
| backdrop-filter<sup>5+</sup> | string | - | Syntax: **backdrop-filter: blur(px)**<br>Radius of the background blur area within the component layout. If this style is not set, the default value **0** (no blur) is used. Percentage values are not supported.<br>Example:<br>- backdrop-filter: blur(10px) |
| window-filter<sup>5+</sup> | string | - | Syntax: window-filter: blur(percent), style<sup>5+</sup><br>Blur degree and style for windows within the component layout. If this style is not set, the default value **0%** (no blur area) is used. Different blur degrees and styles for multiple blur areas are not supported. Available blur styles are as follows: **small_light** (default value), **medium_light**, **large_light**, **xlarge_light**, **small_dark**, **medium_dark**, **large_dark**, and **xlarge_dark**.<br>Example:<br>- window-filter: blur(50%)<br>- window-filter: blur(10%), large_light |
| background-size | - string<br>- <length><length><br>- <percentage><percentage> | auto | Background image size.<br>- The available values of the **string** type are as follows:<br> - **contain**: extends the image to the maximum size so that its height and width are fully applicable to the content area.<br> - **cover**: extends the background image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.<br> - **auto**: retains the original aspect ratio of the image.<br>- Values of the **\<length>** type:<br>The two values are 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.<br>- Values of the **\<percentage>** type:<br>The two values are 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 | How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.<br>- **repeat**: The image is repeated along both the x-axis and y-axis.<br>- **repeat-x**: The image is repeated along the x-axis.<br>- **repeat-y**: The image is repeated along the y-axis.<br>- **no-repeat**: The image is not repeated.|
| background-position | - string string<br>- <length><length><br>- <percentage><percentage> | 0px 0px | - Values of the **string** type: If only one value is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.<br> - **left**: leftmost in the horizontal direction.<br> - **right**: rightmost in the horizontal direction.<br> - **top**: top in the vertical direction.<br> - **bottom**: bottom in the vertical direction.<br> - **center**: center in the horizontal or vertical direction.<br>- Values of the **\<length>** type: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is 0 0 in px (**0px 0px**). If only one value is specified, the other one is **50%**.<br>- Values of the **\<percentage>** type: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is 0% 0%. For the lower right corner, the value is **100% 100%**. If only one value is specified, the other one is **50%**.<br>- Values of the **\<percentage>** type and **\<length>** type can be used together.|
| box-shadow<sup>5+</sup> | string | 0 | Syntax: box-shadow: h-shadow v-shadow blur spread color<br>Shadow style of the current component. The value includes 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.<br>Example:<br>- box-shadow :10px 20px 5px 10px \#888888<br>- box-shadow :100px 100px 30px red<br>- box-shadow :-100px -100px 0px 40px |
| filter<sup>5+</sup> | string | - | Syntax: filter: blur(px)<br>Radius of the blur area within the component layout. If this style is not set, the default value **0** (no blur) is used. Percentage values are not supported.<br>Example:<br>- filter: blur(10px) |
| backdrop-filter<sup>5+</sup> | string | - | Syntax: backdrop-filter: blur(px)<br>Radius of the background blur area within the component layout. If this style is not set, the default value **0** (no blur) is used. Percentage values are not supported.<br>Example:<br>- backdrop-filter: blur(10px) |
| window-filter<sup>5+</sup> | string | - | Syntax: window-filter: blur(percent), style<sup>5+</sup><br>Blur degree and style for windows within the component layout. If this style is not set, the default value **0%** (no blur area) is used. Different blur degrees and styles for multiple blur areas are not supported. Available values of **style** are as follows: small_light (default value), medium_light, large_light, xlarge_light, small_dark, medium_dark, large_dark, xlarge_dark<br>Example:<br>- window-filter: blur(50%)<br>- window-filter: blur(10%), large_light |
| opacity | number | 1 | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
| display | string | flex | Type of the box containing an element. Available values are as follows:<br>- **flex**: Flexible layout.<br>- **none**: The box is disabled.<br>- **inline**<sup>9+</sup>: Inline box, where the element is displayed as an inline element and does not start on a new line.<br>- **block**<sup>9+</sup>: Block box, where the element is displayed as a block-level element and always starts on a new line. This is the default value for container components.<br>- **inline-block**<sup>9+</sup>: Inline-block box, where the element is displayed on one line and you can set a width and height on the element. This is the default value for basic components.|
| display | string | flex | Type of the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered<br>- **grid**: grid layout (available only **div** supports the **display** style)|
| visibility | string | visible | Whether to display the box containing an element. The invisible box occupies layout space. (To remove the box, set the **display** attribute to **none**.) Available values are as follows:<br>- **visible**: The element is visible.<br>- **hidden**: The box is hidden but still takes up space.<br>If both **visibility** and **display** are set, only **display** takes effect.|
| flex | number \| string | - | How to divide available space of the parent component for each child component.<br>You can set one, two<sup>5+</sup>, or three<sup>5+</sup> values for this style.<br>Set one value in either of the following ways:<br>- A unitless number to set **flex-grow**.<br>- A valid width value<sup>5+</sup> to set **flex-basis**.<br>Set two values<sup>5+</sup> in the following ways:<br>The first value must be a unitless number used to set **flex-grow**. The second value must be either of the following:<br>- A unitless number to set **flex-shrink**.<br>- A valid width value to set **flex-basis**.<br>Set three values<sup>5+</sup> in the following ways:<br>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**.<br>This style takes effect only when the container is any of the following components: **\<div>**, **\<list-item>**, **\<tabs>**, **\<refresh>**, and **\<stepper-item><sup>5+</sup>**.|
| flex-grow | number | 0 | 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.<br>This style takes effect only when the container is any of the following components: **\<div>**, **\<list-item>**, **\<tabs>**, **\<refresh>**, and **\<stepper-item><sup>5+</sup>**.|
| flex-shrink | number | 1 | 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.<br>This style takes effect only when the container is any of the following components: **\<div>**, **\<list-item>**, **\<tabs>**, **\<refresh>**, and **\<stepper-item><sup>5+</sup>**.|
| flex-basis | <length> | - | Initial length of the flex item on the main axis.<br>This style takes effect only when the container is any of the following components: **\<div>**, **\<list-item>**, **\<tabs>**, **\<refresh>**, and **\<stepper-item><sup>5+</sup>**.|
| align-self<sup>6+</sup> | string | - | 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. Available values are as follows:<br>- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction.<br>- **flex-start**: Items are aligned to the start of the cross axis.<br>- **flex-end**: Items are aligned to the end of the cross axis.<br>- **center**: Items are aligned in the center of the cross axis.<br>- **baseline**: Items are aligned on the peracross axis.|
| position | string | relative | Positioning type of an element. Dynamic changes are not supported.<br>- **fixed**: The element is positioned related to the browser window.<br>- **absolute**: The element is positioned absolutely to its parent element. The setting takes effect only when the parent component is **\<div>** or **\<stack>**.<br>- **relative**: The element is positioned relative to its normal position.|
| [left \| top \| right \| bottom] | <length>\|<percentage><sup>6+</sup> | - | **left | top | right | bottom** must be used together with **position** to determine the offset of an element.<br/>- The **left** attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br/>- 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.<br/>- 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.<br/>- 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. |
| [start \| end]<sup>6+</sup> | <length>\|<percentage> | - | **start | end** must be used together with **position** to determine the offset of an element.<br/>- The **start** attribute specifies the start edge position of the element. This attribute defines the offset between the start edge of a positioned element and that of a block included in the element.<br/>- The **end** attribute specifies the end edge position of the element. This attribute defines the offset between the end edge of a positioned element and that of a block included in the element. |
| align-self<sup>6+</sup> | string | - | How items are aligned along the main axis of the container. The setting overwrites the **align-items** setting of the container and is valid only when the container is **\<div>** or **\<list>**. Available values are as follows:<br>- **stretch**: Items are stretched to the same height or width as the container along the cross axis.<br>- **flex-start**: Items are packed toward the start edge of the cross axis.<br>- **flex-end**: Items are packed toward the end edge of the cross axis.<br>- **center**: Items are packed toward the center of the cross axis.<br>- **baseline**: Items are packed toward the baseline of the cross axis.|
| position | string | relative | Positioning type of an element. Dynamic changes are not supported.<br>- **fixed**: The element is positioned relative to the entire UI.<br>- **absolute**: The element is positioned relative to the container. The setting is valid only when the container is **\<div>** or **\<stack>**.<br>- **relative**: The element is positioned relative to its normal position.|
| [left \| top \| right \| bottom] | <length>\|<percentage><sup>6+</sup> | - | Edge of the element. This style must be used together with **position** to determine the offset of an element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: 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.<br>- **right**: 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.<br>- **bottom**: 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. |
| [start \| end]<sup>6+</sup> | <length>\|<percentage> | - | start \| end must be used together with **position** to determine the offset of an element.<br>- **start**: start edge position of the element. This attribute defines the offset between the start edge of a positioned element and that of a block included in the element.<br>- **end**: end edge position of the element. This attribute defines the offset between the end edge of a positioned element and that of a block included in the element.|
| z-index<sup>6+</sup> | number | - | Rendering sequence of child nodes under the same parent node. A child node with a larger value will be rendered later.<br>z-index does not support auto, and other styles such as opacity do not affect the rendering sequence of z-index.|
| image-fill<sup>6+</sup> | <color> | - | Fill color for SVG images. The following components are supported: **button** (icon attribute), **piece** (icon attribute), **search** (icon attribute), **input** (headericon attribute), **textarea** (headericon attribute), **image** (src attribute), and **toolbar-item** (icon attribute)<br>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-path<sup>6+</sup> | [ <geometry-box>\|<basic-shape> ] \| none | - | Clip area of a component. Only the content within this area is displayed.<br>**\<geometry-box>**: applicable scope of the clip area's width and height. The default value is **border-box**. Available values are as follows:<br>- **margin-box**: The width and height includes the margin.<br>- **border-box**: The width and height includes the border.<br>- **padding-box**: The width and height includes the padding.<br>- **content-box**: The width and height does not include any margin, border, or padding.<br>**\<basic-shape>**: shape of the clip area. Available values include:<br>- **inset**, in the format of inset( \<percentage>{1,4} [ round \<'border-radius'> ]? ).<br>- **circle**, in the format of circle( [ \<percentage> ]? [ at <percentage><percentage> ]? ).<br>- **ellipse**, in the format of ellipse( [ \<percentage>{2} ]? [ at <percentage><percentage> ]? ).<br>- **polygon**, in the format of polygon( [ \<percentage> \<percentage> ]\# ).<br>- **path**, in the format of path( \<string> ).|
| image-fill<sup>6+</sup> | <color> | - | Fill color for SVG images. The following components are supported: **\<button>** (**icon** attribute), **\<piece>** (**icon** attribute), **\<search>** (**icon** attribute), **\<input>** (**headericon** attribute), **\<textarea>** (**headericon** attribute), **\<image** (**src** attribute), and **\<toolbar-item>** (**icon** attribute)<br>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-path<sup>6+</sup> | [ <geometry-box>\|<basic-shape> ] \| none | - | Clip area of a component. Only the content within this area is displayed.<br>**\<geometry-box>**: applicable scope of the clip area's width and height. The default value is **border-box**. Available values are as follows:<br>- **margin-box**: The width and height includes the margin.<br>- **border-box**: The width and height includes the border.<br>- **padding-box**: The width and height includes the padding.<br>- **content-box**: The width and height does not include any margin, border, or padding.<br>**\<basic-shape>**: shape of the clip area. Available values include:<br>- **inset**, in the format of inset( <percentage>{1,4} [ round <'border-radius'> ]? ).<br>- **circle**, in the format of circle( [ <percentage> ]? [ at <percentage><percentage> ]? ).<br>- **ellipse**, in the format of ellipse( [ <percentage>{2} ]? [ at <percentage><percentage> ]? ).<br>- **polygon**, in the format of polygon( [ <percentage><percentage> ]\# ).<br>- **path**, in the format of path( <string> ). |
| mask-image<sup>6+</sup> | - <linear-gradient><br>- string | - | Image used for the mask of a component:<br>Gradient color mask, for example:<br>linear-gradient(to left, black, white)<br>Solid color mask, for example:<br>linear-gradient(to right, grey , grey)<br>Mask filled by a local SVG image, for example, **url(common/mask.svg)**|
| mask-size<sup>6+</sup> | - string<br>- <length><length><br>- <percentage><percentage> | auto | Display size of the mask image. The setting is valid only when **mask-image** is set to an image source.<br>The **string** values are as follows:<br>- **contain**: Expands the image to the maximum size so that its height and width are fully applicable to the content area.<br>- **cover**: Extends the image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.<br>- **auto**: Retains the original aspect ratio of the image.<br>The two **\<length>** values are as follows: 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.<br>The two **\<percentage>** values indicate the image size in relative to the original image 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. |
| mask-position<sup>6+</sup> | - string string<br>- <length><length><br>- <percentage><percentage> | 0px 0px | 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.<br>The **string** values are as follows:<br>- **left**: leftmost in the horizontal direction.<br>- **right**: rightmost in the horizontal direction.<br>- **top**: top in the vertical direction.<br>- **bottom**: bottom in the vertical direction.<br>- **center**: center position.<br>Using **\<length>**: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is **0 0**. The unit is pixel. If only one value is specified, the other one is **50%**.<br>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%**.<br>Using both **\<percentage>** and **\<length>**. |
| mask-size<sup>6+</sup> | - string<br>- <length><length><br>- <percentage><percentage> | auto | Display size of the mask image. The setting is valid only when **mask-image** is set to an image source.<br>Values of the **string** type:<br>- **contain**: extends the image to the maximum size so that its height and width are fully applicable to the content area.<br>**cover**: extends the background image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.<br>- **auto**: retains the original aspect ratio of the image.<br>Values of the **\<length>** type: 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.<br>Values of the **\<percentage>** type indicate the image size relative to the original image 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.|
| mask-position<sup>6+</sup> | - string string<br>- <length><length><br>- <percentage><percentage> | 0px 0px | Display position of the mask image. The setting is valid only when **mask-image** is set to an image source. Values of the **string** type: If only one value is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.<br>Values of the **string** type:<br>- **left**: leftmost in the horizontal direction.<br>- **right**: rightmost in the horizontal direction.<br>- **top**: top in the vertical direction.<br>- **bottom**: bottom in the vertical direction.<br>- **center**: center position.<br>Values of the **\<length>** type: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is 0 0 in px (**0px 0px**). If only one value is specified, the other one is **50%**.<br>Values of the **\<percentage>** type: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is 0% 0%. For the lower right corner, the value is **100% 100%**. If only one value is specified, the other one is **50%**.<br>Values of the **\<percentage>** type and **\<length>** type can be used together. |
| border-image-source<sup>7+</sup> | string | - | Border image of the specified element.<br>Example:<br>border-image-source: url("/common/images/border.png") |
| border-image-slice<sup>7+</sup> | <length>\|<percentage> | 0 | Padding of the image.<br>The attribute can have one to four values:<br>If you set only one value, it specifies the padding for four sides.<br>If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>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.<br>If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| border-image-width<sup>7+</sup> | <length>\|<percentage> | 0 | Width of the border image.<br>If you set only one value, it specifies the width for four sides.<br>If you set two values, the first value specifies the top and bottom width, and the second value specifies the left and right width.<br>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.<br>If you set four values, they respectively specify the width for top, right, bottom, and left sides (in clockwise order).|
| border-image-outset<sup>7+</sup> | <length>\|<percentage> | 0 | How far the border image can extend beyond the border box.<br>If you set only one value, it specifies the distance of the boarder image beyond the border on four sides.<br>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.<br>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.<br>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).|
| border-image-repeat<sup>7+</sup> | string | stretch | How the border image fills the border box.<br>**stretch**: stretches the image to fill the border box.<br>**repeat**: tiles the image to fill the border box.<br>**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. |
| border-image<sup>7+</sup> | string | - | Shorthand attribute. The options are as follows:<br>- Attributes of the image border. The parameters include **border-image-source**, **border-image-slice**, **border-image-width**, **border-image-outset**, and **border-image-repeat**, respectively meaning the padding, width of the border image, how far the border image can extend beyond the border box, and how the border image fills the border box. The default values are used if the parameters are not set.<br>- Gradient color border.<br> Example:<br> border-image: linear-gradient(red, yellow) 10px |
| border-image-outset<sup>7+</sup> | <length>\|<percentage> | 0 | How far the border image can extend beyond the border box.<br>If you set only one value, it specifies the distance of the boarder image beyond the border on four sides.<br>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.<br>When three values are specified, the first value specifies the distance between the upper border image and the border, the second value specifies the distance between the left and right border images and the border, and the third value specifies the distance between the lower border image and the border.<br>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).|
| border-image-repeat<sup>7+</sup> | string | stretch | How the border image fills the border box.<br>**stretch**: Stretches the image to fill the border box<br>**repeat**: Tiles the image to fill the border box.<br>**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.<br>|
| border-image<sup>7+</sup> | string | - | Shorthand attribute. The options are as follows:<br>- Attributes of the image border. The parameters include **border-image-source**, **border-image-slice**, **border-image-width**, **border-image-outset**, and **border-image-repeat**, which respectively indicate the padding, width of the border image, how far the border image can extend beyond the border box, and how the border image fills the border box. The default values are used if the parameters are not set.<br>- Gradient color border.<br> Example:<br> border-image: linear-gradient(red, yellow) 10px |
| box-sizing<sup>9+</sup> | string | border-box | Border type of the component.<br>**content-box**: standard box. Its width and height contain only the width and height of the content, and does not include the border and padding.<br>**border-box**: The width and height include the content, border, and padding, that is, the actual width of the component content area = width - (border + padding).|
...
...
@@ -77,10 +77,10 @@ You can set universal styles for components in the **style** attribute or **.css
> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
We provide a range of lifecycle callbacks for custom components, including **onInit**, **onAttached**, **onDetached**, **onLayoutReady**, **onDestroy**, **onShow**, and **onHide**. You can use these callbacks to manage the internal logic of your custom components. The following describes the times when the lifecycle callbacks are invoked.
A range of lifecycle callbacks are provided for custom components, including **onInit**, **onAttached**, **onDetached**, **onLayoutReady**, **onDestroy**, **onShow**, and **onHide**. You can use these callbacks to manage the internal logic of your custom components. The following describes the times when the lifecycle callbacks are invoked.
| Attribute | Type | Description | Invoked When |
...
...
@@ -13,7 +13,7 @@ We provide a range of lifecycle callbacks for custom components, including **onI
| onInit | Function | Custom component initialization | The custom component is created. This callback is invoked once.|
| onAttached | Function | Custom component loading | The custom component is added to the **\<Page>** component tree. When this callback is invoked, related data can be displayed during the lifecycle in scenarios such as image loading and animation playback.|
| onLayoutReady | Function | Component layout completion| Layout calculation, including content size and position adjustment, is complete for the custom component.|
| onDetached | Function | Custom component removal | The custom component is removed. It is usually used to stop animation or asynchronous logic execution.|
| onDetached | Function | Custom component detachment | The custom component is detached. It is usually used to stop animation or asynchronous logic execution. |
| onDestroy | Function | Custom component destruction | The custom component is destroyed. It is usually used to release resources. |
| onShow | Function | Page display of a custom component| The page where the custom component is located is displayed. |
| onHide | Function | Page hiding of a custom component| The page where the custom component is located is hidden. |
...
...
@@ -24,7 +24,7 @@ We provide a range of lifecycle callbacks for custom components, including **onI
| keyPoints | string | - | Yes| Point position of a group of key frames. The value of each frame is the distance proportion of the object along the path. The function is the same as that of **values** in the **animate** attribute.|
| path | string | - | Yes| Motion path. The syntax is the same as that of the **d** attribute of the **\<path>** component.|
| path | string | - | Yes| Motion path. The syntax is the same as that of the **d** attribute of the **\<path>** component.|
| rotate | [auto \| auto-reverse \|<number>] | auto | No| Rotation direction of an animation object.|
...
...
@@ -38,7 +38,7 @@ The **animate** attributes (**values** does not take effect) and the attributes
| path | string | No | Shape of the path.<br>The meanings of the letters are as follows:<br>- M = moveto<br>- L = lineto<br>- H = horizontal lineto<br>- V = vertical lineto<br>- C = curveto<br>- S = smooth curveto<br>- Q = quadratic Belzier curve<br>- T = smooth quadratic Belzier curveto<br>- A = elliptical Arc<br>- Z = closepath<br>Default value: **0**|
| startOffset | <length>\|<percentage> | Yes | Offset of the text start point relative to the path start point.<br>Default value: **0** |
| font-size | <length> | No | Font size.<br>Default value: **30px** |
| fill | <color> | No | Font fill color.<br>Default value: **black** |
| by | number | No | Attribute offset relative to the specified animation. By default, **from** is the original attribute value. |
| opacity | number | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.<br>Default value: **0**|
| fill-opacity | number | No | Font fill opacity.<br>Default value: **1.0** |
| stroke-width | number | No | Stroke width.<br>Default value: **1px** |
| stroke-opacity | number | No | Stroke opacity.<br>Default value: **1.0** |
| path | string | 0 | Shape of the path.<br>The meanings of the letters are as follows:<br>- M = moveto<br>- L = lineto<br>- H = horizontal lineto<br>- V = vertical lineto<br>- C = curveto<br>- S = smooth curveto<br>- Q = quadratic Belzier curve<br>- T = smooth quadratic Belzier curveto<br>- A = elliptical Arc<br>- Z = closepath<br>Default value: **0**|
| startOffset | <length>\|<percentage> | 0 | Offset of the text start point relative to the path start point.<br>Default value: **0** |
| fill | <color> | black | Font fill color.<br>Default value: **black** |
| by | number | - | Attribute offset relative to the specified animation. By default, **from** is the original attribute value. |
| opacity | number | 1 | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.<br>Default value: **0**|
| fill-opacity | number | 1.0 | Font fill opacity.<br>Default value: **1.0** |
The **\<ImageAnimator>** component enables images to be played frame by frame. The list of images to be played can be configured, and the duration of each image can be configured.
The **\<ImageAnimator>** component enables images to be played frame by frame. The list of images to be played as well as the duration of each image can be configured.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The state management module provides APIs for data storage, persistent data management, Ability data storage, and environment status required by applications. The APIs for Ability data storage are supported since API version 9.
> **NOTE**
>
>
> The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## AppStorage
...
...
@@ -16,14 +16,14 @@ Establishes two-way data binding between an attribute and this **LocalStorage**
| @Link | Returns two-way binding to this attribute if there is data with a given key. This means that attribute changes made by a variable or component will be synchronized to the **AppStorage**, and attribute changes made through the **AppStorage** will be synchronized to the variable or component.|
```ts
...
...
@@ -38,15 +38,15 @@ Works in a way similar to the **Link** API. If the current key is stored in the
| @Link | Returns the value corresponding to the key if the current key is stored in the **AppStorage**; creates and returns a **Link** instance corresponding to the default value if the key has not been created.|
```ts
...
...
@@ -61,15 +61,15 @@ Establishes one-way data binding with an attribute to update its status.
| @Prop | Returns one-way binding to an attribute with a given key if the attribute exists. This means that attribute changes made through the **AppStorage** will be synchronized to the variable or component, but attribute changes made by the variable or component will be synchronized to the **AppStorage**. The variable returned by this method is an immutable one, which is applicable both to the variable and immutable state attributes. If the attribute with the specified key does not exist, **undefined** is returned.|
| @Prop | Returns one-way binding to an attribute with a given key if the attribute exists; returns **undefined** otherwise. One-way binding means that attribute changes made through the **AppStorage** will be synchronized to the variable or component, but attribute changes made by the variable or component will not be synchronized to the **AppStorage**. This API returns immutable variables and is applicable to mutable and immutable state variables alike.|
```ts
letsimple=AppStorage.Prop('simpleProp')
...
...
@@ -83,16 +83,16 @@ Works in a way similar to the **Prop** API. If the current key is stored in the
| @Prop | Returns the value corresponding to the key if the current key is stored in the **AppStorage**; creates and returns a **Prop** instance corresponding to the default value otherwise.|
| @Prop | Returns the value corresponding to the key if the current key is stored in the **AppStorage**; creates and returns a **Prop** instance corresponding to the default value otherwise.|
```ts
letsimple=AppStorage.SetAndProp('simpleProp',121)
...
...
@@ -106,14 +106,14 @@ Checks whether the attribute corresponding to the specified key exists.
**Parameters**
| Name | Type | Mandatory| Description |
| -------- | ------ | --- | -------------- |
| propName | string | Yes | Key of the attribute.|
| Name | Type | Mandatory | Description |
| -------- | ------ | ---- | ------- |
| propName | string | Yes | Key of the attribute.|
**Return value**
| Type | Description |
| ------- | -------------------------- |
| Type | Description |
| ------- | ------------- |
| boolean | Returns whether the attribute exists.|
```ts
...
...
@@ -128,15 +128,15 @@ Obtains the value of the specified key.
| boolean | Updates the value of the attribute and returns **true** if an attribute that has the same name as the specified key exists; creates an attribute with the specified value as its default value and returns **false** otherwise. **undefined** and **null** are not allowed to return **true**.|
```ts
...
...
@@ -196,14 +196,14 @@ Deletes the key-value pair that matches the specified key.
| boolean | Updates the value of the attribute and returns **true** if an attribute that has the same name as the specified key exists; creates an attribute with the specified value as its default value and returns false otherwise. **undefined** and **null** are not allowed.|
```ts
...
...
@@ -418,14 +436,14 @@ Establishes two-way data binding between an attribute and this **LocalStorage**
| T | Returns two-way binding to this attribute if there is data with a given key. This means that attribute changes made by a variable or component will be synchronized to the **LocalStorage**, and attribute changes made through the **LocalStorage** will be synchronized to the variable or component. returns **undefined** if the attribute with the given key does not exist.|
```ts
...
...
@@ -441,15 +459,15 @@ Works in a way similar to the **Link** API.
| @Link | Returns the value corresponding to the key if the current key is stored in the **LocalStorage**; creates and returns a **Link** instance corresponding to the default value if the key has not been created.|
```ts
...
...
@@ -465,15 +483,15 @@ Establishes one-way data binding with an attribute to update its status.
| @Prop | Returns one-way binding to an attribute with a given key if the attribute exists; returns **undefined** otherwise. This means that attribute changes made through the **LocalStorage** will be synchronized to the variable or component, but attribute changes made by the variable or component will be synchronized to the **LocalStorage**. This API returns immutable variables and is applicable to mutable and immutable state variables. |
| @Prop | Returns one-way binding to an attribute with a given key if the attribute exists; returns **undefined** otherwise. One-way binding means that attribute changes made through the **LocalStorage** will be synchronized to the variable or component, but attribute changes made by the variable or component will not be synchronized to the **LocalStorage**. This API returns immutable variables and is applicable to mutable and immutable state variables alike. |
```ts
this.storage=newLocalStorage()
...
...
@@ -488,15 +506,15 @@ Works in a way similar to the **Prop** API.
| @Prop | Returns the value corresponding to the given key if the key is stored in the **LocalStorage**; creates and returns a **Prop** instance corresponding to the default value if the key has not been created.|
```ts
...
...
@@ -512,15 +530,15 @@ Deletes the key-value pair that matches the specified key.
| boolean | Returns **true** if the key-value pair exists and is successfully deleted; returns **false** if the key-value pair does not exist, fails to be deleted, or is being referenced by a state varaiable.|
| boolean | Returns **true** if the key-value pair exists and is successfully deleted; returns **false** if the key-value pair does not exist, fails to be deleted, or is being referenced by a state variable.|
| accessibilityEnabled | string | Whether to enable accessibility. |
| colorMode | ColorMode | Color mode. The options are as follows:<br>- **ColorMode.LIGHT**: light mode.<br>- **ColorMode.DARK**: dark mode. |
| fontScale | number | Font scale. |
| fontWeightScale | number | Font weight scale. |
| layoutDirection | LayoutDirection | Layout direction. The options are as follows:<br>- **LayoutDirection.LTR**: The direction is from left to right.<br>- **LayoutDirection.RTL**: The direction is from right to left. |
| languageCode | string | Current system language. The value is in lowercase, for example, **zh**. |
| accessibilityEnabled | string | Whether to enable accessibility. |
| colorMode | ColorMode | Color mode. The options are as follows:<br>- **ColorMode.LIGHT**: light mode.<br>- **ColorMode.DARK**: dark mode.|
| fontScale | number | Font scale. |
| fontWeightScale | number | Font weight scale. |
| layoutDirection | LayoutDirection | Layout direction. The options are as follows:<br>- **LayoutDirection.LTR**: The direction is from left to right.<br>- **LayoutDirection.RTL**: The direction is from right to left.|
| languageCode | string | Current system language. The value is in lowercase, for example, **zh**. |
| onDragStart(event: (event?: [DragEvent](#dragevent), extraParams?: string) =>[CustomBuilder](ts-types.md#custombuilder8)\|[DragItemInfo](#dragiteminfo) | No | Triggered when the component bound to the event is dragged for the first time.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.<br>Return value: object being dragged, which is used for prompts displayed when the object is dragged.<br>A drag event can be triggered by a 150 ms long press. If the duration of a long-press gesture is set to less than or equal to 150 ms, the callback for the long-press gesture takes precedence. Otherwise, the callback for the drag event takes precedence.|
| onDragEnter(event: (event?: [DragEvent](#dragevent), extraParams?: string) => void) | No | Triggered when the dragged item enters a valid drop target.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.<br>This event is valid only when the **onDrop** event is listened to.|
| onDragMove(event: (event?: [DragEvent](#dragevent), extraParams?: string) => void) | No | Triggered when the dragged item moves in a valid drop target.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.<br>This event is valid only when the **onDrop** event is listened to.|
| onDragLeave(event: (event?: [DragEvent](#dragevent), extraParams?: string) => void) | No | Triggered when the dragged item leaves a valid drop target.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.<br>This event is valid only when the **onDrop** event is listened to.|
| onDrop(event: (event?: [DragEvent](#dragevent), extraParams?: string) => void) | No | Triggered when the dragged item is dropped on a valid drop target.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.|
| onDragStart(event: (event?: [DragEvent](#dragevent), extraParams?: string) =>[CustomBuilder](ts-types.md#custombuilder8)\|[DragItemInfo](#dragiteminfo)) | No | Triggered when the component bound to the event is dragged for the first time.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.<br>Return value: object being dragged, which is used for prompts displayed when the object is dragged.<br>A drag event can be triggered by a 150 ms long press. If the duration of a long-press gesture is set to less than or equal to 150 ms, the callback for the long-press gesture takes precedence. Otherwise, the callback for the drag event takes precedence.|
| onDragEnter(event: (event?: [DragEvent](#dragevent), extraParams?: string) => void) | No | Triggered when the dragged item enters a valid drop target.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.<br>This event is valid only when the **onDrop** event is listened to.|
| onDragMove(event: (event?: [DragEvent](#dragevent), extraParams?: string) => void) | No | Triggered when the dragged item moves in a valid drop target.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.<br>This event is valid only when the **onDrop** event is listened to.|
| onDragLeave(event: (event?: [DragEvent](#dragevent), extraParams?: string) => void) | No | Triggered when the dragged item leaves a valid drop target.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.<br>This event is valid only when a listener for the **onDrop** event is enabled.|
| onDrop(event: (event?: [DragEvent](#dragevent), extraParams?: string) => void) | No | Triggered when the dragged item is dropped on a valid drop target.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.|
## DragItemInfo
...
...
@@ -27,9 +27,9 @@ A drag event is triggered when a component is dragged.
## extraParams
Provides additional information required for dragging an item.
Provides additional information required for dragging an item.
**extraParams** is a string converted from a JSON object. You can obtain the following attributes using the JSON object converted from **Json.parse**.
**extraParams** is a string converted from a JSON object. You can obtain the following attributes using the JSON object converted from **Json.parse**.
