| - | -- | -- | -- | -- | -
|---|---|---|---|---|
| - | -- | -- | -- | -- | -
| - | -- | -- | -- | -- | -
| - | -- | -- | -- | -- | -
| - | -- | -- | -- | -- | -
| - | -- | -- | -- | -- | -
|---|---|---|---|---|
| - | -- | -- | -- | -
- 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. - |
-
| - | -- | -- | -- | -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 or color of a specific border. To set the width or color, you need to set border-width or border-color for all the borders at the same time. - |
-
| - | -- | -- | -- | -Attribute to receptively 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. Both Internet and local image resources are supported. - |
-
| - | -
|
-- | -- | -
-
|
-
| - | -- | -- | -- | -Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically. - - |
-
| - | -
|
-- | -- | -
|
-
| - | -- | -- | -- | -Transparency 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 a child component. It is used as a shorthand attribute to set the flex-grow attribute of the parent component. - - |
-
| - | -- | -- | -- | -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. - - |
-
| - | -- - | -- | -- | -- - | -
| - | -- | -- | -- | -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. -
|
-
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
-
- huawei
-
-
- huawei
-
-
-```
-
-```
-/* xxx.css */
-.container {
- flex-direction: column;
- width: 100%;
- align-items: center;
-}
-.badge {
- width: 50%;
- margin-top: 100px;
-}
-.text1 {
- background-color: #f9a01e;
- font-size: 50px;
-}
-.text2 {
- background-color: #46b1e3;
- font-size: 50px;
-}
-```
-
-```
-// xxx.js
-export default {
- data:{
- badgeconfig:{
- badgeColor:"#0a59f7",
- textColor:"#ffffff",
- }
- }
-}
-```
-
-
-
diff --git a/en/application-dev/js-reference/basic-components.md b/en/application-dev/js-reference/basic-components.md
deleted file mode 100755
index 8d9f8b9633921dd8476408e83b721fb4276c8274..0000000000000000000000000000000000000000
--- a/en/application-dev/js-reference/basic-components.md
+++ /dev/null
@@ -1,55 +0,0 @@
-# Basic Components
-
-- **[button](button.md)**
-
-- **[chart](chart.md)**
-
-- **[divider](divider.md)**
-
-- **[image](image.md)**
-
-- **[image-animator](image-animator.md)**
-
-- **[input](input.md)**
-
-- **[label](label.md)**
-
-- **[marquee](marquee.md)**
-
-- **[menu](menu.md)**
-
-- **[option](option.md)**
-
-- **[picker](picker.md)**
-
-- **[picker-view](picker-view.md)**
-
-- **[piece](piece.md)**
-
-- **[progress](progress.md)**
-
-- **[qrcode](qrcode.md)**
-
-- **[rating](rating.md)**
-
-- **[search](search.md)**
-
-- **[select](select.md)**
-
-- **[slider](slider.md)**
-
-- **[span](span.md)**
-
-- **[switch](switch.md)**
-
-- **[text](text.md)**
-
-- **[textarea](textarea.md)**
-
-- **[toolbar](toolbar.md)**
-
-- **[toolbar-item](toolbar-item.md)**
-
-- **[toggle](toggle.md)**
-
-
diff --git a/en/application-dev/js-reference/basic-usage.md b/en/application-dev/js-reference/basic-usage.md
deleted file mode 100755
index 7d12eb70037314819e3b642e0b49a7d932cf2c81..0000000000000000000000000000000000000000
--- a/en/application-dev/js-reference/basic-usage.md
+++ /dev/null
@@ -1,56 +0,0 @@
-# Basic Usage
-
-- [Object](#en-us_topic_0000001058988954_section7681164881014)
-
-Custom components are existing components encapsulated based on service requirements. A custom component can be invoked multiple times in a project to improve the code readability. You can introduce a custom component to the host page through **element** as shown in the following code snippet:
-
-```
-
-
-```
-
-- The **name** attribute indicates the custom component name \(optional\), which is case-insensitive and is in lowercase by default. The **src** attribute indicates the **.hml** file path \(mandatory\) of the custom component. If **name** is not set, the **.hml** file name is used as the component name by default.
-- Event binding: Use **\(on|@\)**_child1_ in the custom component to bind a child component event. In the child component, use **this.$emit\('**_child1_**', \{params:'**_parameter to pass_**'\}\)** to trigger the bound event and pass the parameter value. In the parent component, call **bindParentVmMethod** and receive the parameter passed from the child component.
-
- > **NOTE:**
- >For child component events that are named in camel case, convert the names to kebab case when binding the events to the parent component. For example, use **@children-event** instead of **childrenEvent**: **@children-event="bindParentVmMethod"**.
-
-
-## Object
-
-
-
-
-- [Child Component](#en-us_topic_0000001058670746_section9288143101012)
-- [Attribute](#en-us_topic_0000001058670746_section2907183951110)
-- [Event](#en-us_topic_0000001058670746_section1379202884114)
-- [Style](#en-us_topic_0000001058670746_section5775351116)
-- [Example Code](#en-us_topic_0000001058670746_section16867208402)
-
-The **| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -- | -- | -
|---|---|---|---|---|
| - | -- | -- | -- | -- | -
| - | -- | -- | -- | -- | -
| - | -- | -- | -- | -Whether the font size changes with the system's font size settings. - - |
-
| - | -- | -- | -- | -- | -
| - | -- | -- | -- | -Font weight of the button. For details, see font-weight of the text component. - |
-
| - | -- | -- | -- | -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 of the internal icon of a circle button. The entire circle button is filled by default. - - |
-
| - | -- | -- | -- | -Height of the internal icon of a circle button. The entire circle button is filled by default. - - |
-
| - | -- | -- | -- | -Radius of a circle button or fillet radius of a capsule button. For a circle button, this style takes precedence over width and height in the common styles. - |
-
| - | -- | -- | -- | -
- 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. - |
-
| - | -- | -- | -- | -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 receptively 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. - - |
-
| - | -
|
-- | -- | -
|
-
| - | -- | -- | -- | -Transparency 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 a 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. - - |
-
| - | -- - | -- | -- | -- - | -
| - | -- | -- | -- | -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. -
|
-
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -- | -- | -
|---|---|---|---|---|
| - | -- | -- | -- | -
- 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. - |
-
| - | -- | -- | -- | -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 receptively 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. - - |
-
| - | -
|
-- | -- | -
|
-
| - | -- | -- | -- | -Transparency 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 a 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. - - |
-
| - | -- - | -- | -- | -- - | -
| - | -- | -- | -- | -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. -
|
-
| - | -- | -- | -
|---|---|---|
| - | -- | -Obtains the context of the drawing on a canvas. The parameter can be set only to 2d. The return value is a 2D drawing object that provides specific 2D drawing operations. For details, see section CanvasRenderingContext2D. - - |
-
| - | -- | -- | -
|---|---|---|
| - | -- | -Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1. - |
-
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -X-coordinate of the upper left corner of the rectangle stroke - |
-
| - | -- | -Y-coordinate of the upper left corner of the rectangle stroke - |
-
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -
|---|---|
| - | -Object that contains the text width. You can obtain the width by TextMetrics.width. - |
-
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -Style of line endpoints. Available values include: - - |
-
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -Text alignment mode. Available values include: - - - |
-
| - | -- | -- | -
|---|---|---|
| - | -- | -Source image. For details, see Image. - |
-
| - | -- | -Repetition mode. The value can be "repeat", "repeat-x", "repeat-y", or "no-repeat". - |
-
| - | -- | -
|---|---|
| - | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -Clockwise rotation angle. You can use Math.PI / 180 to convert the angle to a radian. - |
-
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -Global alpha value to set. The value ranges from 0.0 (completely transparent) to 1.0 (completely opaque). - |
-
| - | -- | -- | -
|---|---|---|
| - | -- | -Image resource. For details, see Image. - |
-
| - | -- | -X-coordinate of the upper left corner of the rectangle used to crop the source image. - |
-
| - | -- | -Y-coordinate of the upper left corner of the rectangle used to crop the source image. - |
-
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -X-coordinate of the upper left corner of the drawing area on the canvas. - |
-
| - | -- | -Y-coordinate of the upper left corner of the drawing area on the canvas. - |
-
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -
|---|---|
| - | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -ImageData object with the same width and height copied from the original ImageData object - |
-
| - | -- | -
|---|---|
| - | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -
|---|---|
| - | -ImageData object that contains pixels in the specified area on the canvas - |
-
| - | -- | -- | -
|---|---|---|
| - | -- | -An array describing the interval of alternate line segments and length of spacing - |
-
| - | -- | -
|---|---|
| - | -Interval of alternate line segments and the length of spacing - |
-
| - | -- | -- | -
|---|---|---|
| - | -- | -Dash line offset. The value is a floating point number starting from 0.0. - |
-
| - | -- | -- | -
|---|---|---|
| - | -- | -Shadow blur degree. A larger value indicates a more blurred shadow. The value is of the float type, and the default value is 0. - |
-
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -- | -- | -
|---|---|---|---|---|
| - | -- | -- | -- | -Chart type. Dynamic modification is not supported. Available values include: - - |
-
| - | -- | -- | -- | -Chart parameters. You must set parameters for bar charts and line charts. Parameter settings for gauge charts do not take effect. You can set the minimum value, maximum value, scale, and line width of the x-axis or y-axis, whether to display the x-axis and y-axis, and whether the line is smooth. Dynamic modification is not supported. - |
-
| - | -Array<ChartDataset> - |
-- | -- | -Data set. You must set data sets for bar charts and line charts. Data set for a gauge chart does not take effect. You can set multiple datasets and their background colors. - |
-
| - | -DataSegment | Array<DataSegment> - |
-- | -- | -Data structures used by progress, loading, and rainbow charts. -DataSegment is available for progress and loading charts. -Array<DataSegment> is available for rainbow charts. A maximum of nine DataSegment are supported in the array. - |
-
| - | -- | -- | -- | -Whether to enable the effects for progress and rainbow charts. - |
-
| - | -- | -- | -- | -- | -
| - | -- | -- | -- | -- | -
| - | -- | -- | -- | -Style class of a component, which is used to refer to a style table. - |
-
| - | -- | -- | -- | -Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs. - |
-
| - | -- | -- | -- | -Whether a component is disabled. If it is disabled, it cannot respond to user interaction. - |
-
| - | -- | -- | -- | -Attribute set for a component to facilitate data storage and reading. - |
-
| - | -- | -- | -- | -- | -
|---|---|---|---|---|
| - | -- | -- | -- | -- - | -
| - | -- | -- | -- | -Fill color. For line charts, the value indicates the gradient color to fill. - |
-
| - | -Array<number> | Array<Point>5+ - |
-- | -- | -- | -
| - | -- | -- | -- | -- - | -
| - | -- | -- | -- | -- | -
|---|---|---|---|---|
| - | -- | -- | -- | -- - | -
| - | -- | -- | -- | -- - | -
| - | -- | -- | -- | -- - | -
| - | -- | -- | -- | -- | -
| - | -- | -- | -- | -- | -
| - | -- | -- | -- | -- | -
|---|---|---|---|---|
| - | -- | -- | -- | -- | -
| - | -- | -- | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -- | -- | -
|---|---|---|---|---|
| - | -- | -- | -- | -Percentage of the current value to the total value. The value ranges from 0 to 100. - |
-
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -- | -- | -
|---|---|---|---|---|
| - | -- | -- - | -- | -- | -
| - | -- | -- - | -- | -Start angle of the scale bar for gaugeand rainbow charts, which starts from the direction of zero o'clock. The value ranges from 0 to 360. - |
-
| - | -- | -- - | -- | -Total length of the scale bar for gauge and rainbow charts. The value ranges from –360 to 360. A negative number indicates the anticlockwise direction. - |
-
| - | -- | -- | -- | -Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the position style in the common styles, and must be used together with center-y and radius. - |
-
| - | -- | -- | -- | -Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the position style in the common styles, and must be used together with center-x and radius. - |
-
| - | -- | -- | -- | -Radius of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the width and height in the common styles, and must be used together with center-x and center-y. - |
-
| - | -- | -- | -- | -Color of each section for the scale bar of the gauge component. -For example, colors: #ff0000, #00ff00. This style is supported by the gauge chart only. - |
-
| - | -- | -- | -- | -Weight of each section for the scale bar of the gauge component. -For example, weights: 2, 2. This style is supported by the gauge chart only. - |
-
| - | -- | -- | -- | -Font style of the description text. You can use Custom Font Styles. - |
-
| - | -- | -- | -- | -- | -
| - | -- | -- | -- | -
- 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. - |
-
| - | -- | -- | -- | -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 receptively 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. - - |
-
| - | -
|
-- | -- | -
|
-
| - | -- | -- | -- | -Transparency 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 a 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. - - |
-
| - | -- - | -- | -- | -- - | -
| - | -- | -- | -- | -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. -
|
-
-
-
-
-
- ```
-
- ```
- /* xxx.css */
- .container {
- flex-direction: column;
- justify-content: center;
- align-items: center;
- }
- .chart-region {
- height: 400px;
- width: 700px;
- }
- .chart-background {
- object-fit: fill;
- }
- .chart-data {
- width: 700px;
- height: 600px;
- }
- ```
-
- ```
- // xxx.js
- export default {
- data: {
- lineData: [
- {
- strokeColor: '#0081ff',
- fillColor: '#cce5ff',
- data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
- gradient: true,
- }
- ],
- lineOps: {
- xAxis: {
- min: 0,
- max: 20,
- display: false,
- },
- yAxis: {
- min: 0,
- max: 1000,
- display: false,
- },
- series: {
- lineStyle: {
- width: "5px",
- smooth: true,
- },
- headPoint: {
- shape: "circle",
- size: 20,
- strokeWidth: 5,
- fillColor: '#ffffff',
- strokeColor: '#007aff',
- display: true,
- },
- loop: {
- margin: 2,
- gradient: true,
- }
- }
- },
- },
- addData() {
- this.$refs.linechart.append({
- serial: 0,
- data: [Math.floor(Math.random() * 400) + 400]
- })
- }
- }
- ```
-
- 
-
-2. Bar chart
-
- ```
-
-
-
-
-
- ```
-
- ```
- /* xxx.css */
- .container {
- flex-direction: column;
- justify-content: center;
- align-items: center;
- }
- .data-region {
- height: 400px;
- width: 700px;
- }
- .data-background {
- object-fit: fill;
- }
- .data-bar {
- width: 700px;
- height: 400px;
- }
- ```
-
- ```
- // xxx.js
- export default {
- data: {
- barData: [
- {
- fillColor: '#f07826',
- data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628],
- },
- {
- fillColor: '#cce5ff',
- data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410],
- },
- {
- fillColor: '#ff88bb',
- data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657],
- },
- ],
- barOps: {
- xAxis: {
- min: 0,
- max: 20,
- display: false,
- axisTick: 10,
- },
- yAxis: {
- min: 0,
- max: 1000,
- display: false,
- },
- },
- }
- }
- ```
-
- 
-
-3. Gauge chart
-
- ```
-
-
-
- ```
-
- ```
- /* xxx.css */
- .container {
- flex-direction: column;
- justify-content: center;
- align-items: center;
- }
- .gauge-region {
- height: 400px;
- width: 400px;
- }
- .data-gauge {
- colors: #83f115, #fd3636, #3bf8ff;
- weights: 4, 2, 1;
- }
- ```
-
- 
-
-
diff --git a/en/application-dev/js-reference/common-styles.md b/en/application-dev/js-reference/common-styles.md
deleted file mode 100644
index e59f2b74618fb4883ade721465371ecc440f168d..0000000000000000000000000000000000000000
--- a/en/application-dev/js-reference/common-styles.md
+++ /dev/null
@@ -1,1571 +0,0 @@
-# Common Styles
-
-You can set component appearance in the **style** attribute or **.css** files.
-
-
-
-
- | - | -- | -- | -- | -- | -
|---|---|---|---|---|
| - | -- | -- | -- | -
- 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 receptively 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. - - - - |
-
| - | -- | -- | -- | -Transparency 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 a 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. - - |
-
| - | -- - | -- | -- | -- - | -
| - | -- | -- | -- | -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. -
|
-
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -Array of objects used to set animation style attributes. For details about style attributes, see Style attributes. - |
-
| - | -- | -- | -- | -
|---|---|---|---|
| - | -- | -- | -- | -
| - | -- | -- | -Time curve of the animation. For details about the supported types, see Available values of the easing attribute. - |
-
| - | -- | -- | -Delay for the animation start. The default value indicates no delay. - |
-
| - | -- | -- | -Number of times the animation will be played. number indicates a fixed number of playback operations, and Infinity indicates an unlimited number of playback operations. - |
-
| - | -- | -- | -Start and end styles of the animation -none: No style is applied to the target before or after the animation is executed. -forwards: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed. - |
-
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -
|---|---|
| - | -- | -
| - | -- | -
| - | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -Triggered when a user taps a non-dialog area to cancel the pop-up. - |
-
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
-
-```
-
-```
-/* xxx.css */
-.doc-page {
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-.btn-div {
- width: 100%;
- height: 200px;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-}
-.txt {
- color: #000000;
- font-weight: bold;
- font-size: 39px;
-}
-.dialog-main {
- width: 500px;
-}
-.dialog-div {
- flex-direction: column;
- align-items: center;
-}
-.inner-txt {
- width: 400px;
- height: 160px;
- flex-direction: column;
- align-items: center;
- justify-content: space-around;
-}
-.inner-btn {
- width: 400px;
- height: 120px;
- justify-content: space-around;
- align-items: center;
-}
-```
-
-```
-// xxx.js
-import prompt from '@system.prompt';
-
-export default {
- showDialog(e) {
- this.$element('simpledialog').show()
- },
- cancelDialog(e) {
- prompt.showToast({
- message: 'Dialog cancelled'
- })
- },
- cancelSchedule(e) {
- this.$element('simpledialog').close()
- prompt.showToast({
- message: 'Successfully cancelled'
- })
- },
- setSchedule(e) {
- this.$element('simpledialog').close()
- prompt.showToast({
- message: 'Successfully confirmed'
- })
- }
-}
-```
-
-
-
diff --git a/en/application-dev/js-reference/div.md b/en/application-dev/js-reference/div.md
deleted file mode 100755
index 350fb5b816e64f79194d6c768a626f291152169e..0000000000000000000000000000000000000000
--- a/en/application-dev/js-reference/div.md
+++ /dev/null
@@ -1,879 +0,0 @@
-# div
-
-- [Permission List](#en-us_topic_0000001059308532_section11257113618419)
-- [Child Component](#en-us_topic_0000001059308532_section9288143101012)
-- [Attribute](#en-us_topic_0000001059308532_section2907183951110)
-- [Event](#en-us_topic_0000001059308532_section77341431152917)
-- [Style](#en-us_topic_0000001059308532_section5775351116)
-- [Example Code](#en-us_topic_0000001059308532_section1241545010391)
-
-The **
-
-
-
-| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -- | -- | -
|---|---|---|---|---|
| - | -- | -- | -- | -Main axis direction of the flex container. Available values are as follows: - - |
-
| - | -- | -- | -- | -Whether flex items in the container are displayed in a single line or multiple lines. Currently, dynamic modification is not supported. Available values are as follows: - - |
-
| - | -- | -- | -- | -How items are aligned along the main axis of the current line in a flex container. Available values are as follows: -
|
-
| - | -- | -- | -- | -How items are aligned along the cross axis of the current line in a flex container. Available values are as follows: - - |
-
| - | -- | -- | -- | -Multi-line alignment mode when there is extra space in the cross axis. Available values are as follows: -
|
-
| - | -- | -- | -- | -Type of the view box of the element. Currently, dynamic modification is not supported. Available values are as follows: - - |
-
| - | -- | -- | -- | -Number of rows and columns in the current grid layout. If this attribute is not set, one row and one column are displayed by default. This attribute is valid only when display is set to grid. -For example, set grid-template-columns to: -
|
-
| - | -- | -- | -- | -Size of the gap between two consecutive rows or columns in a grid layout. You can also use grid-gap to set the same size of the gap between rows and columns. This attribute is valid only when display is set to grid. - |
-
| - | -- | -- | -- | -Start and end row numbers of the current item in the grid layout. This attribute is valid only when display of the parent component is grid. (The display attribute of the parent component can be set to grid only for the <div> container.) - |
-
| - | -- | -- | -- | -Start and end column numbers of the current item in the grid layout. This attribute is valid only when display of the parent component is grid. (The display attribute of the parent component can be set to grid only for the <div> container.) - |
-
| - | -- | -- | -- | -Using an algorithm to lay out the grid automatically. Available values are as follows: - - |
-
| - | -- | -- | -- | -
- 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. - |
-
| - | -- | -- | -- | -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 receptively 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. - - |
-
| - | -
|
-- | -- | -
|
-
| - | -- | -- | -- | -Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. - |
-
| - | -- - | -- | -- | -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 a 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. - - |
-
| - | -- - | -- | -- | -- - | -
| - | -- | -- | -- | -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. -
|
-
-
- ```
-
- ```
- /* xxx.css */
- .container {
- flex-direction: column;
- justify-content: center;
- align-items: center;
- width: 454px;
- height: 454px;
- }
- .flex-box {
- justify-content: space-around;
- align-items: center;
- width: 400px;
- height: 140px;
- background-color: #ffffff;
- }
- .flex-item {
- width: 120px;
- height: 120px;
- border-radius: 16px;
- }
- .color-primary {
- background-color: #007dff;
- }
- .color-warning {
- background-color: #ff7500;
- }
- .color-success {
- background-color: #41ba41;
- }
- ```
-
- 
-
-2. Flex wrap style
-
- ```
-
-
-
-
-
-
-
-
- ```
-
- ```
- /* xxx.css */
- .container {
- flex-direction: column;
- justify-content: center;
- align-items: center;
- width: 454px;
- height: 454px;
- }
- .flex-box {
- justify-content: space-around;
- align-items: center;
- flex-wrap: wrap;
- width: 300px;
- height: 250px;
- background-color: #ffffff;
- }
- .flex-item {
- width: 120px;
- height: 120px;
- border-radius: 16px;
- }
- .color-primary {
- background-color: #007dff;
- }
- .color-warning {
- background-color: #ff7500;
- }
- .color-success {
- background-color: #41ba41;
- }
- ```
-
- 
-
-3. Grid style
-
- ```
-
-
-
-
-
-
-
-
-
-
-
-
- ```
-
- ```
- /* xxx.css */
- .common {
- width: 400px;
- height: 400px;
- background-color: #ffffff;
- align-items: center;
- justify-content: center;
- margin: 24px;
- }
- .grid-parent {
- display: grid;
- grid-template-columns: 50% 50%;
- grid-columns-gap: 24px;
- grid-rows-gap: 24px;
- grid-template-rows: 50% 50%;
- }
- .grid-child {
- width: 100%;
- height: 100%;
- border-radius: 8px;
- }
- .grid-left-top {
- grid-row-start: 0;
- grid-column-start: 0;
- grid-row-end: 0;
- grid-column-end: 0;
- background-color: #3f56ea;
- }
- .grid-left-bottom {
- grid-row-start: 1;
- grid-column-start: 0;
- grid-row-end: 1;
- grid-column-end: 0;
- background-color: #00aaee;
- }
- .grid-right-top {
- grid-row-start: 0;
- grid-column-start: 1;
- grid-row-end: 0;
- grid-column-end: 1;
- background-color: #00bfc9;
- }
- .grid-right-bottom {
- grid-row-start: 1;
- grid-column-start: 1;
- grid-row-end: 1;
- grid-column-end: 1;
- background-color: #47cc47;
- }
- ```
-
- 
-
-
diff --git a/en/application-dev/js-reference/divider.md b/en/application-dev/js-reference/divider.md
deleted file mode 100755
index f7d345fc4a56a41a3443c390f1101fe5096d4fb4..0000000000000000000000000000000000000000
--- a/en/application-dev/js-reference/divider.md
+++ /dev/null
@@ -1,297 +0,0 @@
-# divider
-
-- [Permission List](#en-us_topic_0000001059340510_section11257113618419)
-- [Child Component](#en-us_topic_0000001059340510_section9288143101012)
-- [Attribute](#en-us_topic_0000001059340510_section2907183951110)
-- [Event](#en-us_topic_0000001059340510_section1398020714187)
-- [Style](#en-us_topic_0000001059340510_section5775351116)
-- [Example](#en-us_topic_0000001059340510_section230641814493)
-
-The **
-
-```
-
-```
-/* xxx.css */
-.container {
- margin: 20px;
- flex-direction:column;
- width:100%;
- height:100%;
- align-items:center;
-}
-.content{
- width:80%;
- height:40%;
- border:1px solid #000000;
- align-items: center;
- justify-content: center;
- flex-direction:column;
-}
-.divider {
- margin: 10px;
- color: #ff0000ff;
- stroke-width: 3px;
- line-cap: round;
-}
-```
-
-
-
diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001058988992.png b/en/application-dev/js-reference/figures/en-us_image_0000001058988992.png
deleted file mode 100644
index 612bc55f4aa5e832133801edf61cef01ffd1bc64..0000000000000000000000000000000000000000
Binary files a/en/application-dev/js-reference/figures/en-us_image_0000001058988992.png and /dev/null differ
diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001061872693.png b/en/application-dev/js-reference/figures/en-us_image_0000001061872693.png
deleted file mode 100644
index 91c55d3677922b76ac78c4e56c87ef90b5b31fc2..0000000000000000000000000000000000000000
Binary files a/en/application-dev/js-reference/figures/en-us_image_0000001061872693.png and /dev/null differ
diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001082052793.png b/en/application-dev/js-reference/figures/en-us_image_0000001082052793.png
deleted file mode 100644
index c582e42ac38081410fd21a43056f03a5880e800d..0000000000000000000000000000000000000000
Binary files a/en/application-dev/js-reference/figures/en-us_image_0000001082052793.png and /dev/null differ
diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001082299162.png b/en/application-dev/js-reference/figures/en-us_image_0000001082299162.png
deleted file mode 100644
index ee003430ca365892a94c0dbe3e7ba0879f83059d..0000000000000000000000000000000000000000
Binary files a/en/application-dev/js-reference/figures/en-us_image_0000001082299162.png and /dev/null differ
diff --git a/en/application-dev/js-reference/figures/en-us_image_0000001083086542.png b/en/application-dev/js-reference/figures/en-us_image_0000001083086542.png
deleted file mode 100644
index 85334a4946d270e5283251ca03dd59555db6f756..0000000000000000000000000000000000000000
Binary files a/en/application-dev/js-reference/figures/en-us_image_0000001083086542.png and /dev/null differ
diff --git a/en/application-dev/js-reference/figures/gif6.gif b/en/application-dev/js-reference/figures/gif6.gif
deleted file mode 100755
index da70e3d6c3f1392d7fc7071a83de165570f59559..0000000000000000000000000000000000000000
Binary files a/en/application-dev/js-reference/figures/gif6.gif and /dev/null differ
diff --git a/en/application-dev/js-reference/figures/label.png b/en/application-dev/js-reference/figures/label.png
deleted file mode 100755
index c87a5329f654a6a3cb3cb6b4c10bdfcd7fefc404..0000000000000000000000000000000000000000
Binary files a/en/application-dev/js-reference/figures/label.png and /dev/null differ
diff --git a/en/application-dev/js-reference/figures/menu13.gif b/en/application-dev/js-reference/figures/menu13.gif
deleted file mode 100755
index 3add1f5cd2a24cea8ec677824f5a42d29d2009bc..0000000000000000000000000000000000000000
Binary files a/en/application-dev/js-reference/figures/menu13.gif and /dev/null differ
diff --git a/en/application-dev/js-reference/figures/swiper.gif b/en/application-dev/js-reference/figures/swiper.gif
deleted file mode 100755
index cc55b1994ed10ce80ed357211caf89fd1cb34de7..0000000000000000000000000000000000000000
Binary files a/en/application-dev/js-reference/figures/swiper.gif and /dev/null differ
diff --git "a/en/application-dev/js-reference/figures/\345\212\250\347\224\273\346\240\267\345\274\217demo2.gif" "b/en/application-dev/js-reference/figures/\345\212\250\347\224\273\346\240\267\345\274\217demo2.gif"
deleted file mode 100755
index c3d337edf8e35352dcc9d9b9919019e1f7ec4d96..0000000000000000000000000000000000000000
Binary files "a/en/application-dev/js-reference/figures/\345\212\250\347\224\273\346\240\267\345\274\217demo2.gif" and /dev/null differ
diff --git a/en/application-dev/js-reference/framework.md b/en/application-dev/js-reference/framework.md
deleted file mode 100755
index 007412b87262ff391b06ec847d0ade7924ce8242..0000000000000000000000000000000000000000
--- a/en/application-dev/js-reference/framework.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Framework
-
-- **[File Organization](file-organization.md)**
-
-- **["js" Tag](js-tag.md)**
-
-- **[app.js](app-js.md)**
-
-- **[Syntax](syntax.md)**
-
-- **[Loading Images Based on DPI](loading-images-based-on-dpi.md)**
-
-
diff --git a/en/application-dev/js-reference/grid-col.md b/en/application-dev/js-reference/grid-col.md
deleted file mode 100644
index 635f4b759f4d42d5fbabf26c122a8fe3e882d56c..0000000000000000000000000000000000000000
--- a/en/application-dev/js-reference/grid-col.md
+++ /dev/null
@@ -1,692 +0,0 @@
-# grid-col
-
-- [Permission List](#en-us_topic_0000001063130862_section11257113618419)
-- [Child Component](#en-us_topic_0000001063130862_section9288143101012)
-- [Attribute](#en-us_topic_0000001063130862_section1976213199113)
-- [Style](#en-us_topic_0000001063130862_section1948816404128)
-- [Event](#en-us_topic_0000001063130862_section94351031102113)
-- [Example Code](#en-us_topic_0000001063130862_section2021865273710)
-
-The **
-
-| - | -- | -- | -- | -- | -
|---|---|---|---|---|
| - | -- | -- | -- | -Main axis direction of the container. Available values are as follows: - - |
-
| - | -- | -- | -- | -Whether items in the container are displayed in a single axis or multiple axes. Currently, dynamic modification is not supported. Available values are as follows: - - |
-
| - | -- | -- | -- | -How items are aligned along the main axis of the current row in the container. Available values are as follows: - - |
-
| - | -- | -- | -- | -How items are aligned along the cross axis of the current row in the container. Available values are as follows: - - |
-
| - | -- | -- | -- | -Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows: -
|
-
| - | -- | -- | -- | -Type of the view box of the element. Currently, dynamic modification is not supported. Text alignment mode. Available values include: - - |
-
| - | -- | -- | -- | -Number of rows and columns in the current grid layout. If this attribute is not set, one row and one column are displayed by default. This attribute is valid only when display is set to grid. -For example, set grid-template-columns to: -(1) 50px 100px 60px: There are three columns. The first column is 50 px, the second column is 100 px, and the third column is 60 px. -(2) 1fr 1fr 2fr: There are three columns, and the width allowed by the parent component is divided into four equal shares. The first column occupies one share, the second column occupies one share, and the third column occupies two shares. -(3) 30% 20% 50%: There are three columns. The first column occupies 30% of the total width allowed by the parent component, the second column occupies 20%, and the third column occupies 50%. -(4) repeat (2,100px): There are two columns. The first column is 100 px, and the second column is 100 px. -(5) auto 1fr 1fr: There are three columns. The first column is adaptive to the width required by its child components. The remaining space is divided into two equal shares, one share occupied by each of the two columns. - |
-
| - | -- | -- | -- | -Size of the gap between two consecutive rows or columns in a grid layout. You can also use grid-gap to set the same size of the gap between rows and columns. This attribute is valid only when display is set to grid. - |
-
| - | -- | -- | -- | -Start and end row numbers of the current item in the grid layout. This attribute is valid only when display of the parent component is grid. (The display attribute of the parent component can be set to grid only for the <div> container.) - |
-
| - | -- | -- | -- | -Start and end column numbers of the current item in the grid layout. This attribute is valid only when display of the parent component is grid. (The display attribute of the parent component can be set to grid only for the <div> container.) - |
-
| - | -- | -- | -- | -
- If this attribute is not set, the height required for the element content is used. - |
-
| - | -- | -- | -- | -Shorthand attribute to set all padding attributes. -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 receptively 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. - - |
-
| - | -
|
-- | -- | -
|
-
| - | -- | -- | -- | -Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. - |
-
| - | -- - | -- | -- | -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: - - - |
-
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
-
-
-
-
-
-
-
-
-
-```
-
-```
-/* index.css */
-.container {
- flex-direction: column;
- padding-top: 80px;
-}
-```
-
-```
-// index.js
-import prompt from '@system.prompt';
-export default {
- getCol(e) {
- this.$element('mygrid').getColumns(function (result) {
- prompt.showToast({
- message: e.target.id + ' result = ' + result,
- duration: 3000,
- });
- })
- },
- getColWidth(e) {
- this.$element('mygrid').getColumnWidth(function (result) {
- prompt.showToast({
- message: e.target.id + ' result = ' + result,
- duration: 3000,
- });
- })
- }
-}
-```
-
diff --git a/en/application-dev/js-reference/grid-components.md b/en/application-dev/js-reference/grid-components.md
deleted file mode 100644
index 151435d94ea9eb7ef9b877ec463319d5f6a4d870..0000000000000000000000000000000000000000
--- a/en/application-dev/js-reference/grid-components.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Grid Components
-
-- **[Basic Concepts](basic-concepts.md)**
-
-- **[grid-container](grid-container.md)**
-
-- **[grid-row](grid-row.md)**
-
-- **[grid-col](grid-col.md)**
-
-
diff --git a/en/application-dev/js-reference/grid-container.md b/en/application-dev/js-reference/grid-container.md
deleted file mode 100644
index be1acd6479b2cd4b39620fa01657f0dfbe758bb6..0000000000000000000000000000000000000000
--- a/en/application-dev/js-reference/grid-container.md
+++ /dev/null
@@ -1,680 +0,0 @@
-# grid-container
-
-- [Permission List](#en-us_topic_0000001062133103_section11257113618419)
-- [Child Component](#en-us_topic_0000001062133103_section9288143101012)
-- [Attribute](#en-us_topic_0000001062133103_section5248929161316)
-- [Style](#en-us_topic_0000001062133103_section16690243163414)
-- [Event](#en-us_topic_0000001062133103_section291933813509)
-- [Method](#en-us_topic_0000001062133103_section13156101584913)
-
-The **
- Element text
-
-
- Element text
-
- | - | -- | -- | -- | -- | -
|---|---|---|---|---|
| - | -- | -- | -- | -How items are aligned along the main axis of the current row in the container. Available values are as follows: - - |
-
| - | -- | -- | -- | -How items are aligned along the cross axis of the current row in the container. Available values are as follows: - - |
-
| - | -- | -- | -- | -Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows: -
|
-
| - | -- | -- | -- | -
- 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. - |
-
| - | -- | -- | -- | -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 or color of a specific border. To set the width or color, you need to set border-width or border-color for all the borders at the same time. - |
-
| - | -- | -- | -- | -Attribute to receptively 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. Both Internet and local image resources are supported. - |
-
| - | -
|
-- | -- | -
-
|
-
| - | -- | -- | -- | -Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically. - - |
-
| - | -
|
-- | -- | -
|
-
| - | -- | -- | -- | -Transparency 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 a child component. It is used as a shorthand attribute to set the flex-grow attribute of the parent component. - - |
-
| - | -- | -- | -- | -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. - - |
-
| - | -- - | -- | -- | -- - | -
| - | -- | -- | -- | -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. -
|
-
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -Returns the size-responsive type of the grid container, which can be xs, sm, md, or lg. - |
-
| - | -- | -- | -- | -- | -
|---|---|---|---|---|
| - | -- | -- | -- | -Whether flex items in the container are displayed in a single row or multiple rows. Currently, dynamic modification is not supported. Available values are as follows: - - |
-
| - | -- | -- | -- | -How items are aligned along the main axis of the current row in the container. Available values are as follows: - - |
-
| - | -- | -- | -- | -How items are aligned along the cross axis of the current row in the container. Available values are as follows: - - |
-
| - | -- | -- | -- | -Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows: -
|
-
| - | -- | -- | -- | -
- If this length attribute is not set, the length required for the element content is used. - |
-
| - | -- | -- | -- | -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 or color of a specific border. To set the width or color, you need to set border-width or border-color for all the borders at the same time. - |
-
| - | -- | -- | -- | -Attribute to receptively 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. Both Internet and local image resources are supported. - |
-
| - | -
|
-- | -- | -
-
|
-
| - | -- | -- | -- | -Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically. - - |
-
| - | -
|
-- | -- | -
|
-
| - | -- | -- | -- | -Transparency 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: - - - |
-
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -- | -- | -
|---|---|---|---|---|
| - | -- | -- | -- | -Image frame information. The frame information includes the image path, size, and location. Currently, the following image formats are supported: PNG and JPG. For details about ImageFrame, see Table 1. - - |
-
| - | -- | -- | -- | -Number of times that the frame animation is played. number indicates a fixed number of playback operations, and infinite indicates an unlimited number of playback operations. - |
-
| - | -- | -- | -- | -Playback sequence. The value false indicates that images are played from the first one to the last one, and true indicates that images are played from the last one to the first one. - |
-
| - | -- | -- | -- | -Whether the image size is fixed to the widget size. true: The image size is the same as the widget size. In this case, the width, height, top, and left attributes of the image are invalid. false: The width, height, top, and left attributes of each image must be set separately. - |
-
| - | -- | -- | -- | -Single video playback duration. The unit can be s (standing for seconds) or ms. The default unit is ms. If the value is 0, no image is played. The value change takes effect only at the start of the next cycle. - |
-
| - | -- | -- | -- | -Status of the frame animation after its playback is complete. Available values are as follows: - - |
-
| - | -- | -- | -- | -- | -
| - | -- | -- | -- | -- | -
| - | -- | -- | -- | -Style class of a component, which is used to refer to a style table. - |
-
| - | -- | -- | -- | -Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs. - |
-
| - | -- | -- | -- | -Whether a component is disabled. If it is disabled, it cannot respond to user interaction. - |
-
| - | -- | -- | -- | -Attribute set for a component to facilitate data storage and reading. - |
-
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -- | -- | -
|---|---|---|---|---|
| - | -- | -- | -- | -
- 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. - |
-
| - | -- | -- | -- | -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 receptively 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. - - |
-
| - | -
|
-- | -- | -
|
-
| - | -- | -- | -- | -Transparency 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 a 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. - - |
-
| - | -- - | -- | -- | -- - | -
| - | -- | -- | -- | -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. -
|
-
-
-```
-
-```
-/* xxx.css */
-.container {
- flex-direction: column;
- justify-content: center;
- align-items: center;
- left: 0px;
- top: 0px;
- width: 454px;
- height: 454px;
-}
-.animator {
- width: 70px;
- height: 70px;
-}
-.btn-box {
- width: 264px;
- height: 120px;
- flex-wrap: wrap;
- justify-content: space-around;
- align-items: center;
-}
-.btn {
- border-radius: 8px;
- width: 120px;
- margin-top: 8px;
-}
-```
-
-```
-//xxx.js
-export default {
- data: {
- frames: [
- {
- src: "/common/asserts/heart78.png",
- },
- {
- src: "/common/asserts/heart79.png",
- },
- {
- src: "/common/asserts/heart80.png",
- },
- {
- src: "/common/asserts/heart81.png",
- },
- {
- src: "/common/asserts/heart82.png",
- },
- {
- src: "/common/asserts/heart83.png",
- },
- {
- src: "/common/asserts/heart84.png",
- },
- {
- src: "/common/asserts/heart85.png",
- },
- {
- src: "/common/asserts/heart86.png",
- },
- {
- src: "/common/asserts/heart87.png",
- },
- {
- src: "/common/asserts/heart88.png",
- },
- {
- src: "/common/asserts/heart89.png",
- },
- {
- src: "/common/asserts/heart90.png",
- },
- {
- src: "/common/asserts/heart91.png",
- },
- {
- src: "/common/asserts/heart92.png",
- },
- {
- src: "/common/asserts/heart93.png",
- },
- {
- src: "/common/asserts/heart94.png",
- },
- {
- src: "/common/asserts/heart95.png",
- },
- {
- src: "/common/asserts/heart96.png",
- },
- ],
- },
- handleStart() {
- this.$refs.animator.start();
- },
- handlePause() {
- this.$refs.animator.pause();
- },
- handleResume() {
- this.$refs.animator.resume();
- },
- handleStop() {
- this.$refs.animator.stop();
- },
-};
-```
-
-
-
diff --git a/en/application-dev/js-reference/image.md b/en/application-dev/js-reference/image.md
deleted file mode 100755
index 52c5ae89dcf99254d61e674836457997bcb0d4c1..0000000000000000000000000000000000000000
--- a/en/application-dev/js-reference/image.md
+++ /dev/null
@@ -1,706 +0,0 @@
-# image
-
-- [Child Component](#en-us_topic_0000001058670744_section9288143101012)
-- [Attribute](#en-us_topic_0000001058670744_section2907183951110)
-- [Event](#en-us_topic_0000001058670744_section3892191911214)
-- [Style](#en-us_topic_0000001058670744_section45171131134215)
-
-The **
-
-
-
-
-
-| - | -- | -- | -- | -- | -
|---|---|---|---|---|
| - | -- | -- | -- | -Image scale type. For details about available values, see Types of the object-fit style. The SVG format is not supported. - |
-
| - | -- | -- | -- | -Whether image orientation changes with the text direction. The SVG format is not supported. - |
-
| - | -- | -- | -- | -Whether the <image> component adapts to the image source size when the width and height are not set. If this attribute is set to true, the object-fit attribute does not take effect. SVG images do not support this attribute. - |
-
| - | -- | -- | -- | -
- 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. - |
-
| - | -- | -- | -- | -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 receptively 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. - - |
-
| - | -
|
-- | -- | -
|
-
| - | -- | -- | -- | -Transparency of an element. The value ranges from 0 to 1. 1 indicates opaque, and 0 indicates 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 a 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. - - |
-
| - | -- - | -- | -- | -- - | -
| - | -- | -- | -- | -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. -
|
-
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -A one-dimensional array of color values. The values range from 0 to 255. - |
-
| - | -- | -- | -
|---|---|---|
| - | -- | -Triggered when the checked status of the checkbox or radio button changes. - |
-
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
|---|---|---|
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -
| - | -- | -- | -- | -- | -
|---|---|---|---|---|
| - | -- | -- | -- | -- | -
| - | -- | -- | -- | -- | -
| - | -- | -- | -- | -Whether the font size changes with the system's font size settings. - - |
-
| - | -- | -- | -- | -Font weight of the button. For details, see font-weight of the text component. - |
-
| - | -- | -- | -- | -- | -
| - | -- | -- | -- | -- | -
| - | -- | -- | -- | -Font family of the button, 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. - |
-
| - | -- | -- | -- | -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 receptively 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. - - |
-
| - | -
|
-- | -- | -
|
-
| - | -- | -- | -- | -Transparency 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 a 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. - - |
-
| - | -- - | -- | -- | -- - | -
| - | -- | -- | -- | -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. -
|
-
| - | -- | -- | -
|---|---|---|
| - | -- | -Object that is exposed in the app.js file and obtained by this.$app.$def. - - |
-
| - | -- | -- | -
|---|---|---|
| - | -- | -Data model of the page. If the attribute is of the function type, the return value must be of the object type. The attribute name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid). -Do not use this attribute and private or public at the same time. - |
-
| - | -- | -DOM elements or child component instances that have registered the ref attribute. For example code, see Obtaining a DOM element. - |
-
| - | -- | -Data model of the page. Private data attribute can be modified only on the current page. - |
-
| - | -- | -Data model of the page. Behaviors of public data attributes are the same as those of the data attribute. - |
-
| - | -- | -Used for communication between components. This attribute can be transferred to components via <tag xxxx='value'>. A props name must be in lowercase and cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid). Currently, props does not support functions. For details, see Custom Components. - |
-
| - | -- | -Used for pre-processing an object for reading and setting. The result is cached. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words. For details, see Custom Components. - |
-
| - | -- | -- | -- | -
|---|---|---|---|
| - | -- | -- - | -- - - | -
| - | -- | -- | -- - - | -
| - | -- | -- | -- | -
|---|---|---|---|
| - | -- | -- | -Obtains the component with a specified ID. If no ID is specified, the root component is returned. For example code, see Obtaining a DOM element. - - - - |
-
| - | -- | -- | -Obtains the root ViewModel instance. For example code, see Obtaining the ViewModel. - |
-
| - | -- | -- | -Obtains the parent ViewModel instance. For example code, see Obtaining the ViewModel. - |
-
| - | -- | -- | -Obtains the ViewModel instance of a custom child component with a specified ID. For example code, see Obtaining the ViewModel. - -this.$child('xxx'): Obtain the ViewModel instance of a custom child component whose ID is xxx. - |
-
| - | -- | -- | -- | -
|---|---|---|---|
| - | -- | -
- callback: function name. The callback has two parameters. The first one is the new attribute value, and the second is the original value. - |
- Listens for attribute changes. If the value of the data attribute changes, the bound event is triggered. For details, see Custom Components. - - - |
-
-
- ```
-
- ```
- // index.js
- export default {
- data: {
- images: [
- { src: '/common/frame1.png' },
- { src: '/common/frame2.png' },
- { src: '/common/frame3.png' },
- ],
- },
- handleClick() {
- const animator = this.$refs.animator; // Obtain the DOM element whose $refs attribute is animator.
- const state = animator.getState();
- if (state === 'paused') {
- animator.resume();
- } else if (state === 'stopped') {
- animator.start();
- } else {
- animator.pause();
- }
- },
- };
- ```
-
-2. Call **$element** to obtain a DOM element.
-
- ```
-
-
-
- ```
-
- ```
- // index.js
- export default {
- data: {
- images: [
- { src: '/common/frame1.png' },
- { src: '/common/frame2.png' },
- { src: '/common/frame3.png' },
- ],
- },
- handleClick() {
- const animator = this.$element('animator'); // Obtain the DOM element whose ID is animator.
- const state = animator.getState();
- if (state === 'paused') {
- animator.resume();
- } else if (state === 'stopped') {
- animator.start();
- } else {
- animator.pause();
- }
- },
- };
- ```
-
-
-## Obtaining the ViewModel
-
-The following shows files of the root page:
-
-```
-
-
-
-```
-
-```
-// root.js
-export default {
- data: {
- text: 'I am a root!',
- },
-}
-```
-
-Customize the parent component.
-
-```
-
-
- {{text}}
-
-
- Click this parent component
- Hello parent component!
-
-```
-
-```
-// parent.js
-export default {
- data: {
- show: false,
- text: 'I am the parent component!',
- },
- parentClicked () {
- this.show = !this.show;
- console.info('parent component get parent text');
- console.info(`${this.$parent().text}`);
- console.info("The parent component gets the child function.");
- console.info(`${this.$child('selfDefineChild').childClicked()}`);
- },
-}
-```
-
-Customize the child component.
-
-```
-
-
- Child component clicked
- Hello child component
-
-```
-
-```
-// child.js
-export default {
- data: {
- show: false,
- text: 'I am the child component!',
- },
- childClicked () {
- this.show = !this.show;
- console.info('child component get parent text');
- console.info('${this.$parent().text}');
- console.info('child component get root text');
- console.info('${this.$root().text}');
- },
-}
-```
-
-## Lifecycle Functions
-
-- **Page lifecycle**
-
-
-
- | - | -- | -- | -- | -- | -- | -
|---|---|---|---|---|---|
| - | -- | -- | -- | -- | -- | -
| - | -- | -- | -- | -- | -- | -
| + | ++ | ++ | +
|---|---|---|
| + | +string | Color enumeration values + |
++ + | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Whether the font size changes with the system's font size settings. + + |
+
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Font weight of the button. For details, see font-weight of the text component. + |
+
| + | ++ | ++ | ++ | +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 of the internal icon of a circle button. The entire circle button is filled by default. + + |
+
| + | ++ | ++ | ++ | +Height of the internal icon of a circle button. The entire circle button is filled by default. + + |
+
| + | ++ | ++ | ++ | +Radius of a circle button or fillet radius of a capsule button. For a circle button, this style takes precedence over width and height in the common styles. + |
+
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Whether the font size changes with the system's font size settings. + |
+
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Font weight of the arc button. For details, see font-weight of the text component. + |
+
| + | ++ | ++ | ++ | +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. + |
+
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | +Chart type. Dynamic modification is not supported. Available values include: + + |
+
| + | ++ | ++ | ++ | +Chart parameters. You must set parameters for bar charts and line charts. Parameter settings for gauge charts do not take effect. You can set the minimum value, maximum value, scale, and line width of the x-axis or y-axis, whether to display the x-axis and y-axis, and whether the line is smooth. Dynamic modification is not supported. + |
+
| + | +Array<ChartDataset> + |
++ | ++ | +Data set. You must set data sets for bar charts and line charts. Data set for a gauge chart does not take effect. You can set multiple datasets and their background colors. + |
+
| + | +DataSegment | Array<DataSegment> + |
++ | ++ | +Data structures used by progress, loading, and rainbow charts. +DataSegment is available for progress and loading charts. +Array<DataSegment> is available for rainbow charts. A maximum of nine DataSegment are supported in the array. + + |
+
| + | ++ | ++ | ++ | +Whether to enable the effects for progress and rainbow charts. + + |
+
| + | ++ | ++ | ++ | +Animation duration for expanding a rainbow chart, in milliseconds. + + |
+
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ + | +
| + | ++ | ++ | ++ | +Fill color. For line charts, the value indicates the gradient color to fill. + |
+
| + | +Array<number> | Array<Point>5+ + |
++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ + | +
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ + | +
| + | ++ | ++ | ++ | ++ + | +
| + | ++ | ++ | ++ | ++ + | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | +Percentage of the current value to the total value. The value ranges from 0 to 100. + |
+
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ + | ++ | ++ | +
| + | ++ | ++ + | ++ | +Start angle of the scale bar for gauge and rainbow charts, which starts from the direction of zero o'clock. The value ranges from 0 to 360. + |
+
| + | ++ | ++ + | ++ | +Total length of the scale bar for gauge and rainbow charts. The value ranges from –360 to 360. A negative number indicates the anticlockwise direction. + |
+
| + | ++ | ++ | ++ | +Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the position style in the common styles, and must be used together with center-y and radius. This style is supported by the gauge chart only. + |
+
| + | ++ | ++ | ++ | +Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the position style in the common styles, and must be used together with center-x and radius. This style is supported by the gauge chart only. + |
+
| + | ++ | ++ | ++ | +Radius of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the width and height in the common styles, and must be used together with center-x and center-y. This style is supported by the gauge chart only. + |
+
| + | ++ | ++ | ++ | +Color of each section for the scale bar of the gauge component. +For example, colors: #ff0000, #00ff00. This style is supported by the gauge chart only. + |
+
| + | ++ | ++ | ++ | +Weight of each section for the scale bar of the gauge component. +For example, weights: 2, 2. This style is supported by the gauge chart only. + |
+
| + | ++ | ++ | ++ | +Font style of the description text. You can use Custom Font Styles. + |
+
| + | ++ | ++ | ++ | ++ | +
+
+
+
+
+ ```
+
+ ```
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+ .chart-region {
+ height: 400px;
+ width: 700px;
+ }
+ .chart-background {
+ object-fit: fill;
+ }
+ .chart-data {
+ width: 700px;
+ height: 600px;
+ }
+ button {
+ width: 100%;
+ height: 50px;
+ background-color: #F4F2F1;
+ text-color: #0C81F3;
+ }
+ ```
+
+ ```
+ // xxx.js
+ export default {
+ data: {
+ lineData: [
+ {
+ strokeColor: '#0081ff',
+ fillColor: '#cce5ff',
+ data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
+ gradient: true,
+ }
+ ],
+ lineOps: {
+ xAxis: {
+ min: 0,
+ max: 20,
+ display: false,
+ },
+ yAxis: {
+ min: 0,
+ max: 1000,
+ display: false,
+ },
+ series: {
+ lineStyle: {
+ width: "5px",
+ smooth: true,
+ },
+ headPoint: {
+ shape: "circle",
+ size: 20,
+ strokeWidth: 5,
+ fillColor: '#ffffff',
+ strokeColor: '#007aff',
+ display: true,
+ },
+ loop: {
+ margin: 2,
+ gradient: true,
+ }
+ }
+ },
+ },
+ addData() {
+ this.$refs.linechart.append({
+ serial: 0,
+ data: [Math.floor(Math.random() * 400) + 400]
+ })
+ }
+ }
+ ```
+
+ 
+
+2. Bar chart
+
+ ```
+
+
+
+
+
+ ```
+
+ ```
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+ .data-region {
+ height: 400px;
+ width: 700px;
+ }
+ .data-background {
+ object-fit: fill;
+ }
+ .data-bar {
+ width: 700px;
+ height: 400px;
+ }
+ ```
+
+ ```
+ // xxx.js
+ export default {
+ data: {
+ barData: [
+ {
+ fillColor: '#f07826',
+ data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628],
+ },
+ {
+ fillColor: '#cce5ff',
+ data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410],
+ },
+ {
+ fillColor: '#ff88bb',
+ data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657],
+ },
+ ],
+ barOps: {
+ xAxis: {
+ min: 0,
+ max: 20,
+ display: false,
+ axisTick: 10,
+ },
+ yAxis: {
+ min: 0,
+ max: 1000,
+ display: false,
+ },
+ },
+ }
+ }
+ ```
+
+ 
+
+3. Gauge chart
+
+ ```
+
+
+
+ ```
+
+ ```
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+ .gauge-region {
+ height: 400px;
+ width: 400px;
+ }
+ .data-gauge {
+ colors: #83f115, #fd3636, #3bf8ff;
+ weights: 4, 2, 1;
+ }
+ ```
+
+ 
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-divider.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-divider.md
new file mode 100644
index 0000000000000000000000000000000000000000..13b19f2471c581d8865972d90050624cc9888e60
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-divider.md
@@ -0,0 +1,246 @@
+# divider
+
+The **
+
+ | + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | +Whether to use the vertical divider. The default value is false, indicating that the horizontal divider is used. + |
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ margin: 20px;
+ flex-direction:column;
+ width:100%;
+ height:100%;
+ align-items:center;
+}
+.content{
+ width:80%;
+ height:40%;
+ border:1px solid #000000;
+ align-items: center;
+ justify-content: center;
+ flex-direction:column;
+}
+.divider {
+ margin: 10px;
+ color: #ff0000ff;
+ stroke-width: 3px;
+ line-cap: round;
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image-animator.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image-animator.md
new file mode 100644
index 0000000000000000000000000000000000000000..d9e66164ffedfce435696f233bca0f32046fe4c5
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image-animator.md
@@ -0,0 +1,418 @@
+# image-animator
+
+The **
+
+| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | +Image frame information. The frame information includes the image path, size, and location. Currently, the following image formats are supported: PNG and JPG. For details about ImageFrame, see Table 1. + NOTE:
+Set this attribute using data binding, for example, images = {{images}}. Declare the corresponding variable images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}] in the JavaScript. +Declare the variable images: [{src: "/common/heart-rate01.png", duration: "100"}, {src: "/common/heart-rate02.png", duration: "200"}] in the JavaScript. You can set the duration (in milliseconds) of each image frame. 6+ + |
+
| + | ++ | ++ | ++ | +Whether to enable pre-decoding. The default value is 0, indicating that pre-decoding is disabled. If this parameter is set to 2, the last two images are loaded to the cache in advance to improve the performance when the current page is played. + |
+
| + | ++ | ++ | ++ | +Number of times that the frame animation is played. number indicates a fixed number of playback operations, and infinite indicates an unlimited number of playback operations. + |
+
| + | ++ | ++ | ++ | +Playback sequence. The value false indicates that images are played from the first one to the last one, and true indicates that images are played from the last one to the first one. + |
+
| + | ++ | ++ | ++ | +Whether the image size is fixed to the widget size. true: The image size is the same as the widget size. In this case, the width, height, top, and left attributes of the image are invalid. false: The width, height, top, and left attributes of each image must be set separately. + |
+
| + | ++ | ++ | ++ | +Single video playback duration. The unit can be s (standing for seconds) or ms. The default unit is ms. If the value is 0, no image is played. The value change takes effect only at the start of the next cycle. If image-specific durations have been set, the settings of this attribute do not take effect. + |
+
| + | ++ | ++ | ++ | +Status of the frame animation after its playback is complete. Available values are as follows: + + |
+
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ left: 0px;
+ top: 0px;
+ width: 454px;
+ height: 454px;
+}
+.animator {
+ width: 70px;
+ height: 70px;
+}
+.btn-box {
+ width: 264px;
+ height: 120px;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ align-items: center;
+}
+.btn {
+ border-radius: 8px;
+ width: 120px;
+ margin-top: 8px;
+}
+```
+
+```
+//xxx.js
+export default {
+ data: {
+ frames: [
+ {
+ src: "/common/asserts/heart78.png",
+ },
+ {
+ src: "/common/asserts/heart79.png",
+ },
+ {
+ src: "/common/asserts/heart80.png",
+ },
+ {
+ src: "/common/asserts/heart81.png",
+ },
+ {
+ src: "/common/asserts/heart82.png",
+ },
+ {
+ src: "/common/asserts/heart83.png",
+ },
+ {
+ src: "/common/asserts/heart84.png",
+ },
+ {
+ src: "/common/asserts/heart85.png",
+ },
+ {
+ src: "/common/asserts/heart86.png",
+ },
+ {
+ src: "/common/asserts/heart87.png",
+ },
+ {
+ src: "/common/asserts/heart88.png",
+ },
+ {
+ src: "/common/asserts/heart89.png",
+ },
+ {
+ src: "/common/asserts/heart90.png",
+ },
+ {
+ src: "/common/asserts/heart91.png",
+ },
+ {
+ src: "/common/asserts/heart92.png",
+ },
+ {
+ src: "/common/asserts/heart93.png",
+ },
+ {
+ src: "/common/asserts/heart94.png",
+ },
+ {
+ src: "/common/asserts/heart95.png",
+ },
+ {
+ src: "/common/asserts/heart96.png",
+ },
+ ],
+ },
+ handleStart() {
+ this.$refs.animator.start();
+ },
+ handlePause() {
+ this.$refs.animator.pause();
+ },
+ handleResume() {
+ this.$refs.animator.resume();
+ },
+ handleStop() {
+ this.$refs.animator.stop();
+ },
+};
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image.md
new file mode 100644
index 0000000000000000000000000000000000000000..6930c23b215667a05ab583aef8a8927d1bacc6d4
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image.md
@@ -0,0 +1,242 @@
+# image
+
+The **
+
+
+
+
+
+| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | +Image scale type. For details about available values, see Types of the object-fit style. The SVG format is not supported. + |
+
| + | ++ | ++ | ++ | +Whether image orientation changes with the text direction. The SVG format is not supported. + |
+
| + | ++ | ++ | ++ | +Whether the <image> component adapts to the image source size when the width and height are not set. If this attribute is set to true, the object-fit attribute does not take effect. SVG images do not support this attribute. + |
+
| + | ++ | ++ | ++ | +Position of an image in the component. + +1. Pixels. For example, 15px 15px indicates the moving position along the x-axis or y-axis. +2. Characters. Optional values are as follows: + + |
+
+
+
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+.selects{
+ margin-top: 20px;
+ width:300px;
+ border:1px solid #808080;
+ border-radius: 10px;
+}
+```
+
+```
+// xxx.js
+export default {
+ data: {
+ fit:"cover",
+ fits: ["cover", "contain", "fill", "none", "scale-down"],
+ },
+ change_fit(e) {
+ this.fit = e.newValue;
+ },
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-input.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-input.md
new file mode 100644
index 0000000000000000000000000000000000000000..6a7ba08e4d91bbb515583425f844f2d357543dff
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-input.md
@@ -0,0 +1,606 @@
+# input
+
+The **| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | +Type of the input component. Available values include text, email, date, time, number, password, button, checkbox, and radio. +The text, email, date, time, number, and password types can be dynamically switched and modified. +The button, checkbox, and radio types cannot be dynamically modified. Available values include: +
|
+
| + | ++ | ++ | ++ | +Whether the <input> component is selected. This attribute is valid only when type is set to checkbox or radio. + |
+
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Value of the input component. When type is radio, this attribute is mandatory and the value must be unique for radio buttons with the same name. + |
+
| + | ++ | ++ | ++ | +Content of the hint text. This attribute is available only when the component type is set to text, email, date, time, number, or password. + |
+
| + | ++ | ++ | ++ | +Maximum number of characters that can be entered in the input box. If no value is specified, the number of characters is not limited. + |
+
| + | ++ | ++ | ++ | +Dynamic modification is not supported. + +
|
+
| + | ++ | ++ | ++ | +Icon resource path before text input. This icon does not support click events and is unavailable for button, checkbox, and radio types. The supported icon image formats are JPG, PNG, and SVG. + |
+
| + | ++ | ++ | ++ | +Whether to display the character counter for an input box. This attribute takes effect only when maxlength is set. + |
+
| + | +Array<MenuOption> + |
++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ + | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Whether to display the icon at the end of the password text box. The setting is valid only when type is set to password. + |
+
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Whether the font size changes with the system's font size settings. + + |
+
| + | ++ | ++ | ++ | +Color of the hint text in the single-line text box. This attribute is available when the component type is set to text, email, date, time, number, or password. + |
+
| + | ++ | ++ | ++ | +Font weight of the single-line text box or button. For details, see font-weight of the text component. + |
+
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | +Triggered when the checked status of the checkbox or radio button changes. + |
+
+
+
+
+
+ ```
+
+ ```
+ /* xxx.css */
+ .content {
+ width: 60%;
+ flex-direction: column;
+ align-items: center;
+ }
+ .input {
+ placeholder-color: gray;
+ }
+ .button {
+ background-color: gray;
+ margin-top: 20px;
+ }
+ ```
+
+ ```
+ // xxx.js
+ import prompt from '@system.prompt'
+ export default {
+ change(e){
+ prompt.showToast({
+ message: "value: " + e.value,
+ duration: 3000,
+ });
+ },
+ enterkeyClick(e){
+ prompt.showToast({
+ message: "enterkey clicked",
+ duration: 3000,
+ });
+ },
+ buttonClick(e){
+ this.$element("input").showError({
+ error: 'error text'
+ });
+ },
+ }
+ ```
+
+ 
+
+2. Common button
+
+ ```
+
+
+ ```
+
+ ```
+ /* xxx.css */
+ .div-button {
+ flex-direction: column;
+ align-items: center;
+ }
+ .button {
+ margin-top: 30px;
+ width: 280px;
+ }
+ ```
+
+ 
+
+3. Check box
+
+ ```
+
+
+
+
+ ```
+
+ ```
+ /* xxx.css */
+ .content{
+ width: 100%;
+ height: 200px;
+ align-items: center;
+ justify-content: center;
+ }
+ ```
+
+ ```
+ // xxx.js
+ import prompt from '@system.prompt'
+ export default {
+ checkboxOnChange(e) {
+ prompt.showToast({
+ message:'checked: ' + e.checked,
+ duration: 3000,
+ });
+ }
+ }
+ ```
+
+ 
+
+4. Radio button
+
+ ```
+
+
+
+
+
+
+ ```
+
+ ```
+ /* xxx.css */
+ .content{
+ width: 100%;
+ height: 200px;
+ justify-content: center;
+ align-items: center;
+ }
+ ```
+
+ ```
+ // xxx.js
+ import prompt from '@system.prompt'
+ export default {
+ onRadioChange(inputValue, e) {
+ if (inputValue === e.value) {
+ prompt.showToast({
+ message: 'The chosen radio is ' + e.value,
+ duration: 3000,
+ });
+ }
+ }
+ }
+ ```
+
+ 
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-label.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-label.md
new file mode 100644
index 0000000000000000000000000000000000000000..6ede9ae8d3e11d7ede0adbe45f10e08658e709af
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-label.md
@@ -0,0 +1,300 @@
+# label
+
+The **| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Whether the text size changes with the system's font size settings. + + |
+
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Font style. Available values are as follows: + + |
+
| + | ++ | ++ | ++ | +Font width. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a larger font width. + +The value of the string type can be lighter, normal, bold, or bolder. + |
+
| + | ++ | ++ | ++ | +Text modifier. Available values are as follows: + + |
+
| + | ++ | ++ | ++ | +Text alignment mode. Available values are as follows: + + + |
+
| + | ++ | ++ | ++ | +Text line height. When this parameter is set to 0px, the text line height is not limited and the font size is adaptive. + |
+
| + | ++ | ++ | ++ | +Takes effect when the maximum number of lines is specified. Available values are as follows: + + |
+
| + | ++ | ++ | ++ | +Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text. + |
+
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Minimum font size in the text. This style must be used together with max-font-size. The font size can be changed dynamically. After the maximum and minimum font sizes are set, font-size does not take effect. + |
+
| + | ++ | ++ | ++ | +Maximum font size in the text. This style must be used together with min-font-size. The font size can be changed dynamically. After the maximum and minimum font sizes are set, font-size does not take effect. + |
+
| + | ++ | ++ | ++ | +Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set. + |
+
| + | ++ | ++ | ++ | +Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, text-overflow is used to truncate the text. If this parameter is set, font-size, max-font-size, min-font-size, and font-size-step do not take effect. + + |
+
+
+```
+
+```
+/*xxx.css */
+.container {
+ flex-direction: column;
+ align-items: center;
+}
+.row {
+ flex-direction: row;
+}
+.label {
+ width: 200px;
+ margin-top: 50px;
+}
+.input {
+ margin-left: 100px;
+ margin-top: 50px;
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-marquee.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-marquee.md
new file mode 100644
index 0000000000000000000000000000000000000000..f5ff2c0c4be5fdb54a5d925802e4b8c666d34670
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-marquee.md
@@ -0,0 +1,283 @@
+# marquee
+
+The **
+
+
+
+
+
+
+
+
+
+
+
+| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Whether the font size changes with the system's font size settings. + + |
+
| + | ++ | ++ | ++ | +Font weight of the scrolling text. For details, see font-weight of the text component. + |
+
| + | ++ | ++ | ++ | +Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text. + |
+
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background-color: #ffffff;
+}
+.customMarquee {
+ width: 100%;
+ height: 80px;
+ padding: 10px;
+ margin: 20px;
+ border: 4px solid #ff8888;
+ border-radius: 20px;
+ font-size: 40px;
+ color: #ff8888;
+ font-weight: bolder;
+ font-family: serif;
+ background-color: #ffdddd;
+}
+.content {
+ flex-direction: row;
+}
+.controlButton {
+ flex-grow: 1;
+ background-color: #F2F2F2;
+ text-color: #0D81F2;
+}
+```
+
+```
+// xxx.js
+export default {
+ data: {
+ scrollAmount: 30,
+ loop: 3,
+ marqueeDir: 'left',
+ marqueeCustomData: 'Custom marquee',
+ },
+ onMarqueeBounce: function() {
+ console.log("onMarqueeBounce");
+ },
+ onMarqueeStart: function() {
+ console.log("onMarqueeStart");
+ },
+ onMarqueeFinish: function() {
+ console.log("onMarqueeFinish");
+ },
+ onStartClick (evt) {
+ this.$element('customMarquee').start();
+ },
+ onStopClick (evt) {
+ this.$element('customMarquee').stop();
+ }
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-menu.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-menu.md
new file mode 100644
index 0000000000000000000000000000000000000000..e07eda729e37f98e21c2e65091a399cdfcfaadfa
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-menu.md
@@ -0,0 +1,264 @@
+# menu
+
+The **
+
+
+
+| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Whether the font size changes with the system's font size settings. + + |
+
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Font style of the menu. For details, see font-style of the text component. + |
+
| + | ++ | ++ | ++ | +Font weight of the menu. For details, see font-weight of the text component. + |
+
| + | ++ | ++ | ++ | +Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text. + |
+
| + | ++ | ++ | +
|---|---|---|
| + | ++ | +Triggered when a value in the menu is selected. The returned value is the value attribute of the <option> component. + |
+
| + | ++ | ++ | +
+ Show popup menu.
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+}
+.title-text {
+ margin: 20px;
+}
+```
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+ onMenuSelected(e) {
+ prompt.showToast({
+ message: e.value
+ })
+ },
+ onTextClick() {
+ this.$element("apiMenu").show({x:280,y:120});
+ }
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-option.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-option.md
new file mode 100644
index 0000000000000000000000000000000000000000..f91824ecc36f62eb729d00c2a10d1545138c48da
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-option.md
@@ -0,0 +1,169 @@
+# option
+
+When used as a child component of **<[select](js-components-basic-select.md)\>**, the **| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Whether the font size changes with the system's font size settings. + + |
+
| + | ++ | ++ | ++ | +Font weight. For details, see font-weight of the text component. + |
+
| + | ++ | ++ | ++ | +Text decoration. For details, see text-decoration of the text component. + |
+
| + | ++ | ++ | ++ | +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. + |
+
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | +Type of the scrollable selector, which cannot be changed dynamically. Available values are as follows: + + |
+
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ + | +
| + | ++ | ++ + | ++ | +Time format used by the time selector. Available values include: + + |
+
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Font size of a candidate item. The value is of the length type, in pixels. + |
+
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Font size of the selected item. The value is of the length type, in pixels. + |
+
| + | ++ | ++ | ++ | +Font color of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total. + + |
+
| + | ++ | ++ | ++ | +Font size of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total. + + |
+
| + | ++ | ++ | ++ | +Font type of an item. 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 in Custom Font Styles is used for the text + |
+
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | +Triggered when a value is specified for the time selector. +If seconds are contained, the value contains hour, minute, and second. + |
+
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | +{ year:year, month:month, day:day, hour:hour, minute:minute } + |
+Triggered when a value is specified for the date and time selector. + |
+
+
+ Selected: {{time}}
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ left: 0px;
+ top: 0px;
+ width: 454px;
+ height: 454px;
+}
+.title {
+ font-size: 30px;
+ text-align: center;
+}
+.time-picker {
+ width: 500px;
+ height: 400px;
+ margin-top: 20px;
+}
+```
+
+```
+/* xxx.js */
+export default {
+ data: {
+ defaultTime: "",
+ time: "",
+ },
+ onInit() {
+ this.defaultTime = this.now();
+ },
+ handleChange(data) {
+ this.time = this.concat(data.hour, data.minute);
+ },
+ now() {
+ const date = new Date();
+ const hours = date.getHours();
+ const minutes = date.getMinutes();
+ return this.concat(hours, minutes);
+ },
+
+ fill(value) {
+ return (value > 9 ? "" : "0") + value;
+ },
+
+ concat(hours, minutes) {
+ return `${this.fill(hours)}:${this.fill(minutes)}`;
+ },
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-picker.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-picker.md
new file mode 100644
index 0000000000000000000000000000000000000000..e4367418b882f971609370677995b3305da313e0
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-picker.md
@@ -0,0 +1,841 @@
+# picker
+
+The **| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | +Dynamic modification is not supported. Available values include: + + |
+
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Whether the font size changes with the system's font size settings. + + |
+
| + | ++ | ++ | ++ | +Letter spacing of the selector. For details, see letter-spacing of the text component. + |
+
| + | ++ | ++ | ++ | +Text decoration of the selector. For details, see text-decoration of the text component. + |
+
| + | ++ | ++ | ++ | +Font style of the selector. For details, see font-style of the text component. + |
+
| + | ++ | ++ | ++ | +Font weight of the selector. For details, see font-weight of the text component. + |
+
| + | ++ | ++ | ++ | +Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text. + |
+
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ + | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | +Triggered when a value is selected and the OK button is clicked in the displayed pop-up window. newSelected is the index. + |
+
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | +Triggered when a value is selected and the OK button is clicked in the displayed pop-up window. + + |
+
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ + | +Triggered when a value is selected and the OK button is clicked in the displayed pop-up window. If containsecond is set to true, value contains seconds. + |
+
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+.pickertext{
+ background-color: red;
+ width: 300;
+ height: 400;
+}
+.pickerdate{
+ background-color: #BEFF5B;
+ width: 200;
+ height: 200;
+}
+.pickertime{
+ background-color: #B764FF;
+ width: 500;
+ height: 200;
+}
+.pickerdatetime{
+ background-color: #FF6387;
+ width: 100%;
+ height: 300;
+}
+.pickermuitl{
+ background-color: #71FF31;
+}
+```
+
+```
+// xxx.js
+import router from '@system.router';
+import prompt from '@system.prompt';
+export default {
+ data: {
+ rangetext:['15', "20", "25"],
+ multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]],
+ textvalue:'default textvalue',
+ datevalue:'default datevalue',
+ timevalue:'default timevalue',
+ datetimevalue:'default datetimevalue',
+ multitextvalue:'default multitextvalue',
+ containsecond:true,
+ multitextselect:[1,2,0],
+ datetimeselect:'2012-5-6-11-25',
+ timeselect:'11:22:30',
+ dateselect:'2021-3-2',
+ textselect:'2'
+ },
+ textonchange(e) {
+ this.textvalue = e.newValue;
+ prompt.showToast({ message:"text:"+e.newValue+",newSelected:"+e.newSelected })
+ },
+ textoncancel(e) {
+ prompt.showToast({ message:"text: textoncancel" })
+ },
+ dateonchange(e) {
+ this.datevalue = e.year + "-" + e.month + "-" + e.day;
+ prompt.showToast({ message:"date:"+e.year+"-"+e.month+"-"+e.day })
+ },
+ dateoncancel() {
+ prompt.showToast({ message:"date: dateoncancel" })
+ },
+ timeonchange(e) {
+ if(this.containsecond){
+ this.timevalue=e.hour+":"+e.minute+":"+e.second;
+ prompt.showToast({message:"Time: " + e.hour + ": "+ e.minute + ": "+ e.second })
+ } else {
+ this.timevalue=e.hour+":"+e.minute;
+ prompt.showToast({message:"Time: " + e.hour + ": "+ e.minute })
+ }},
+ timeoncancel() {
+ prompt.showToast({ message:"timeoncancel" })
+ },
+ datetimeonchange(e) {
+ this.datetimevalue=e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute;
+ prompt.showToast({message:"Time:"+e.month+"-"+e.day+""+e.hour+":"+e.minute})
+ },
+ datetimeoncancel() {
+ prompt.showToast({ message:"datetimeoncancel" })
+ },
+ multitextonchange(e) {
+ this.multitextvalue=e.newValue;
+ prompt.showToast({message:"Multi-column text change" + e.newValue})
+ },
+ multitextoncancel() {
+ prompt.showToast({ message:"multitextoncancel" })
+ },
+ popup_picker() {
+ this.$element("picker_text").show();
+ },
+}
+```
+
+**Figure 1** text
+
+
+**Figure 2** date
+
+
+
+
+**Figure 3** time
+
+
+**Figure 4** datetime
+
+
+**Figure 5** multitext
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-piece.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-piece.md
new file mode 100644
index 0000000000000000000000000000000000000000..d494e7ce7d430ae00cf1dbf808073453dfa879a8
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-piece.md
@@ -0,0 +1,123 @@
+# piece
+
+An entrance piece that can contain images and text. It is usually used to display receivers, for example, email recipients or message recipients.
+
+> **NOTE:**
+>This component is supported since API version 5.
+
+## Child Component
+
+None
+
+## Attribute
+
+In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
+
+
+
+
+Styles in [Universal Styles](js-components-common-styles.md) are supported.
+
+> **NOTE:**
+>By default, text and images are placed in the middle of the **| + | ++ | ++ | +
|---|---|---|
| + | ++ | +Triggered when users click the delete icon of the operational piece. You can delete this component by using the if directive. + |
+
+
+```
+
+```
+// xxx.js
+export default {
+ data: {
+ first: true,
+ second: true
+ },
+ closeSecond(e) {
+ this.second = false;
+ }
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-progress.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-progress.md
new file mode 100644
index 0000000000000000000000000000000000000000..1936578a6c4fcb9bc9ce3fa87c1b080b8956c32c
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-progress.md
@@ -0,0 +1,513 @@
+# progress
+
+The **| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | +Type of the progress bar, which cannot be changed dynamically. Available values are as follows: + + |
+
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ + | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
+
+
+
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+ align-items: center;
+}
+.min-progress {
+ width: 300px;
+ height: 300px;
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-qrcode.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-qrcode.md
new file mode 100644
index 0000000000000000000000000000000000000000..318aa95de379c251f92b71f6c519151857d22567
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-qrcode.md
@@ -0,0 +1,118 @@
+# qrcode
+
+The **| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +QR code type. Available values are as follows: + + |
+
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ + | +
| + | ++ | ++ | ++ | +Whether to make the rating icons as an indicator (not-editable by users). + |
+
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
+
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+rating {
+ width: 200px;
+}
+```
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+ changeRating(e){
+ prompt.showToast({
+ message: e.rating
+ });
+ }
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-richtext.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-richtext.md
new file mode 100644
index 0000000000000000000000000000000000000000..612333d4632a71cfd382bce358ccaa8da6c0fb5e
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-richtext.md
@@ -0,0 +1,92 @@
+# richtext
+
+The **| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
+ {{content}}
+
+```
+
+```
+// xxx.js
+export default {
+ data: {
+ content: `
+
+
+
+ `,
+ },
+ onLoadStart() {
+ console.error("start load rich text:" + JSON.stringify())
+ },
+ onLoadEnd() {
+ console.error("end load rich text:" + JSON.stringify())
+ }
+}
+```
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-search.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-search.md
new file mode 100644
index 0000000000000000000000000000000000000000..594dcd9eb63a25efae0b4654898286e7157fd9d8
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-search.md
@@ -0,0 +1,295 @@
+# search
+
+The **h1
+Text test (H1 test)
+h2
+Text test (H2 test)
+| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | +Search icon. By default, the system search icon is used. The supported icon format is SVG, JPG, and PNG. + |
+
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | +Array<MenuOption> + |
++ | ++ | +Menu options displayed after users click the More button in the pop menu. + |
+
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Whether the font size changes with the system's font size settings. + + |
+
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Font weight. For details, see font-weight of the text component. + |
+
| + | ++ | ++ | ++ | +Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text. + |
+
| + | ++ | ++ | ++ | ++ | +
+
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-select.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-select.md
new file mode 100644
index 0000000000000000000000000000000000000000..d6725e761627bb6f66ebe83f18e31bafed7cb2ee
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-select.md
@@ -0,0 +1,107 @@
+# select
+
+The **| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | +Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text. + |
+
| + | ++ | ++ | +
|---|---|---|
| + | ++ | +Triggered after a value is selected from the drop-down list. The value of newValue is the attribute value of the child component option. + |
+
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-slider.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-slider.md
new file mode 100644
index 0000000000000000000000000000000000000000..a519857dfe2c13a3e70b9aa83799b52486c89f25
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-slider.md
@@ -0,0 +1,281 @@
+# slider
+
+The **| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ + | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
+ slider start value is {{startValue}}
+ slider current value is {{currentValue}}
+ slider end value is {{endValue}}
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+```
+
+```
+// xxx.js
+export default {
+ data: {
+ value: 0,
+ startValue: 0,
+ currentValue: 0,
+ endValue: 0,
+ },
+ setvalue(e) {
+ if (e.mode == "start") {
+ this.value = e.value;
+ this.startValue = e.value;
+ } else if (e.mode == "move") {
+ this.value = e.value;
+ this.currentValue = e.value;
+ } else if (e.mode == "end") {
+ this.value = e.value;
+ this.endValue = e.value;
+ }
+ }
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-span.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-span.md
new file mode 100644
index 0000000000000000000000000000000000000000..9754ac97000fee403b39aea45461085e7d28454b
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-span.md
@@ -0,0 +1,158 @@
+# span
+
+The **| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Whether the font size of the modified text changes with the system's font size settings. + + |
+
| + | ++ | ++ | ++ | +Font style of the modified text. For details, see font-style of the text component. + |
+
| + | ++ | ++ | ++ | +Font weight of the modified text. For details, see font-weight of the text component. + |
+
| + | ++ | ++ | ++ | +Text decoration of the modified text. For details, see text-decoration of the text component. + |
+
| + | ++ | ++ | ++ | +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. + |
+
+
+ span
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.title {
+ font-size: 30px;
+ text-align: center;
+ width: 100%;
+ height: 100px;
+}
+.spanTxt{
+ color: chartreuse;
+ font-size: 100px;
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-switch.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-switch.md
new file mode 100644
index 0000000000000000000000000000000000000000..3d8f4a56022e75801e679fdeb7c3e60c6e8b5ac3
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-switch.md
@@ -0,0 +1,261 @@
+# switch
+
+The **| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Distance between the two sides of the longest text in texton and textoff and the border of the slider. + |
+
| + | ++ | ++ | ++ | +Font size. This attribute is available only when texton and textoff are set. + |
+
| + | ++ | ++ | ++ | +Whether the font size changes following the system's font size settings. + + |
+
| + | ++ | ++ | ++ | +Font style. This attribute is available only when texton and textoff are set. For details, see font-style of the text component. + |
+
| + | ++ | ++ | ++ | +Font weight. This attribute is available only when texton and textoff are set. For details, see font-weight of the text component. + |
+
| + | ++ | ++ | ++ | +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. This attribute is available only when texton and textoff are set. + |
+
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
+
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+switch{
+ texton-color:#002aff;
+ textoff-color:silver;
+ text-padding:20px;
+}
+```
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+ data: {
+ title: 'World'
+ },
+ switchChange(e){
+ console.log(e.checked);
+ if(e.checked){
+ prompt.showToast({
+ message: "Switch on."
+ });
+ }else{
+ prompt.showToast({
+ message: "Switch off."
+ });
+ }
+ }
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-text.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-text.md
new file mode 100644
index 0000000000000000000000000000000000000000..1c7e3e0facabba2debb3dc17457f4c2399f93216
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-text.md
@@ -0,0 +1,405 @@
+# text
+
+The **| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Whether the font size changes following the system's font size settings. + + |
+
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ + | +
| + | ++ | ++ | ++ | +Font style. Available values are as follows: + + |
+
| + | ++ | ++ | ++ | +Font width. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a larger font width. + +The value of the string type can be lighter, normal, bold, or bolder. + |
+
| + | ++ | ++ | ++ | +Text modifier. Available values are as follows: + + |
+
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Text alignment mode. Available values are as follows: + + + |
+
| + | ++ | ++ + | ++ | +Text line height. When this parameter is set to 0px, the text line height is not limited and the font size is adaptive. The string values are as follows: + + |
+
| + | ++ | ++ | ++ | +Takes effect when the maximum number of lines is specified. Available values are as follows: + + |
+
| + | ++ | ++ | ++ | +Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text. + |
+
| + | ++ | ++ | ++ | +Maximum number of text lines. The value is of the string type. The options are as follows: + + |
+
| + | ++ | ++ | ++ | +Minimum font size in the text. This style must be used together with max-font-size. The font size can be changed dynamically. After the maximum and minimum font sizes are set, font-size does not take effect. + |
+
| + | ++ | ++ | ++ | +Maximum font size in the text. This style must be used together with min-font-size. The font size can be changed dynamically. After the maximum and minimum font sizes are set, font-size does not take effect. + |
+
| + | ++ | ++ | ++ | +Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set. + |
+
| + | ++ | ++ | ++ | +Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, text-overflow is used to truncate the text. If this parameter is set, font-size, max-font-size, min-font-size, and font-size-step do not take effect. + + |
+
| + | ++ | ++ | ++ | +Text line breaking mode. The options are as follows: +
|
+
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Mode for processing blanks in the component. The options are as follows: +
|
+
| + | ++ | ++ | ++ | ++ + | +
+
+```
+
+```
+/* xxx.css */
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.content{
+ width: 400px;
+ height: 400px;
+ border: 20px;
+ border-image-source: url("/common/images/landscape.jpg");
+ border-image-slice: 20px;
+ border-image-width: 30px;
+ border-image-outset: 10px;
+ border-image-repeat: round;
+}
+.title {
+ font-size: 80px;
+ text-align: center;
+ width: 400px;
+ height: 400px;
+}
+```
+
+```
+// xxx.js
+export default {
+ data: {
+ title: 'World'
+ }
+}
+```
+
+
+
+```
+
+
+
+ Hello {{ title }}
+
+
+
+
+ This is a passage
+
+
+ This is a passage
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ align-items: center;
+ background-color: #F1F3F5;
+ justify-content: center;
+}
+.text1{
+ word-spacing: 10px;
+ adapt-height: true;
+}
+.text2{
+ width: 200px;
+ max-lines: 1;
+ text-overflow: ellipsis;
+ text-valign: middle;
+ line-height: 40px;
+ text-decoration: underline;
+ text-decoration-color: red;
+ text-indent: 20px;
+ white-space: pre;
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-textarea.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-textarea.md
new file mode 100644
index 0000000000000000000000000000000000000000..89341b87ad5cdd49392347b41b3cd6fb5e280f3c
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-textarea.md
@@ -0,0 +1,373 @@
+# textarea
+
+The **| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Maximum number of characters that can be entered in the multi-line text box. + |
+
| + | ++ | ++ | ++ | +Icon displayed before text input. This icon does not support click events. The supported icon formats are JPG, PNG, and SVG. + |
+
| + | ++ | ++ | ++ | +Whether a text box can be extended. If the value of this attribute is set to true, the height of the text box can adapt to the text. + |
+
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Whether to display the character counter for the text box. This attribute takes effect only when maxlength is set. + |
+
| + | +Array<MenuOption> + |
++ | ++ | +Menu options displayed after users click the More button in the pop menu. + |
+
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Whether the font size changes with the system's font size settings. + + |
+
| + | ++ | ++ | ++ | +Color of the hint text in the multi-line text box. This attribute is available when the component type is set to text, email, date, time, number, or password. + |
+
| + | ++ | ++ | ++ | +Font weight. For details, see font-weight of the text component. + |
+
| + | ++ | ++ | ++ | +Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by Custom Font Styles in the family is selected as the font for the text. + |
+
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Whether the font size changes with the system's font size settings. + + |
+
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Font weight of the toggle. For details, see font-weight of the text component. + |
+
| + | ++ | ++ | ++ | +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. + |
+
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
+ 1. Multiple choice example
+ 2. Single choice example
+
+```
+
+```
+/* xxx.css */
+.margin {
+ margin: 7px;
+}
+```
+
+```
+// xxx.js
+export default {
+ data: {
+ toggle_list: [
+ { "id":"1001", "name":"Living room", "checked":true },
+ { "id":"1002", "name":"Bedroom", "checked":false },
+ { "id":"1003", "name":"Second bedroom", "checked":false },
+ { "id":"1004", "name":"Kitchen", "checked":false },
+ { "id":"1005", "name":"Study", "checked":false },
+ { "id":"1006", "name":"Garden", "checked":false },
+ { "id":"1007", "name":"Bathroom", "checked":false },
+ { "id":"1008", "name":"Balcony", "checked":false },
+ ],
+ toggles: ["Living room","Bedroom","Kitchen","Study"],
+ idx: ""
+ },
+ allclick(arg) {
+ this.idx = arg
+ },
+ allchange(e) {
+ if (e.checked === true) {
+ for (var i = 0; i < this.toggle_list.length; i++) {
+ if (this.toggle_list[i].id === this.idx) {
+ this.toggle_list[i].checked = true
+ } else {
+ this.toggle_list[i].checked = false
+ }
+ }
+ }
+ }
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-toolbar-item.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-toolbar-item.md
new file mode 100644
index 0000000000000000000000000000000000000000..3b5c5fa4191b4aec37c21edd120a200c0b5caeae
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-toolbar-item.md
@@ -0,0 +1,287 @@
+# toolbar-item
+
+The **
+ {{$item}}
+
+
+
+| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Icon image path, which is displayed on the option text. The value is a local path. Supported image formats are PNG, JPG, and SVG. + |
+
| + | ++ | ++ | ++ | ++ | +
|---|---|---|---|---|
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +Whether the text size changes with the system's font size settings. + |
+
| + | ++ | ++ | ++ | +Text font style. Available values are as follows: + + |
+
| + | ++ | ++ | ++ | +Text font weight. The number value must be an exact multiple of 100 ranging from 100 to 900. The default value is 400. A larger value indicates a bigger weight. Available values of the string type are lighter, normal, bold, or bolder. + |
+
| + | ++ | ++ | ++ | +Text modifier. Available values are as follows: + + |
+
| + | ++ | ++ | ++ | +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. + |
+
| + | ++ | ++ | ++ | +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. Both online and local image resources are supported. + |
+
| + | +
|
++ | ++ | +
+
|
+
| + | ++ | ++ | ++ | +Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically. + + |
+
| + | +
|
++ | ++ | +
|
+
| + | ++ | ++ | ++ | +Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. + |
+
| + | ++ + | ++ | ++ | +Type of the box containing an element. Available values are as follows: + + |
+
| + | ++ + | ++ | ++ | +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: + + + |
+
| + | ++ | ++ | +
|---|---|---|
| + | +getContext ( type: '2d', attributes6+: { antialias: boolean } ) => CanvasRendering2dContext + |
+Obtains the canvas drawing context. The invoking methods are as follows6+: +var ctx = canvas.getContext(contextType); +var ctx = canvas.getContext(contextType, contextAttributes); +contextType is mandatory and can be set to 2d. contextAttributes is optional and can be set only to enable or disable the anti-aliasing function. By default, the anti-aliasing function is disabled. +The contextType objects are as follows: +2d: The return value is a 2D drawing object that provides specific 2D drawing operations. For details, see section CanvasRenderingContext2D. + + |
+
| + | ++ | +Generate a URL containing the image display. +
|
+
+
+
+
+```
+
+```
+// xxx.js
+export default {
+ handleClick() {
+ const el = this.$refs.canvas1;
+ var dataURL = el.toDataURL();
+ console.log(dataURL);
+ // "data:image/png;base64,xxxxxxxx..."
+ }
+}
+```
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvasgradient.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvasgradient.md
new file mode 100644
index 0000000000000000000000000000000000000000..513856ee6f236eb8c74d3219684534acdc430fb4
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvasgradient.md
@@ -0,0 +1,49 @@
+# CanvasGradient
+
+**CanvasGradient** provides a gradient object.
+
+## addColorStop
+
+addColorStop\(offset: number, color: string\): void
+
+Adds a color stop for the** CanvasGradient** object based on the specified offset and gradient color.
+
+- Parameter
+
+
+ | + | ++ | ++ | +
|---|---|---|
| + | ++ | +Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1. + |
+
| + | ++ | ++ | +
+
+
+
+
+ ```
+
+ ```
+ // xxx.js
+ export default {
+ handleClick() {
+ const el = this.$refs.canvas1;
+ const ctx = el.getContext('2d');
+ ctx.beginPath();
+ ctx.arc(100, 75, 50, 0, 6.28);
+ ctx.stroke();
+ },
+ antialias() {
+ const el = this.$refs.canvas1;
+ const ctx = el.getContext('2d', { antialias: true });
+ ctx.beginPath();
+ ctx.arc(100, 75, 50, 0, 6.28);
+ ctx.stroke();
+ }
+ }
+ ```
+
+
+- Anti-aliasing disabled
+
+ 
+
+- Anti-aliasing enabled
+
+ 
+
+
+## Attributes
+
+
+| + | ++ | ++ | ++ | +
|---|---|---|---|
| + | +<color> | CanvasGradient | CanvasPattern + |
++ | ++ + | +
| + | ++ | ++ | ++ | +
| + | +<color> | CanvasGradient | CanvasPattern + |
++ | ++ + | +
| + | ++ | ++ | +Style of the specified line endpoint. The options are as follows: + + |
+
| + | ++ | ++ | +Style of the intersection point between line segments. The options are as follows: +
|
+
| + | ++ | ++ | +Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. + |
+
| + | ++ | ++ | +
+ Syntax: ctx.font="font-style font-weight font-size font-family"5+ +
|
+
| + | ++ | ++ | +Text alignment mode. Available values are as follows: + + + |
+
| + | ++ | ++ | +Horizontal alignment mode of text. Available values are as follows: +
|
+
| + | ++ | ++ | +Transparency. 0.0: completely transparent; 1.0: completely opaque. + |
+
| + | ++ | ++ | ++ | +
| + | ++ | ++ | +Composition operation type. Available values are as follows: source-over, source-atop, source-in, source-out, destination-over, destination-atop, destination-in, destination-out, lighter, copy, and xor. For details, see Types. + |
+
| + | ++ | ++ | +Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float. + |
+
| + | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +
| + | ++ | ++ | +Whether to adjust the image smoothness during image drawing. The value true indicates that the feature is enabled, and the value false indicates that the feature is disabled. + |
+
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | +X-coordinate of the upper left corner of the rectangle stroke + |
+
| + | ++ | +Y-coordinate of the upper left corner of the rectangle stroke + |
+
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | +
|---|---|
| + | +Object that contains the text width. You can obtain the width by TextMetrics.width. + |
+
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | +Source image. For details, see Image. + |
+
| + | ++ | +Repetition mode. The value can be "repeat", "repeat-x", "repeat-y", or "no-repeat". + |
+
| + | ++ | +
|---|---|
| + | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | +Clockwise rotation angle. You can use Math.PI / 180 to convert the angle to a radian. + |
+
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | +Image resource. For details, see Image. + |
+
| + | ++ | +X-coordinate of the upper left corner of the rectangle used to crop the source image. + |
+
| + | ++ | +Y-coordinate of the upper left corner of the rectangle used to crop the source image. + |
+
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | +X-coordinate of the upper left corner of the drawing area on the canvas. + |
+
| + | ++ | +Y-coordinate of the upper left corner of the drawing area on the canvas. + |
+
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | +
|---|---|
| + | ++ | +
| + | ++ | +
|---|---|
| + | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | +ImageData object with the same width and height copied from the original ImageData object + |
+
| + | ++ | +
|---|---|
| + | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | +
|---|---|
| + | +ImageData object that contains pixels in the specified area on the canvas + |
+
| + | ++ | ++ | +
|---|---|---|
| + | ++ | +An array describing the interval of alternate line segments and length of spacing + |
+
| + | ++ | +
|---|---|
| + | +Interval of alternate line segments and the length of spacing + |
+
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | +A one-dimensional array of color values. The values range from 0 to 255. + |
+
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | +The invoking methods are as follows: +var ctx = canvas.getContext(contextId); +var ctx = canvas.getContext(contextId, options); +The contextId parameter is mandatory. Currently, only the value 2d is supported. The options parameter is optional and is not supported currently. +Obtains the context for drawing on an offscreen canvas. The parameter can be set only to 2d. The return value is a 2D drawing object that provides specific 2D drawing operations. For details, see OffscreenCanvasRenderingContext2D. + |
+
| + | ++ | +Generates a URL containing image display information. + + |
+
| + | ++ | +Creates an ImageBitmap object from the most recent image rendered by Offscreen Canvas. + |
+
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | ++ | +
|---|---|---|---|
| + | +string6+ | <percentage> | <length> string6+ | <percentage> | <length> + |
++ | +Origin position of the transformed element. The unit can be px or a percentage (relative to the animation target component). If only one value is specified, the other value is 50%. The available values for the first string are left, center, and right. The available values for the second string are top, center, and bottom. + + + + + |
+
| + | ++ | ++ | +Translation, rotation, and scaling attributes. +For details, see Table 1. + |
+
| + | ++ | ++ | +Animation attributes in the format of duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name. The order of the parameters is not specified, but the duration and delay parameters are parsed based on where they are placed. + |
+
| + | ++ | ++ | +@keyframes rule. For details, see Table 2. + |
+
| + | ++ | ++ | +Delay for playing the animation, in ms or s, for example, 1000 ms or 1s. The default unit is ms. + |
+
| + | ++ | ++ | +Animation duration, in ms or s, for example, 1000 ms or 1s. The default unit is ms. + + |
+
| + | ++ | ++ | +Number of times that an animation is played. The animation is played once by default. You can set the value to infinite to play the animation infinitely. + |
+
| + | ++ | ++ | +Speed curve of an animation, which makes the animation more fluent. +Available values are as follows: +
|
+
| + | ++ | ++ | +Mode of playing the animation. +
|
+
| + | ++ | ++ | +Start and end styles of the animation +
|
+
| + | ++ | ++ | +Current state of the animation. + + |
+
| + | ++ | ++ | +Transition effect when the component status is switched. The following four attributes can be set through the transition attribute: +
|
+
| + | ++ | ++ | ++ | +
|---|---|---|---|
| + | ++ | ++ | +Background color applied to the component after the animation is played. + |
+
| + | ++ | ++ | +Opacity value applied to the component after the animation is played. The value ranges from 0 to 1. The default value is 1. + |
+
| + | ++ | ++ | +Width value applied to the component after the animation is played. + |
+
| + | ++ | ++ | +Height value applied to the component after the animation is played. + |
+
| + | ++ | ++ | +Transformation type applied to a component. For details, see Table 1. + |
+
| + | +string | <percentage> | <length> string | <percentage> | <length> + |
++ | +Set the background image for a window. The unit can be percentage or px. The first value indicates the horizontal position, and the second value indicates the vertical position. If only one value is specified, the other value is 50%. The available values for the first string are left, center, and right. The available values for the second string are top, center, and bottom. + +
|
+
+
+```
+
+```
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.rect{
+ width: 200px;
+ height: 200px;
+ background-color: #f76160;
+ animation: Go 3s infinite;
+}
+@keyframes Go
+{
+ from {
+ background-color: #f76160;
+ transform:translate(100px) rotate(0deg) scale(1.0);
+ }
+ /* Specify the intermediate state of the animation by a percentage value.6+ */
+ 50% {
+ background-color: #f76160;
+ transform:translate(100px) rotate(60deg) scale(1.3);
+ }
+ to {
+ background-color: #09ba07;
+ transform:translate(100px) rotate(180deg) scale(2.0);
+ }
+}
+```
+
+
+
+```
+
+
+
+
+
+ animation-play-state: {{playState}}
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+.simpleSize {
+ background-color: blue;
+ width: 100px;
+ height: 100px;
+}
+.simpleAnimation {
+ animation: simpleFrames 9s;
+}
+@keyframes simpleFrames {
+ from { transform: translateX(0px); }
+ to { transform: translateX(100px); }
+}
+```
+
+```
+// xxx.js
+export default {
+ data: {
+ title: "",
+ playState: "running"
+ },
+ toggleState() {
+ if (this.playState === "running") {
+ this.playState = "paused";
+ } else {
+ this.playState = "running";
+ }
+ }
+}
+```
+
+
+
+```
+
+
+```
+
+```
+/* xxx.css */
+.img {
+ width: 294px;
+ height: 233px;
+ background-image: url('common/heartBeat.jpg');
+ background-repeat: no-repeat;
+ background-position: 0% 0%;
+ background-size: 900%;
+ animation-name: heartBeating;
+ animation-duration: 1s;
+ animation-delay: 0s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: -1;
+ animation-timing-function: steps(8, end);
+}
+
+@keyframes heartBeating {
+ from { background-position: 0% 0%;}
+ to { background-position: 100% 0%;}
+}
+```
+
+```
+
+
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+.content { /* Component state 1 */
+ height: 200px;
+ width: 200px;
+ background-color: red;
+ transition: all 5s ease 0s;
+}
+.content:active { /* Component state 2 */
+ height: 400px;
+ width: 400px;
+ background-color: blue;
+ transition: all 5s linear 0s;
+}
+```
+
+> **NOTE:**
+>The @keyframes rule with **from** and **to** defined cannot be dynamically bound to an element.
+>The following figure shows the meanings of end and start in the steps function.
+>
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-atomic-layout.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-atomic-layout.md
new file mode 100644
index 0000000000000000000000000000000000000000..3b33bc738a6f1b4fc45a6caa80a21a37f7c36637
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-atomic-layout.md
@@ -0,0 +1,95 @@
+# Atomic Layout
+
+The atomic layout implements adaptive layout for screens of different sizes and types. Designers can use the atomic layout to define adaptive rules for elements on UIs of different forms. Developers can use the atomic layout to implement the adaptive UI features matching the design effect for a variety of screens.
+
+> **NOTE:**
+>The atomic layout is supported since API version 5.
+
+## Hiding Components
+
+You can set priority flags for a flex layout that does not support cross-row display to define the display priorities for elements in the horizontal or vertical direction. The elements are hidden based on available space of the container.
+
+
+
+
+In a flex layout that does not support cross-row display, elements with the proportion style configured are always arranged with the set proportions in the container.
+
+
+
+
+A component with fixed ratio can be scaled up and down while retaining its aspect ratio.
+
+
+
+
+## Common Attributes
+
+Common attributes are used to set component identities and appearance.
+
+
+
+
+Rendering attributes are used to set whether a component is rendered.
+
+
+| + | ++ | ++ | ++ | +
|---|---|---|---|
| + | ++ | ++ | +Expands the current element based on the configured data list. + |
+
| + | ++ | ++ | ++ | +
| + | ++ | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | +Swiping direction. The value can be one of the following: + + |
+
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
| + | ++ | ++ | +
|---|---|---|
| + | ++ | +Custom attribute set defined through data-*. + |
+
+
+
+```
+
+```
+// xxx.js
+export default {
+ touchstartfunc(msg) {
+ console.info(`on touch start, point is: ${msg.touches[0].globalX}`);
+ console.info(`on touch start, data is: ${msg.target.dataSet.a}`);
+ }
+}
+```
+
diff --git a/en/application-dev/js-reference/gradient-styles.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-gradient.md
old mode 100755
new mode 100644
similarity index 30%
rename from en/application-dev/js-reference/gradient-styles.md
rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-gradient.md
index 1b3411e7aebecadab1a6a22e25928fec545e6fba..f3e2c81c275ea02747579e1f339882c521391a01
--- a/en/application-dev/js-reference/gradient-styles.md
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-gradient.md
@@ -1,12 +1,10 @@
-# Gradient Styles
-
-- [Linear Gradient/Repeating Linear Gradient](#en-us_topic_0000001058948919_s9fb0b2412d2843e4b06e05acc39dc394)
+# Gradient Styles
Gradient styles are commonly supported and can be set in the **style** attribute or a **.css** file. Gradients enable smooth transition between two or more specified colors.
This framework supports two gradient styles: linear gradient and repeating linear gradient.
-## Linear Gradient/Repeating Linear Gradient
+## Linear Gradient/Repeating Linear Gradient
To use the gradient style, you need to specify the transition direction and transition color.
@@ -22,53 +20,53 @@ To use the gradient style, you need to specify the transition direction and tran
2. Transition color: \#ff0000, \#ffff0000, rgb \(255, 0, 0\), and rgba \(255, 0, 0, 1\). At least two colors must be specified.
-- Parameters
+- Parameter
-
-
+
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ width: 300px;
+ height: 600px;
+ background-color: #008000;
+}
+@media (device-type: tv) {
+ .container {
+ width: 500px;
+ height: 500px;
+ background-color: #fa8072;
+ }
+}
+@media (device-type: wearable) {
+ .container {
+ width: 300px;
+ height: 300px;
+ background-color: #008b8b;
+ }
+}
+```
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-methods.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-methods.md
new file mode 100644
index 0000000000000000000000000000000000000000..2a60d488203a815fd2f37f22380620946f1b6aa5
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-methods.md
@@ -0,0 +1,666 @@
+# Universal Methods
+
+After a component is assigned the **id** attribute, you can use the ID to obtain the component objects and call functions.
+
+
+
+
+
+
+
+
+
+
+ ```
+
+ ```
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ }
+ .box{
+ width: 200px;
+ height: 200px;
+ background-color: #ff0000;
+ margin-top: 30px;
+ }
+ .buttonBox{
+ margin-top: 30px;
+ width: 250px;
+ justify-content: space-between;
+ }
+ button{
+ background-color: #8e8b89;
+ color: white;
+ width: 100px;
+ height: 40px;
+ font-size: 24px;
+ }
+ ```
+
+ ```
+ // xxx.js
+ import prompt from '@system.prompt';
+ export default{
+ data:{
+ animation:'',
+ },
+ onInit(){
+ },
+ onShow(){
+ var options = {
+ duration: 1500,
+ easing: 'friction',
+ delay: 500,
+ fill: 'forwards',
+ iterations: 2,
+ direction: 'normal',
+ };
+ var frames = [
+ {transform: {translate: '-120px -0px'}, opacity: 0.1, offset: 0.0},
+ {transform: {translate: '120px 0px'}, opacity: 1.0, offset: 1.0}
+ ];
+ this.animation = this.$element('idName').animate(frames, options);
+ // handle finish event
+ this.animation.onfinish = function(){
+ prompt.showToast({
+ message: "The animation is finished."
+ });
+ };
+ // handle cancel event
+ this.animation.oncancel = function(){
+ prompt.showToast({
+ message: "The animation is canceled."
+ });
+ };
+ // handle repeat event
+ this.animation.onrepeat = function(){
+ prompt.showToast({
+ message: "The animation is repeated."
+ });
+ };
+ },
+ start(){
+ this.animation.play();
+ },
+ cancel(){
+ this.animation.cancel();
+ }
+ }
+ ```
+
+ 
+
+
+## this.$element\('_id_'\).getBoundingClientRect\(\)6+
+
+Obtains the size of the element and its position relative to the window.
+
+- Example
+
+ ```
+ // xxx.js
+ var rect = this.$element('id').getBoundingClientRect();
+ console.info(`current element position is ${rect.left}, ${rect.top}`);
+ ```
+
+
+## this.$element\('_id_'\).createIntersectionObserver\(\)6+
+
+Gets notified of the visibility of an element on the current page.
+
+- Example
+
+ ```
+ // xxx.js
+ let observer = this.$element('broad').createIntersectionObserver({
+ ratios: [0.2, 0.5], // number
+ });
+
+ observer.observe((isVisible, ratio)=> {
+ console.info('this element is ' + isVisible + 'ratio is ' + ratio)
+ })
+
+ observer.unobserve()
+ ```
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-styles.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-styles.md
new file mode 100644
index 0000000000000000000000000000000000000000..979847ff3472e782bab5d14f74278c35299bf5fc
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-styles.md
@@ -0,0 +1,629 @@
+# Universal Styles
+
+You can set component appearance in the **style** attribute or **.css** files.
+
+
+
+
+```
+
+```
+// xxx.js
+import router from '@system.router';
+export default {
+ jump() {
+ router.push({
+ uri: 'detailpage',
+ });
+ },
+}
+```
+
+```
+/* xxx.css */
+.shared-transition-style {
+ shared-transition-effect: exchange;
+ shared-transition-name: shared-transition;
+}
+@keyframes shared-transition {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+```
+
+```
+
+
+
+
+```
+
+```
+// xxx.js
+import router from '@system.router';
+export default {
+ jumpBack() {
+ router.back();
+ },
+}
+```
+
+```
+/* xxx.css */
+.shared-transition-style {
+ shared-transition-effect: exchange;
+ shared-transition-name: shared-transition;
+}
+@keyframes shared-transition {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+```
+
+## Card Transition
+
+
+
+
+```
+
+```
+// xxx.js
+import router from '@system.router'
+export default {
+ data: { list: [] },
+ onInit() {
+ for(var i = 0; i < 10; i++) {
+ var item = { uri: "pages/card_transition/target_page/index",
+ title: "this is title" + i, id: "item_" + i }
+ this.list.push(item);
+ }
+ },
+ jumpPage(id, uri) {
+ var cardId = this.$element(id).ref;
+ router.push({ uri: uri, params : { ref : cardId } });
+ }
+}
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ align-items: center;
+ background-color: #ABDAFF;
+}
+.item {
+ height: 80px;
+ background-color: #FAFAFA;
+ margin-top: 2px;
+}
+.outer {
+ width: 300px;
+ height: 100px;
+ align-items: flex-end;
+ transition-effect: unfold;
+}
+```
+
+```
+
+
+
+
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ align-items: center;
+ background-color: #EBFFD7;
+}
+.div {
+ height: 600px;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+```
+
+
+
+## Page Transition Styles
+
+**Table 3** Page transition styles
+
+
+
+
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ width: 100%;
+ align-items: center;
+}
+.badge {
+ width: 50%;
+ margin-top: 100px;
+}
+.text1 {
+ background-color: #f9a01e;
+ font-size: 50px;
+}
+.text2 {
+ background-color: #46b1e3;
+ font-size: 50px;
+}
+```
+
+```
+// xxx.js
+export default {
+ data:{
+ badgeconfig:{
+ badgeColor:"#0a59f7",
+ textColor:"#ffffff",
+ }
+ }
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-dialog.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-dialog.md
new file mode 100644
index 0000000000000000000000000000000000000000..7efcbc9ea9eb68224f0a7b9278c3c13e90ad14e1
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-dialog.md
@@ -0,0 +1,225 @@
+# dialog
+
+The **
+
+```
+
+```
+/* xxx.css */
+.doc-page {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+.btn-div {
+ width: 100%;
+ height: 200px;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+.btn {
+ background-color: #F2F2F2;
+ text-color: #0D81F2;
+}
+.txt {
+ color: #000000;
+ font-weight: bold;
+ font-size: 39px;
+}
+.dialog-main {
+ width: 500px;
+}
+.dialog-div {
+ flex-direction: column;
+ align-items: center;
+}
+.inner-txt {
+ width: 400px;
+ height: 160px;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+}
+.inner-btn {
+ width: 400px;
+ height: 120px;
+ justify-content: space-around;
+ align-items: center;
+}
+.btn-txt {
+ background-color: #F2F2F2;
+ text-color: #0D81F2;
+}
+```
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+ showDialog(e) {
+ this.$element('simpledialog').show()
+ },
+ cancelDialog(e) {
+ prompt.showToast({
+ message: 'Dialog cancelled'
+ })
+ },
+ cancelSchedule(e) {
+ this.$element('simpledialog').close()
+ prompt.showToast({
+ message: 'Successfully cancelled'
+ })
+ },
+ setSchedule(e) {
+ this.$element('simpledialog').close()
+ prompt.showToast({
+ message: 'Successfully confirmed'
+ })
+ },
+ doubleclick(e){
+ prompt.showToast({
+ message: 'doubleclick'
+ })
+ }
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-div.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-div.md
new file mode 100644
index 0000000000000000000000000000000000000000..ac9af5aa844356f124e545c26f3474037edc2433
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-div.md
@@ -0,0 +1,705 @@
+# div
+
+The **
+
+
+
+
+
+ ```
+
+ ```
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 454px;
+ height: 454px;
+ }
+ .flex-box {
+ justify-content: space-around;
+ align-items: center;
+ width: 400px;
+ height: 140px;
+ background-color: #ffffff;
+ }
+ .flex-item {
+ width: 120px;
+ height: 120px;
+ border-radius: 16px;
+ }
+ .color-primary {
+ background-color: #007dff;
+ }
+ .color-warning {
+ background-color: #ff7500;
+ }
+ .color-success {
+ background-color: #41ba41;
+ }
+ ```
+
+ 
+
+2. Flex wrap style
+
+ ```
+
+
+
+
+
+
+
+
+ ```
+
+ ```
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 454px;
+ height: 454px;
+ }
+ .flex-box {
+ justify-content: space-around;
+ align-items: center;
+ flex-wrap: wrap;
+ width: 300px;
+ height: 250px;
+ background-color: #ffffff;
+ }
+ .flex-item {
+ width: 120px;
+ height: 120px;
+ border-radius: 16px;
+ }
+ .color-primary {
+ background-color: #007dff;
+ }
+ .color-warning {
+ background-color: #ff7500;
+ }
+ .color-success {
+ background-color: #41ba41;
+ }
+ ```
+
+ 
+
+3. Grid style
+
+ ```
+
+
+
+
+
+
+
+
+
+
+
+
+ ```
+
+ ```
+ /* xxx.css */
+ .common {
+ width: 400px;
+ height: 400px;
+ background-color: #ffffff;
+ align-items: center;
+ justify-content: center;
+ margin: 24px;
+ }
+ .grid-parent {
+ display: grid;
+ grid-template-columns: 35% 35%;
+ grid-columns-gap: 24px;
+ grid-rows-gap: 24px;
+ grid-template-rows: 35% 35%;
+ }
+ .grid-child {
+ width: 100%;
+ height: 100%;
+ border-radius: 8px;
+ }
+ .grid-left-top {
+ grid-row-start: 0;
+ grid-column-start: 0;
+ grid-row-end: 0;
+ grid-column-end: 0;
+ background-color: #3f56ea;
+ }
+ .grid-left-bottom {
+ grid-row-start: 1;
+ grid-column-start: 0;
+ grid-row-end: 1;
+ grid-column-end: 0;
+ background-color: #00aaee;
+ }
+ .grid-right-top {
+ grid-row-start: 0;
+ grid-column-start: 1;
+ grid-row-end: 0;
+ grid-column-end: 1;
+ background-color: #00bfc9;
+ }
+ .grid-right-bottom {
+ grid-row-start: 1;
+ grid-column-start: 1;
+ grid-row-end: 1;
+ grid-column-end: 1;
+ background-color: #47cc47;
+ }
+ ```
+
+ 
+
+4. Dragging7+
+
+ ```
+
+
+
+ ```
+
+ ```
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ }
+ .content{
+ width: 200px;
+ height: 200px;
+ background-color: red;
+ }
+ ```
+
+ ```
+ // xxx.js
+ import prompt from '@system.prompt';
+ export default {
+ data:{
+ left:0,
+ top:0,
+ },
+ dragstart(e){
+ prompt.showToast({
+ message: 'Start to be dragged'
+ })
+ },
+ drag(e){
+ this.left = e.dragevent.globalX;
+ this.top = e.dragevent.globalY;
+ },
+ dragend(e){
+ prompt.showToast({
+ message: 'End Drag'
+ })
+ },
+ }
+ ```
+
+ 
+
+ ```
+
+
+
+
+
+
+ ```
+
+ ```
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ width: 100%;
+ position: relative;
+ max-width: 100%;
+ }
+ .content{
+ width: 200px;
+ height: 200px;
+ background-color: red;
+ position: absolute;
+ }
+ ```
+
+ ```
+ // xxx.js
+ import prompt from '@system.prompt';
+ export default {
+ data:{
+ left:0,
+ top:0,
+ },
+ drag(e){
+ this.left = e.dragevent.globalX;
+ this.top = e.dragevent.globalY;
+ },
+ dragenter(e){
+ prompt.showToast({
+ message: 'enter'
+ })
+ },
+ dragover(e){
+ prompt.showToast({
+ message: 'over'
+ })
+ },
+ dragleave(e){
+ prompt.showToast({
+ message: 'leave'
+ })
+ },
+ drop(e){
+ prompt.showToast({
+ message: 'drop'
+ })
+ }
+ }
+ ```
+
+ 
+
+5. Pinching7+
+
+ ```
+
+
+
+
+
+ ```
+
+ ```
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 454px;
+ height: 454px;}
+ .content{
+ width: 400px;
+ height: 400px;
+ background-color: aqua;
+ margin:30px
+ }
+ ```
+
+ ```
+ // xxx.js
+ import prompt from '@system.prompt';
+ export default {
+ pinchstart(e){
+ prompt.showToast({
+ message: 'pinchstart!!!'
+ })
+ },
+ pinchupdate(e){
+ prompt.showToast({
+ message: 'Two-finger pinch update'
+ })
+ },
+ pinchend(e){
+ prompt.showToast({
+ message: 'Finished with two fingers pinching'
+ })
+ },
+ pinchcancel(e){
+ prompt.showToast({
+ message: 'Finger pinching is interrupted'
+ })
+ }
+ }
+ ```
+
+ 
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-form.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-form.md
new file mode 100644
index 0000000000000000000000000000000000000000..7508a85a1ab09f220c05fedda318ae24e444d09d
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-form.md
@@ -0,0 +1,107 @@
+# form
+
+The **
+
+
+
+```
+
+```
+/* xxx.css */
+.doc-page {
+ flex-direction: column;
+}
+.top-list-item {
+ width:100%;
+ background-color:#D4F2E7;
+}
+.item-div {
+ flex-direction:column;
+ align-items:center;
+ justify-content:space-around;
+ height:240px;
+}
+.item-child {
+ width:100%;
+ height:60px;
+ justify-content:space-around;
+ align-items:center;
+}
+.item-group-child {
+ justify-content: center;
+ align-items: center;
+ width:100%;
+}
+```
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+ data: {
+ direction: 'column',
+ list: []
+ },
+ onInit() {
+ this.list = []
+ this.listAdd = []
+ for (var i = 1; i <= 3; i++) {
+ var dataItem = {
+ value: 'GROUP' + i,
+ };
+ this.list.push(dataItem);
+ }
+ },
+ collapseOne(e) {
+ this.$element('mylist').collapseGroup({
+ groupid: 'GROUP1'
+ })
+ },
+ expandOne(e) {
+ this.$element('mylist').expandGroup({
+ groupid: 'GROUP1'
+ })
+ },
+ collapseAll(e) {
+ this.$element('mylist').collapseGroup()
+ },
+ expandAll(e) {
+ this.$element('mylist').expandGroup()
+ },
+ collapse(e) {
+ prompt.showToast({
+ message: 'Close ' + e.groupid
+ })
+ },
+ expand(e) {
+ prompt.showToast({
+ message: 'Open ' + e.groupid
+ })
+ }
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list-item.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list-item.md
new file mode 100644
index 0000000000000000000000000000000000000000..af8fdffb9e58970b39b71ca345571e36e4bd8db9
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list-item.md
@@ -0,0 +1,168 @@
+# list-item
+
+**
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+// index.js
+export default {
+ data: {
+ todolist: [{
+ title: 'Prepare for the interview',
+ date: 'Dec 31, 2021 10:00:00',
+ }, {
+ title: 'Watch the movie',
+ date: 'Dec 31, 2021 20:00:00',
+ }],
+ },
+}
+```
+
+```
+/* index.css */
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ left: 0px;
+ top: 0px;
+ width: 454px;
+ height: 454px;
+}
+.todo-wrapper {
+ width: 454px;
+ height: 300px;
+}
+.todo-item {
+ width: 454px;
+ height: 80px;
+ flex-direction: column;
+}
+.todo-title {
+ width: 454px;
+ height: 40px;
+ text-align: center;
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-panel.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-panel.md
new file mode 100644
index 0000000000000000000000000000000000000000..049e0d5f647eadec0b2f695da6cbddbb8885474b
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-panel.md
@@ -0,0 +1,540 @@
+# panel
+
+The **
+
+```
+
+```
+/* xxx.css */
+.doc-page {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+.btn-div {
+ width: 100%;
+ height: 200px;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+.txt {
+ color: #000000;
+ font-weight: bold;
+ font-size: 39px;
+}
+.panel-div {
+ width: 100%;
+ flex-direction: column;
+ align-items: center;
+}
+.inner-txt {
+ width: 100%;
+ height: 160px;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+.inner-btn {
+ width: 100%;
+ height: 120px;
+ justify-content: center;
+ align-items: center;
+}
+```
+
+```
+// xxx.js
+export default {
+ data: {
+ modeFlag: "half"
+ },
+ showPanel() {
+ this.$element('simplepanel').show()
+ },
+ closePanel() {
+ this.$element('simplepanel').close()
+ },
+ changeMode(e) {
+ this.modeFlag = e.mode
+ }
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-popup.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-popup.md
new file mode 100644
index 0000000000000000000000000000000000000000..784e9ac5cede7b7f491f0c9ddb5bccb6f45942c1
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-popup.md
@@ -0,0 +1,242 @@
+# popup
+
+The **
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ align-items: center;
+ padding-top: 200px;
+}
+.popup {
+ mask-color: gray;
+}
+.text {
+ color: white;
+}
+.button {
+ width: 220px;
+ height: 70px;
+ margin-top: 50px;
+}
+```
+
+```
+// xxx.js
+import prompt from '@system.prompt'
+export default {
+ visibilitychange(e) {
+ prompt.showToast({
+ message: 'visibility change visibility: ' + e.visibility,
+ duration: 3000,
+ });
+ },
+ showpopup() {
+ this.$element("popup").show();
+ },
+ hidepopup() {
+ this.$element("popup").hide();
+ },
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-refresh.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-refresh.md
new file mode 100644
index 0000000000000000000000000000000000000000..3bba3f740b390b2b45da5f8dfbc4b83f1c3479c3
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-refresh.md
@@ -0,0 +1,264 @@
+# refresh
+
+The **
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+}
+
+.list {
+ width: 100%;
+ height: 100%;
+}
+
+.listitem {
+ width: 100%;
+ height: 150px;
+}
+
+.content {
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.text {
+ font-size: 35px;
+ font-weight: bold;
+}
+```
+
+```
+// xxx.js
+import prompt from '@system.prompt';
+export default {
+ data: {
+ list:[],
+ fresh:false
+ },
+ onInit() {
+ this.list = [];
+ for (var i = 0; i <= 3; i++) {
+ var item ='List element' + i;
+ this.list.push(item);
+ }
+ },
+ refresh: function (e) {
+ prompt.showToast({
+ message: 'Refreshing...'
+ })
+ var that = this;
+ that.fresh = e.refreshing;
+ setTimeout(function () {
+ that.fresh = false;
+ var addItem ='Refresh element';
+ that.list.unshift(addItem);
+ prompt.showToast({
+ message: 'Refreshed.'
+ })
+ }, 2000)
+ }
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-stack.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-stack.md
new file mode 100644
index 0000000000000000000000000000000000000000..8bce30af1c6222adfa4e09b7b8d0fe9ace958579
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-stack.md
@@ -0,0 +1,72 @@
+# stack
+
+The **
+
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ margin-top: 20px;
+ flex-direction: column;
+ align-items: center;
+ height: 300px;
+}
+.stepperItem {
+ flex-direction: column;
+ align-items: center;
+}
+.stepperItemContent {
+ color: #0000ff;
+ font-size: 50px;
+ justify-content: center;
+}
+.button {
+ width: 60%;
+ margin-top: 30px;
+ justify-content: center;
+}
+```
+
+```
+// xxx.js
+export default {
+ data: {
+ label_1:
+ {
+ prevLabel: 'BACK',
+ nextLabel: 'NEXT',
+ status: 'normal'
+ },
+ label_2:
+ {
+ prevLabel: 'BACK',
+ nextLabel: 'NEXT',
+ status: 'normal'
+ },
+ label_3:
+ {
+ prevLabel: 'BACK',
+ nextLabel: 'NEXT',
+ status: 'normal'
+ },
+ },
+ setRightButton(e) {
+ this.$element('mystepper').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ },
+ nextclick(e) {
+ var index = {
+ pendingIndex: e.pendingIndex
+ }
+ return index;
+ },
+ backclick(e) {
+ var index = {
+ pendingIndex: e.pendingIndex
+ }
+ return index;
+ },
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-swiper.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-swiper.md
new file mode 100644
index 0000000000000000000000000000000000000000..9e965577a4ef1e2b126dd9c43af517811b7a616b
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-swiper.md
@@ -0,0 +1,418 @@
+# swiper
+
+The **
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ align-items: center;
+}
+.swiper {
+ flex-direction: column;
+ align-content: center;
+ align-items: center;
+ width: 70%;
+ height: 130px;
+ border: 1px solid #000000;
+ indicator-color: #cf2411;
+ indicator-size: 14px;
+ indicator-bottom: 20px;
+ indicator-right: 30px;
+ margin-top: 100px;
+ next-margin:20px;
+ previous-margin:20px;
+}
+.swiperContent1{
+ height: 100%;
+ justify-content: center;
+ background-color: #007dff;
+}
+.swiperContent2{
+ height: 100%;
+ justify-content: center;
+ background-color: #ff7500;
+}
+.swiperContent3{
+ height: 100%;
+ justify-content: center;
+ background-color: #41ba41;
+}
+.button {
+ width: 70%;
+ margin: 10px;
+}
+.text {
+ font-size: 40px;
+}
+```
+
+```
+// xxx.js
+export default {
+ swipeTo() {
+ this.$element('swiper').swipeTo({index: 2});
+ },
+ showNext() {
+ this.$element('swiper').showNext();
+ },
+ showPrevious() {
+ this.$element('swiper').showPrevious();
+ }
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tab-bar.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tab-bar.md
new file mode 100644
index 0000000000000000000000000000000000000000..3abf5f747646e5e81d824ebabaa31cbb005f2f5a
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tab-bar.md
@@ -0,0 +1,60 @@
+# tab-bar
+
+**
+
+
+
+
+
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+}
+.tabs {
+ width: 100%;
+}
+.tabcontent {
+ width: 100%;
+ height: 80%;
+ justify-content: center;
+}
+.item-content {
+ height: 100%;
+ justify-content: center;
+}
+.item-title {
+ font-size: 60px;
+}
+.tab-bar {
+ margin: 10px;
+ height: 60px;
+ border-color: #007dff;
+ border-width: 1px;
+}
+.tab-text {
+ width: 300px;
+ text-align: center;
+}
+```
+
+```
+// xxx.js
+export default {
+ change: function(e) {
+ console.log("Tab index: " + e.index);
+ },
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container.md
new file mode 100644
index 0000000000000000000000000000000000000000..b9044baeb3d182e4e724ff9c2f79f898e56363a8
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container.md
@@ -0,0 +1,37 @@
+# Container Component
+
+- **[badge](js-components-container-badge.md)**
+
+- **[dialog](js-components-container-dialog.md)**
+
+- **[div](js-components-container-div.md)**
+
+- **[form](js-components-container-form.md)**
+
+- **[list](js-components-container-list.md)**
+
+- **[list-item](js-components-container-list-item.md)**
+
+- **[list-item-group](js-components-container-list-item-group.md)**
+
+- **[panel](js-components-container-panel.md)**
+
+- **[popup](js-components-container-popup.md)**
+
+- **[refresh](js-components-container-refresh.md)**
+
+- **[stack](js-components-container-stack.md)**
+
+- **[stepper](js-components-container-stepper.md)**
+
+- **[stepper-item](js-components-container-stepper-item.md)**
+
+- **[swiper](js-components-container-swiper.md)**
+
+- **[tabs](js-components-container-tabs.md)**
+
+- **[tab-bar](js-components-container-tab-bar.md)**
+
+- **[tab-content](js-components-container-tab-content.md)**
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-basic-usage.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-basic-usage.md
new file mode 100644
index 0000000000000000000000000000000000000000..0afdff1d1d9fbf7902ae02df9c6d09d47932aebf
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-basic-usage.md
@@ -0,0 +1,65 @@
+# Basic Usage
+
+Custom components are existing components encapsulated based on service requirements. A custom component can be invoked multiple times in a project to improve the code readability. You can introduce a custom component to the host page through **element** as shown in the following code snippet:
+
+```
+
+
+
+
+
+
+
+
+```
+
+The following is an example of using a custom component with **if-else**:
+
+```
+
+
+```
+
+- The **name** attribute indicates the custom component name \(optional\), which is case-insensitive and is in lowercase by default. The **src** attribute indicates the **.hml** file path \(mandatory\) of the custom component. If **name** is not set, the **.hml** file name is used as the component name by default.
+- Event binding: Use **\(on|@\)**_child1_ syntax to bind a child component event to a custom component. In the child component, use **this.$emit\('**_child1_**', \{params:'**_parameter to pass_**'\}\)** for event triggering and value transferring. In the parent component, call **bindParentVmMethod** method and receive the parameters passed from the child component.
+
+ > **NOTE:**
+ >For child component events that are named in camel case, convert the names to kebab case when binding the events to the parent component. For example, use **@children-event** instead of **childrenEvent**: **@children-event="bindParentVmMethod"**.
+
+
+## Object
+
+
+
+# Event Parameter
A child component can also pass parameters to an upper-layer component through the bound event. The following example describes how to pass parameters through the custom event:
diff --git a/en/application-dev/js-reference/custom-events.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-events.md
old mode 100755
new mode 100644
similarity index 95%
rename from en/application-dev/js-reference/custom-events.md
rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-events.md
index 6abcaebcbfc477438573b51216eb14b97071eba6..7b54fcf5922b079f241710f00238d8915e204f3f
--- a/en/application-dev/js-reference/custom-events.md
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-events.md
@@ -1,4 +1,4 @@
-# Custom Events
+# Custom Events
The following example describes how to define a child component **comp**:
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-lifecycle.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-lifecycle.md
new file mode 100644
index 0000000000000000000000000000000000000000..ae892a75a546db5133c92591743549cb591fd136
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-lifecycle.md
@@ -0,0 +1,117 @@
+# Lifecycle Definition
+
+> **NOTE:**
+>This component is supported since API version 5.
+
+We provide a range of lifecycle callbacks for custom components, including **onInit**, **onAttached**, **onDetached**, **onLayoutReady**, **onDestroy**, **onPageShow**, and **onPageHide**. 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.
+
+
+
+
+```
+
+
+
+```
+
+```
+//comp.js
+export default {
+ data: {
+ value: "Create a component."
+ },
+ onInit() {
+ console.log("Component created.")
+ },
+ onAttached() {
+ this.value = "Load the component."
+ },
+ onDetached() {
+ this.value = ""
+ },
+ onPageShow() {
+ console.log ("Page displayed.")
+ },
+ onPageHide() {
+ console.log ("Page hidden.")
+ }
+}
+```
+
diff --git a/en/application-dev/js-reference/props.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-props.md
old mode 100755
new mode 100644
similarity index 74%
rename from en/application-dev/js-reference/props.md
rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-props.md
index c6d298089db5a340a5b95972acfca266295dea38..3447328fbb5463cea57ef5c9ed4ebef100595bbe
--- a/en/application-dev/js-reference/props.md
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-props.md
@@ -1,11 +1,6 @@
-# Props
+# Props
-- [Default Value](#en-us_topic_0000001059148556_section448655843113)
-- [Unidirectional Value Transfer](#en-us_topic_0000001059148556_section9681151218247)
-- [Monitoring Data Changes by $watch](#en-us_topic_0000001059148556_section205821113182114)
-- [Computed Property](#en-us_topic_0000001059148556_section1088954011234)
-
-You can use **props** to declare attributes of a custom component. The attributes can be used by a parent component to pass parameters to a child component. Note that a camel case attribute name \(**compProp**\) should be converted to the kebab case format \(**comp-prop**\) when you reference the attribute in an external parent component. You can add **props** to a custom component, and pass the attribute to the child component.
+You can use **props** to declare attributes of a custom component and pass the attributes to the child component. The supported types of **props** include String, Number, Boolean, Array, Object, and Function. Note that a camel case attribute name \(**compProp**\) should be converted to the kebab case format \(**comp-prop**\) when you reference the attribute in an external parent component. You can add **props** to a custom component, and pass the attribute to the child component.
```
@@ -29,7 +24,10 @@ export default {
```
-## Default Value
+> **NOTE:**
+>The name of a custom attribute cannot start with reserved keywords such as **on**, **@**, **on:**, and **grab:**.
+
+## Default Value
You can set the default value for a child component attribute via **default**. The default value is used if the parent component does not have **default** set. In this case, the **props** attribute must be in object format instead of an array.
@@ -61,7 +59,7 @@ In this example, a **
+
+```
+
+The following references the custom component:
+
+```
+
+
+
+```
+
+## Named Slot
+
+When multiple slots are need inside a custom component, you can name them, so that you can specify the slot in which you want to fill content by setting the **
+
+```
+
+The following references the custom component:
+
+```
+
+
+
+```
+
+> **NOTE:**
+>**
+
+```
+
+```
+/* index.css */
+.container {
+ flex-direction: column;
+ padding-top: 80px;
+}
+```
+
+```
+// index.js
+import prompt from '@system.prompt';
+export default {
+ getCol(e) {
+ this.$element('mygrid').getColumns(function (result) {
+ prompt.showToast({
+ message: e.target.id + ' result = ' + result,
+ duration: 3000,
+ });
+ })
+ },
+ getColWidth(e) {
+ this.$element('mygrid').getColumnWidth(function (result) {
+ prompt.showToast({
+ message: e.target.id + ' result = ' + result,
+ duration: 3000,
+ });
+ })
+ }
+}
+```
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-container.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-container.md
new file mode 100644
index 0000000000000000000000000000000000000000..8f3d7dfbeabd71c07d1ffc46417c23d469b44a98
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-container.md
@@ -0,0 +1,278 @@
+# grid-container
+
+The **
+
+
+
+
+
+
+```
+
+
+
+```
+
+
+
+
+```
+
+
+
+```
+
+
+
+
+```
+
+
+
+```
+
+
+
+
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatemotion.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatemotion.md
new file mode 100644
index 0000000000000000000000000000000000000000..8ce363a1cf6fec0975df169d4ec543ed92258bc6
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatemotion.md
@@ -0,0 +1,94 @@
+# animateMotion
+
+The **
+
+
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatetransform.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatetransform.md
new file mode 100644
index 0000000000000000000000000000000000000000..6e43e82e616a1af9645cbc1ccc5d3a27a6d73b0c
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatetransform.md
@@ -0,0 +1,233 @@
+# animateTransform
+
+The **
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+ background-color: #f8f8ff;
+}
+
+.back_container {
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: flex-start;
+ height: 1000px;
+ width: 1080px;
+}
+```
+
+
+
+Animation overlay
+
+```
+
+
+
+
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+ background-color: #f8f8ff;
+}
+.back_container {
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: flex-start;
+ height: 1000px;
+ width: 1080px;
+}
+```
+
+
+
+Involved component example
+
+```
+
+
+
+
+
+
+```
+
+```
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+ background-color: #f8f8ff;
+}
+.back_container {
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: flex-start;
+ height: 1000px;
+ width: 1080px;
+}
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-circle.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-circle.md
new file mode 100644
index 0000000000000000000000000000000000000000..2289e069d8cd798c0a03f17e1dfb4737a9a5b708
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-circle.md
@@ -0,0 +1,93 @@
+# circle
+
+The **
+
+
+
+
+
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-common-attributes.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-common-attributes.md
new file mode 100644
index 0000000000000000000000000000000000000000..8d192ead2f2f1ebcc560f569e1e68591b9bc9768
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-common-attributes.md
@@ -0,0 +1,173 @@
+# Universal Attributes
+
+
+
+
+The **
+
+
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-line.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-line.md
new file mode 100644
index 0000000000000000000000000000000000000000..248eedba9b85be7cb1ec8af29a6617711ce101c8
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-line.md
@@ -0,0 +1,108 @@
+# line
+
+The **
+
+
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-path.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-path.md
new file mode 100644
index 0000000000000000000000000000000000000000..1797813f8b1e8ed6ec386dcb72f5b5fb93950399
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-path.md
@@ -0,0 +1,74 @@
+# path
+
+The **
+
+
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-polygon.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-polygon.md
new file mode 100644
index 0000000000000000000000000000000000000000..7c63ed5f485e874c116621dffbff91c1504a3fbd
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-polygon.md
@@ -0,0 +1,73 @@
+# polygon
+
+The **
+
+
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-polyline.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-polyline.md
new file mode 100644
index 0000000000000000000000000000000000000000..7929ec53824520ec869d851a8b071371b1e0c3a5
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-polyline.md
@@ -0,0 +1,73 @@
+# polyline
+
+The **
+
+
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-rect.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-rect.md
new file mode 100644
index 0000000000000000000000000000000000000000..d713d24739f398437e9d1411a0d1a9fab70f3e57
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-rect.md
@@ -0,0 +1,129 @@
+# rect
+
+The **
+
+
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-text.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-text.md
new file mode 100644
index 0000000000000000000000000000000000000000..6dee791d248041af39925b9440c1152e1552a86b
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-text.md
@@ -0,0 +1,277 @@
+# text
+
+The **
+
+
+```
+
+
+
+Attribute animation example
+
+```
+/* xxx.css */
+.container {
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: flex-start;
+ height: 3000px;
+ width: 1080px;
+}
+```
+
+```
+
+
+
+
+```
+
+
+
+```
+
+
+
+
+```
+
+
+
+```
+
+
+
+
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-textpath.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-textpath.md
new file mode 100644
index 0000000000000000000000000000000000000000..c00f7cb560bbea41ef5331e268492b87d191052b
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-textpath.md
@@ -0,0 +1,381 @@
+# textPath
+
+The **
+
+
+```
+
+
+
+Combination of **textpath** and **tspan**
+
+```
+
+
+
+
+```
+
+
+
+```
+
+
+
+
+```
+
+
+
+```
+
+
+
+
+```
+
+
+
+The following is an example of the **startOffset** animation. When the text is drawn, the start offset is moved from 10% to 40%, and the text whose length exceeds the path length range is not drawn.
+
+```
+/* xxx.css */
+.container {
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: flex-start;
+ height: 3000px;
+ width: 1080px;
+}
+```
+
+```
+
+
+
+
+```
+
+
+
+Animation and effect of the combination of **textpath** and **tspan**
+
+```
+
+
+
+
+```
+
+
+
+\(1\) "tspan attribute x|rotate" indicates that the text drawing start point moves from 50 px to 100 px and rotates clockwise by 0 degrees to 360 degrees.
+
+\(2\) "tspan attribute dx|opacity" is drawn after the "tspan static." drawing is complete. The offset moves from 0% to 30%, and the transparency changes from shallow to deep.
+
+\(3\) **tspan move**: After the previous **tspan** is drawn, the next tspan is drawn with an offset of 5% to show the effect of following the previous **tspan**.
+
+Animation and effect of the combination of **textpath** and **tspan**
+
+```
+
+
+
+
+```
+
+
+
+\(1\) **This is TextPath**.: Draw the first paragraph of text on the path without offset. The size is 30px, and the color is "\#D2691E".
+
+\(2\) The value of **tspan attribute fill|fill-opacity** is 20px offset from the end of the previous text segment. The color is from blue to red, and the transparency is from light to deep.
+
+\(3\) **tspan attribute font-size**: The drawing start point is 20px offset from the end of the previous segment. The start point is static, and the font size ranges from 10px to 50px. The overall length is continuously prolonged.
+
+\(4\) **Single tspan**: Draw a horizontal line at the end of the previous segment to follow the previous segment.
+
+Animation and effect of the combination of **textpath** and **tspan**
+
+```
+
+
+
+
+```
+
+
+
+\(1\) **tspan attribute stroke**: The stroke color gradually changes from red to green.
+
+\(2\) **tspan attribute stroke-width-opacity**: The contour width is changed from 1px to 5px, and the transparency is changed from shallow to deep.
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-tspan.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-tspan.md
new file mode 100644
index 0000000000000000000000000000000000000000..173feb122d5e0d6d81eb6c503384bb87961f9ddc
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-tspan.md
@@ -0,0 +1,305 @@
+# tspan
+
+> **NOTE:**
+>- The APIs of this module are supported since API version 7.
+>- The text content must be written in the content area. The **
+
+
+```
+
+
+
+Attribute animation example
+
+```
+/* xxx.css */
+.container {
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: flex-start;
+ height: 3000px;
+ width: 1080px;
+}
+```
+
+```
+
+
+
+
+```
+
+
+
+```
+
+
+
+
+```
+
+
+
+```
+
+
+
+
+```
+
+
+
+```
+
+
+
+
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg.md
new file mode 100644
index 0000000000000000000000000000000000000000..b8c870129351d66c777a7b8a4f0b07fefbdacdaa
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg.md
@@ -0,0 +1,123 @@
+# svg
+
+**
+
+
+```
+
+
+
diff --git a/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components.md
new file mode 100644
index 0000000000000000000000000000000000000000..775b92b37f0f963d68cb1d87ad7607c6f7a06c76
--- /dev/null
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-components.md
@@ -0,0 +1,17 @@
+# Components
+
+- **[Common](js-components-common.md)**
+
+- **[Container Component](js-components-container.md)**
+
+- **[Basic Components](js-components-basic.md)**
+
+- **[Media Components](js-components-media.md)**
+
+- **[Canvas Components \(Rich\)](js-components-canvas.md)**
+
+- **[Grid](js-components-grid.md)**
+
+- **[SVG Components](js-svg.md)**
+
+
diff --git a/en/application-dev/js-reference/file-organization.md b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-file.md
old mode 100755
new mode 100644
similarity index 35%
rename from en/application-dev/js-reference/file-organization.md
rename to en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-file.md
index fed8f8008693933fa630ed30eb29bfedc2b76a9c..2f5f79964a41a052b389311f8c9cb86a899e8d46
--- a/en/application-dev/js-reference/file-organization.md
+++ b/en/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-file.md
@@ -1,19 +1,15 @@
-# File Organization
+# File Organization
-- [Directory Structure](#en-us_topic_0000001058830797_section119431650182015)
-- [File Access Rules](#en-us_topic_0000001058830797_section6620355202117)
-- [Media File Formats](#en-us_topic_0000001058830797_section79731562617)
-
-## Directory Structure
+## Directory Structure
The following figure shows the typical directory structure of the JavaScript module \(**entry/src/main/js/module**\) for an application with feature abilities \(FA\) using JavaScript APIs.
-**Figure 1** Directory structure
+**Figure 1** Directory structure
.png)
-**Figure 2** Directory structure for resource sharing 5+
+**Figure 2** Directory structure for resource sharing 5+
Functions of the files are as follows:
@@ -24,19 +20,19 @@ Functions of the files are as follows:
Functions of the folders are as follows:
-- The **app.js** file manages global JavaScript logics and application lifecycle.
+- The **app.js** file manages global JavaScript logics and application lifecycle. For details, see [app.js](js-framework-js-file.md).
- The **pages** directory stores all component pages.
- The **common** directory stores public resource files, such as media resources, custom components, and **.js** files.
-- The **resources** directory stores resource configuration files, covering global styles and multi-resolution loading.
-- The **share** directory is used to configure resources shared by multiple instances. For example, images and JSON files in this directory can be shared by **default1** and **default2** instances.
+- The **resources** directory stores resource configuration files, for example, for multi-resolution loading. For details, see [Resource Limitations and Access](js-framework-resource-restriction.md).
+- The **share** directory5+ is used to configure resources shared by multiple instances. For example, images and JSON files in this directory can be shared by **default1** and **default2** instances.
-> **NOTE:**
->- The following reserved folders cannot be renamed:
-> - share
-> - resources
+> **NOTE:**
+>- Reserved folders \(**i18n** and **resources**\) cannot be renamed.
>- If the same resource name and directory are used under the **share** directory and the instance \(**default**\) directory, the resource in the instance directory will be used when you reference the directory.
+>- The **share** directory does not support **i18n**.
+>- You should create the optional folders \(shown in the directory structure\) as needed after you create the project in DevEco Studio.
-## File Access Rules
+## File Access Rules
Application resources can be accessed via an absolute or relative path. In the JS UI framework, an absolute path starts with a slash \(/\), and a relative path starts with **./** or **../**. The rules are as follows:
@@ -45,58 +41,81 @@ Application resources can be accessed via an absolute or relative path. In the J
- Store code files and resource files in the **common** directory and access the files in a required fashion.
- In a **.css** file, use the **url\(\)** function to create a URL, for example, **url\(/common/xxx.png\)**.
-> **NOTE:**
+> **NOTE:**
>When code file A needs to reference code file B:
>- If code files A and B are in the same directory, you can use either a relative or absolute path in code file B to reference resource files.
>- If code files A and B are in different directories, you must use an absolute path in code file B to reference resource files because the directory of code file B changes during Webpack packaging.
->Use an absolute path if you want to dynamically change the resource file path through data binding in a **.js** file.
+>- Use an absolute path if you want to dynamically change the resource file path through data binding in a **.js** file.
-## Media File Formats
+## Media File Formats
**Table 1** Supported image formats
-
-
|
|---|