diff --git a/en/application-dev/reference/arkui-js/js-components-basic-qrcode.md b/en/application-dev/reference/arkui-js/js-components-basic-qrcode.md index 2c353515b816e544af9948e162a9b18d1aefb815..5c3ac41ddfbe254387501071a8a21b3149495e91 100644 --- a/en/application-dev/reference/arkui-js/js-components-basic-qrcode.md +++ b/en/application-dev/reference/arkui-js/js-components-basic-qrcode.md @@ -1,119 +1,67 @@ -# qrcode +# qrcode -The **** component is used to generate and display a QR code. +The **\** component is used to generate and display a QR code. -## Required Permissions +> **NOTE** +> +> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version. + + +## Required Permissions None -## Child Components + +## Child Components Not supported -## Attributes - -In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

value

-

string

-

-

-

Yes

-

Content used to generate the QR code

-

type

-

string

-

rect

-

No

-

QR code type. Available values are as follows:

-
  • rect: rectangular QR code
  • circle: round QR code
-
- -## Styles - -In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

color

-

<color>

-

#000000

-

No

-

QR code color

-

background-color

-

<color>

-

#ffffff

-

No

-

QR code background color

-
- ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->- If the values of **width** and **height** are different, the smaller value is used as the length of the QR code. The generated QR code is center displayed. ->- If either **width** or **height** is set, the value is used as the length of the QR code. If neither of them is set, the default length is 200 px. - -## Events - -Events in [Universal Events](js-components-common-events.md) are supported. - -## Methods - -Methods in [Universal Methods](js-components-common-methods.md) are supported. - -## Example -``` +## Attributes + +In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported. + +| Name | Type | Default Value | Mandatory | Description | +| ----- | ------ | ---- | ---- | ---------------------------------------- | +| value | string | - | Yes | Content used to generate the QR code. | +| type | string | rect | No | QR code type. Available values are as follows:
- **rect**: rectangular QR code
- **circle**: round QR code| + + +## Styles + +In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported. + +| Name | Type | Default Value | Mandatory | Description | +| ---------------- | ------------- | -------- | ---- | -------- | +| color | <color> | \#000000 | No | Color of the QR code. | +| background-color | <color> | \#ffffff | No | Background color of the QR code.| + +> **NOTE** +> - If the values of **width** and **height** are different, the smaller value is used as the length of the QR code. The generated QR code is centered. +> +> +> - If either **width** or **height** is set, the value is used as the length of the QR code. If neither of them is set, the default length 200 px is used. +> + + +## Events + +The [universal events](../arkui-js/js-components-common-events.md) are supported. + +## Methods + +The [universal methods](../arkui-js/js-components-common-methods.md) are supported. + + +## Example + +```html
+ Value + 123 Type Color @@ -127,7 +75,7 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
``` -``` +```css /* xxx.css */ .container { width: 100%; @@ -146,10 +94,11 @@ select{ } ``` -``` +```js /* index.js */ export default { data: { + qr_value:'', qr_type: 'rect', qr_size: '300px', qr_col: '#87ceeb', @@ -176,5 +125,4 @@ export default { } ``` -![](figures/12.gif) - +![12](figures/12.gif) diff --git a/en/application-dev/reference/arkui-js/js-components-common-atomic-layout.md b/en/application-dev/reference/arkui-js/js-components-common-atomic-layout.md index 0e285159f68c1fe6c1be497f37b9a2f745499655..ab5c6fb8454469cffb018585cd5f8577bc7f1031 100644 --- a/en/application-dev/reference/arkui-js/js-components-common-atomic-layout.md +++ b/en/application-dev/reference/arkui-js/js-components-common-atomic-layout.md @@ -1,91 +1,34 @@ -# Atomic Layout +# 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. -## Hiding Components +> **NOTE** +> +> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version. + + +## 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. - - - - - - - - - - - - - -

Style

-

Type

-

Default Value

-

Description

-

display-index

-

number

-

0

-

Hide child components according to the ascending order of their display-index values when the space on the flex main axis of the container is insufficient to display all content.

-

Child components with the same display-index value are hidden at the same time.

-

You can use the default value (0) for a child component, which means that it will be hidden.

-

This style is applicable only to child components in a container that supports the flex layout, such as <div>.

-
+| Name | Type| Description| +| -------- | -------- | -------- | +| display-index | number | Display index of a child component. Child components are hidden according to the ascending order of their **display-index** values when the space on the flex main axis of the container is insufficient to display all content. Child components with the same display-index value are hidden at the same time.
Default value: **0** (means not to hide the child component)| + + +## Proportion -## Proportion +In a flex layout that does not support cross-row display, child components with the proportion style configured are always arranged with the set proportions in 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. +| Name | Type| Description| +| -------- | -------- | -------- | +| flex-weight | number | Size weight of a child component on the flex main axis. If this style is set for all child components in the container: Child component size = Container main axis size x flex-weight / Sum of size weights of all child components. If this style is set for only some child components in the container, the container first lays out the child components for which this style is not set and then allocates the remaining space to the set child components. Size of the set child component = Remaining space x flex-weight / Sum of size weights of all child components.| - - - - - - - - - - - - - -

Style

-

Type

-

Default Value

-

Description

-

flex-weight

-

number

-

-

-

Size weight of an element on the flex main axis.

-

Element size = Container main axis size x flex-weight / Sum of all element size weights.

-

This style takes effect only when it is set for all elements in the container.

-
-## Fixed Ratio +## Fixed Ratio A component with fixed ratio can be scaled up and down while retaining its aspect ratio. - - - - - - - - - - - - - -

Style

-

Type

-

Default Value

-

Description

-

aspect-ratio

-

number

-

-

-

Aspect ratio of the component. The value is a floating-point value greater than 0.

-

The value is subjective to the upper and lower limits of the component size.

-

In a flex layout, the main axis size is adjusted first, based on which the cross axis size is adjusted.

-
+| Name | Type| Description| +| -------- | -------- | -------- | +| aspect-ratio | number | Aspect ratio of the component. The value is a floating-point value greater than 0.
The value is subjective to the upper and lower limits of the component size.
In a flex layout, the main axis size is adjusted first, based on which the cross axis size is adjusted.| diff --git a/en/application-dev/reference/arkui-js/js-components-common-customizing-font.md b/en/application-dev/reference/arkui-js/js-components-common-customizing-font.md index 3f32ff3be75cbdb49ea11a54ec761021e7a00576..4054548e00f9e9b80e8d3fff5abc9d3cf209c2b4 100644 --- a/en/application-dev/reference/arkui-js/js-components-common-customizing-font.md +++ b/en/application-dev/reference/arkui-js/js-components-common-customizing-font.md @@ -1,10 +1,13 @@ -# Custom Font Styles - -**font-face** is used to define the font style. You can define **font-face** in **style** to specify a font name and resource for your application and then reference this font from **font-family**. +# Custom Font Styles The custom font can be loaded from the font file in a project. The font file must be in .ttf or .otf format. -## Defining @font-face +> **NOTE** +> +> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. + + +## Defining @font-face ``` @font-face { @@ -19,29 +22,31 @@ Customize a font. **src** -Supported sources of customized fonts: +Supported sources of custom fonts: + +- Font file in the project: Specify the absolute path of the font file in the project through **url**. For details, see [File Access Rules](../../ui/js-framework-file.md). -- Font file in the project: Specify the path of the font file in the project through **url**. \(You can use absolute paths only. For details, see [Resources and File Access Rules](../../ui/js-framework-file.md#section6620355202117).\) +- You can set only one **src** attribute. -- You can set only one **src** attribute. -## Using font-face +## Using font-face -You can set **font-face** in **style** and specify the name of the **font-face** using **font-family**. +You can set **font-face** in **style** and specify the name of the **font-face** using **font-family**. **Example** Page layout: - -``` +```html +
- Test the customized font. + Test the custom font.
``` Page style: -``` +```css +/*xxx.css*/ @font-face { font-family: HWfont; src: url("/common/HWfont.ttf"); @@ -50,4 +55,3 @@ Page style: font-family: HWfont; } ``` - diff --git a/en/application-dev/reference/arkui-js/js-components-container-div.md b/en/application-dev/reference/arkui-js/js-components-container-div.md index 72233839d037680ed96b107f69c09f3e58c8b27a..72f9ef211c9a55a003982c02089ef15641e840b6 100644 --- a/en/application-dev/reference/arkui-js/js-components-container-div.md +++ b/en/application-dev/reference/arkui-js/js-components-container-div.md @@ -1,9 +1,11 @@ # div -> **NOTE**
+The **\
** component is a basic container that is used as the root node of the page structure or is used to group the content. + +> **NOTE** +> > This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. -The **\
** component is a basic container that is used as the root node of the page structure or is used to group the content. ## Required Permissions @@ -24,24 +26,24 @@ The [universal attributes](../arkui-js/js-components-common-attributes.md) are s In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported. -| Name | Type | Default Value | Mandatory | Description | -| ------------------------------ | -------------- | ------------ | ---- | ---------------------------------------- | -| flex-direction | string | row | No | Main axis direction of the flex container, which defines how items are placed in the container. Available values are as follows:
- **column**: Items are placed vertically from top to bottom.
- **row**: Items are placed horizontally from left to right.| -| flex-wrap | string | nowrap | No | Whether items in the flex container are displayed in a single line or multiple lines. The value cannot be dynamically updated. Available values are as follows:
- **nowrap**: Items are displayed on a single axis.
- **wrap**: Items are displayed on multiple axes.| -| justify-content | string | flex-start | No | How items are aligned along the main axis of the flex container. Available values are as follows:
- **flex-start**: Items are packed towards the start row.
- **flex-end**: Items are packed towards the end row.
- **center**: Items are centered along the row.
- **space-between**: Items are positioned with space between the rows.
- **space-around**: Items are positioned with space before, between, and after the rows.
- **space-evenly**5+: Items are arranged with even space between each two.| -| align-items | string | stretch
| No | How items are aligned along the cross axis of the flex container. Available values are as follows:
- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction.
- **flex-start**: Items are aligned to the start of the cross axis.
- **flex-end**: Items are aligned to the end of the cross axis.
- **center**: Items are aligned in the center of the cross axis.| -| align-content | string | flex-start | No | Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:
- **flex-start**: All rows are packed towards the start of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.
- **flex-end**: All rows are packed towards the end of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.
- **center**: All rows are packed towards the center of the container. Rows are close to each other and aligned with the center of the container. The spacing between the start edge of the container's cross axis and the first row is equal to the spacing between the end edge of the container's cross axis and the last row.
- **space-between**: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.
- **space-around**: All rows are evenly distributed in the container, and the spacing between two adjacent lines is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.| -| display | string | flex | No | Type of the view box of the item. The value cannot be dynamically updated. Available values are as follows:
- **flex**: flexible layout.
- **grid**: grid layout.
- **none**: The box is disabled.
- **inline-flex**9+: layout with the **flex** and **inline-block** effects.| -| grid-template-[columns\|rows] | string | 1 row, 1 column | No | 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**.
Below are some example values of **grid-template-columns**:
- **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.
- **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.
- **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%.
- **repeat (2,100px)**: There are two columns. The first column is 100 px, and the second column is 100 px.
- **repeat(auto-fill,100px)**5+: Each column is 100 px and repeats to fill the cross axis. The number of columns is calculated based on the column size and the cross axis size.
- **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 rest two columns.| -| grid-[columns\|rows]-gap | \ | 0 | No | 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**.| -| grid-row-[start\|end] | number | - | No | Start and end row numbers of the current item in the grid layout. This attribute is valid only when the item's parent component is a **\
** container whose **display** style is set to **grid**.| -| grid-column-[start\|end] | number | - | No | Start and end column numbers of the current item in the grid layout. This attribute is valid only when the item's parent component is a **\
** container whose **display** style is set to **grid**.| -| grid-auto-flow5+ | string | - | No | How grid items are laid out automatically. Available values are as follows:
- **row**: Elements are filled row by row. When there is no horizontal space in a row, a new row is added.
- **column**: Elements are filled column by column. When there is no vertical space in a column, a new column is added.| -| overflow6+ | string | visible | No | Display mode when the content exceeds the container size. Available values are as follows:
- **visible**: Displays the extra content outside the container.
- **hidden**: Truncates the excess content.
- **scroll**: Scrolls the content vertically, with a scrollbar provided.
**scroll** works for elements whose size is fixed. By default, the scrolling direction is the same as the container direction.| -| align-items6+ | string | - | No | How items are aligned along the cross axis in a flex container. Available values are as follows:
- **stretch**: Items are stretched to the same height or width as the container in the cross axis direction.
- **flex-start**: Items are aligned to the start of the cross axis.
- **flex-end**: Items are aligned to the end of the cross axis.
- **center**: Items are aligned in the center of the cross axis.
- **baseline**: In a vertical layout, items are aligned to the start of the cross axis, which means that this value is equivalent of **flex-start**. In a horizontal layout, items are aligned with the text baseline if there is text involved, and aligned to the bottom otherwise.| -| scrollbar-color6+ | \ | - | No | Color of the scrollbar. | -| scrollbar-width6+ | \ | - | No | Width of the scrollbar. | -| overscroll-effect6+ | string | - | No | How the scrollbar behaves when it reaches the edge of the scrolling area. Available values are as follows:
- **spring**: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded.
- **fade**: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.
- **none**: No effect after the scroll bar is moved to the edge.| +| Name | Type | Default Value | Mandatory| Description | +| ------------------------------ | -------------- | ------------ | ---- | ------------------------------------------------------------ | +| flex-direction | string | row | No | Main axis direction of the flex container, which defines how items are placed in the container. Available values are as follows:
- **column**: Items are placed vertically from top to bottom.
- **row**: Items are placed horizontally from left to right.| +| flex-wrap | string | nowrap | No | Whether items in the flex container are displayed in a single line or multiple lines. The value cannot be dynamically updated. Available values are as follows:
- **nowrap**: Flex items are displayed in a single line.
- **wrap**: Flex items are displayed in multiple lines.| +| justify-content | string | flex-start | No | How items are aligned along the main axis of the flex container. Available values are as follows:
- **flex-start**: Items are packed toward the start edge of the container along the main axis.
- **flex-end**: Items are packed toward the end edge of the container along the main axis.
- **center**: Items are packed toward the center of the container along the main axis.
- **space-between**: Items are positioned with space between the rows.
- **space-around**: Items are positioned with space before, between, and after the rows.
- **space-evenly**5+: Items are distributed within the container along the main axis, with even space between each two.| +| align-items | string | stretch
| No | How items are aligned along the cross axis of the flex container. Available values are as follows:
- **stretch**: Items are stretched to the same height or width as the container along the cross axis.
- **flex-start**: Items are packed toward the start edge of the cross axis.
- **flex-end**: Items are packed toward the end edge of the cross axis.
- **center**: Items are packed toward the center of the cross axis.
- **baseline**: In a vertical layout, items are aligned to the start of the cross axis, which means that this value is equivalent of **flex-start**. In a horizontal layout, items are aligned with the text baseline if there is text involved, and aligned to the bottom otherwise.| +| align-content | string | flex-start | No | Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:
- **flex-start**: All rows are packed toward the start edge of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row.
- **flex-end**: All rows are packed toward the end edge of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row.
- **center**: All rows are packed toward the center of the cross axis. Rows are close to each other and aligned with the center of the container. The spacing between the start edge of the container's cross axis and the first row is equal to the spacing between the end edge of the container's cross axis and the last row.
- **space-between**: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively.
- **space-around**: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.| +| display | string | flex | No | Type of the view box of the item. The value cannot be dynamically updated. Available values are as follows:
- **flex**: flexible layout
- **grid**: grid layout
- **none**: not rendered
- **inline-flex**9+: layout with the **flex** and **inline-block** effects.| +| grid-template-[columns\|rows] | string | 1 row, 1 column | No | 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**.
Below are some example values of **grid-template-columns**:
- **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.
- **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.
- **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%.
- **repeat (2,100px)**: There are two columns. The first column is 100 px, and the second column is 100 px.
- **repeat(auto-fill,100px)**5+: Each column is 100 px and repeats to fill the cross axis. The number of columns is calculated based on the column size and the cross axis size.
- **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 rest two columns.| +| grid-[columns\|rows]-gap | <length> | 0 | No | 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**.| +| grid-row-[start\|end] | number | - | No | Start and end row numbers of the current item in the grid layout. This attribute is valid only when the item's parent component is a **\
** container whose **display** style is set to **grid**.| +| grid-column-[start\|end] | number | - | No | Start and end column numbers of the current item in the grid layout. This attribute is valid only when the item's parent component is a **\
** container whose **display** style is set to **grid**.| +| grid-auto-flow5+ | string | - | No | How grid items are laid out automatically. Available values are as follows:
- **row**: Elements are filled row by row. When there is no horizontal space in a row, a new row is added.
- **column**: Elements are filled column by column. When there is no vertical space in a column, a new column is added.| +| overflow6+ | string | visible | No | Display mode when the content exceeds the container size. Available values are as follows:
- **visible**: Displays the excess content outside the container.
- **hidden**: Truncates the excess content.
- **scroll**: Scrolls the content vertically, with a scrollbar provided.
**scroll** works for elements whose size is fixed. By default, the scrolling direction is the same as the container direction.| +| align-items6+ | string | - | No | How items are aligned along the cross axis in a flex container. Available values are as follows:
- **stretch**: Items are stretched to the same height or width as the flex container along the cross axis.
- **flex-start**: Items are aligned to the start of the cross axis.
- **flex-end**: Items are aligned to the end of the cross axis.
- **center**: Items are aligned in the center of the cross axis.
- **baseline**: In a vertical layout, items are aligned to the start of the cross axis, which means that this value is equivalent of **flex-start**. In a horizontal layout, items are aligned with the text baseline if there is text involved, and aligned to the bottom otherwise.| +| scrollbar-color6+ | <color> | - | No | Color of the scrollbar. | +| scrollbar-width6+ | <length> | - | No | Width of the scrollbar. | +| overscroll-effect6+ | string | - | No | How the scrollbar behaves when it reaches the edge of the scrolling area. Available values are as follows:
- **spring**: Similar to the physical dynamic effect of a spring. When the scrollbar reaches the edge, it can continue to scroll for a distance based on the initial speed or a touch event. It rebounds after being released.
- **fade**: Similar to the physical dynamic effect of fade. When the scrollbar reaches the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.
- **none**: No effect when the scrollbar reaches the edge.| ## Events @@ -59,7 +61,7 @@ In addition to the [universal events](../arkui-js/js-components-common-events.md In addition to the [universal methods](js-components-common-methods.md), the following methods are supported. -| Name | Name | Return Value | Description | +| Name | Parameter | Return Value | Description | | ---------------------------- | ----------- | ------------ | --------------------------------------- | | getScrollOffset6+ | - | ScrollOffset | Obtains the scrolling offset of the element content.
To use this method, **overflow** must be set to **scroll**.| | scrollBy6+ | ScrollParam | - | Sets the scrolling offset of the element content.
To use this method, **overflow** must be set to **scroll**.| diff --git a/en/application-dev/reference/arkui-js/js-components-container-stepper-item.md b/en/application-dev/reference/arkui-js/js-components-container-stepper-item.md index 07fc38fb979720ac7d4193522d15cb7d42e8cef3..c667c410dc89e77f6ec2e1f0a3bcf9ece2597dc6 100644 --- a/en/application-dev/reference/arkui-js/js-components-container-stepper-item.md +++ b/en/application-dev/reference/arkui-js/js-components-container-stepper-item.md @@ -1,230 +1,72 @@ -# stepper-item +# stepper-item -The **** component displays a step in the step navigator. This component is the child component of ****. +The **\** component displays a step in the step navigator. This component is the child component of **\**. -## Required Permissions +> **NOTE** +> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version. + +## Required Permissions None -## Child Components + +## Child Components Supported -## Attributes - -In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Triggered when

-

label

-

Label

-

-

-

No

-

Button text at the bottom of the customized step navigator. Dynamic modification is not supported. If this attribute is not set, BACK and NEXT will be used by default as button text in case the system language is not Chinese. For the first step, there is no previous button. For the last step, the text on the next button is START for non-Chinese languages by default.

-
- -**Table 1** Label parameters - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Triggered when

-

prevLabel

-

string

-

-

-

Text content of the previous button at the bottom of the step navigator.

-

nextLabel

-

string

-

-

-

Text content of the next button at the bottom of the step navigator.

-

status

-

string

-

normal

-

Initial status of the current step in the step navigator. Available values are as follows:

-
  • normal: The right button is clickable and can navigate users to the next step when it is clicked.
-
  • disabled: The right button is grayed out and unavailable.
-
  • waiting: The right button is not displayed, and a progress bar is displayed instead.
-
- -## Styles - -In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Triggered when

-

color

-

<color>

-

-

-

No

-

Text color.

-

font-size

-

<length>

-

-

-

No

-

Text size.

-

allow-scale

-

boolean

-

true

-

No

-

Whether the text size changes with the system's font size settings.

-

font-style

-

string

-

normal

-

No

-

Text font style. Available values are as follows:

-
  • normal: standard font style
  • italic: italic font style
-

font-weight

-

number|string

-

normal

-

No

-

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-decoration

-

string

-

none

-

No

-

Text decoration. Available values are as follows:

-
  • underline: An underline is used.
  • line-through: A strikethrough is used.
  • none: The standard text is used.
-

font-family

-

string

-

sans-serif

-

No

-

Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.

-
- ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->- Height and width styles are not supported. The width of each item is the same as that of its container. The height of each item is the difference between the container height and the bottom button height. ->- The **posit** style is not supported. - -## Events - -In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. - - - - - - - - - - - - - - - - -

Name

-

Parameter

-

Description

-

appear

-

-

-

Triggered when this step is displayed.

-

disappear

-

-

-

Triggered when this step disappears.

-
- -## Methods - -Methods in [Universal Methods](js-components-common-methods.md) are not supported. - -## Example - -For details, see the [stepper example code](js-components-container-stepper.md). +## Attributes + +In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported. + +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| label | Label | No| Button text at the bottom of the customized step navigator. Dynamic modification is not supported. If this attribute is not set, **BACK** and **NEXT** will be used by default as button text in case the system language is not Chinese. For the first step, there is no previous button. For the last step, the text on the next button is **START** for non-Chinese languages by default.| + +**Table 1** label + +| Name| Type| Default Value| Description| +| -------- | -------- | -------- | -------- | +| prevLabel | string | - | Text content of the previous button at the bottom of the step navigator.| +| nextLabel | string | - | Text content of the next button at the bottom of the step navigator.| +| status | string | normal | Initial status of the current step in the step navigator. Available values are as follows:
- **normal**: The right button is clickable and can navigate users to the next step when it is clicked.
- **disabled**: The right button is grayed out and unavailable.
- **waiting**: The right button is not displayed, and a progress bar is displayed instead.| + + +## Styles + +In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported. + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| color | <color> | - | No| Text color.| +| font-size | <length> | - | No| Text size.| +| allow-scale | boolean | true | No| Whether the font size changes with the system's font size settings.| +| font-style | string | normal | No| Text font style. Available values are as follows:
- **normal**: standard font style
- **italic**: italic font style| +| font-weight | number\|string | normal | No| 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-decoration | string | none | No| Text decoration. Available values are as follows:
- **underline**: An underline is used.
- **line-through**: A strikethrough is used.
- **none**: The standard text is used.| +| font-family | string | sans-serif | No| Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.| + +> **NOTE** +> - Height and width styles are not supported. The width of each item is the same as that of its container. The height of each item is the difference between the container height and the bottom button height. +> +> - The **posit** style is not supported. + + +## Events + +In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported. + +| Name| Parameter| Description| +| -------- | -------- | -------- | +| appear | - | Triggered when this step is displayed.| +| disappear | - | Triggered when this step disappears.| + + +## Method + +The [universal methods](../arkui-js/js-components-common-methods.md) are supported. + + +## Example + +For details, see **Example** in [stepper](../arkui-js/js-components-container-stepper.md). diff --git a/en/application-dev/reference/arkui-js/js-components-container-tab-content.md b/en/application-dev/reference/arkui-js/js-components-container-tab-content.md index 7de7d1f55296d9e1a1358e147d61e9e66d32a137..09dd135cffdeba9254544bc14f662637aef3c847 100644 --- a/en/application-dev/reference/arkui-js/js-components-container-tab-content.md +++ b/en/application-dev/reference/arkui-js/js-components-container-tab-content.md @@ -1,55 +1,41 @@ -# tab-content +# tab-content -**** is a child component of [](js-components-container-tabs.md) and is used to provide the area for displaying the tab content. By default, its height is such that all the remaining space of the **** component is filled. The child components are arranged horizontally. When **** is used as a child element in a container, the length on the main axis direction must be specified. Otherwise, the child element cannot be displayed. +**** is a child component of **[](js-components-container-tabs.md)** and is used to provide the area for displaying the tab content. By default, its height is such that all the remaining space of the **** component is filled. The child components are arranged horizontally. When **** is used as a child element in a container, its length along the main axis must be specified. Otherwise, it cannot be displayed. -## Required Permissions +> **NOTE** +> +> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. + + +## Required Permissions None -## Child Components + +## Child Components Supported -## Attributes - -In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

scrollable

-

boolean

-

true

-

No

-

Whether the tabs can be switched by swiping left or right. The default value is true. If this attribute is set to false, tab switching is implemented only through the association with tab-bar.

-
- -## Styles - -Styles in [Universal Styles](js-components-common-styles.md) are supported. - -## Events - -Events in [Universal Events](js-components-common-events.md) are supported. - -## Example - -For details, see the [tabs example code](js-components-container-tabs.md#section14993155318710). +## Attributes + +In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported. + +| Name | Type| Mandatory| Description| +| -------- | -------- | -------- | -------- | +| scrollable | boolean | No| Whether the tabs can be switched by swiping left or right. The default value is **true**. If this attribute is set to **false**, tab switching is implemented only through the association with **tab-bar**.| + + +## Styles + +The [universal styles](../arkui-js/js-components-common-styles.md) are supported. + + +## Events + +The [universal events](../arkui-js/js-components-common-events.md) are supported. + + +## Example + +For details, see **Example** in [tabs](../arkui-js/js-components-container-tabs.md#example). diff --git a/en/application-dev/reference/arkui-js/js-components-svg-circle.md b/en/application-dev/reference/arkui-js/js-components-svg-circle.md index b83f3c4e8f25a788f4e10c9b5302390df983297a..66e793fe790ccc471f91e271b8ae92163d507ac3 100644 --- a/en/application-dev/reference/arkui-js/js-components-svg-circle.md +++ b/en/application-dev/reference/arkui-js/js-components-svg-circle.md @@ -1,85 +1,37 @@ -# circle +# circle -The **** component is used to draw circles. +The **\** component is used to draw circles. ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +> **NOTE** +> +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -## Required Permissions + +## Required Permissions None -## Child Components - -**animate**, **animateMotion**, and **animateTransform** are supported. - -## Attributes - -The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of the component.

-

cx

-

<length>|<percentage>

-

0

-

No

-

X-coordinate of the circle center. Attribute animations are supported.

-

cy

-

<length>|<percentage>

-

0

-

No

-

Y-coordinate of the circle center. Attribute animations are supported.

-

r

-

<length>|<percentage>

-

0

-

No

-

Radius of the circle. Attribute animations are supported.

-
- -## Example -``` +## Child Components + +The following are supported: [\](js-components-svg-animate.md), [\](js-components-svg-animatemotion.md), and [\](js-components-svg-animatetransform.md). + + +## Attributes + +The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported. + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | No| Unique ID of the component.| +| cx | <length>\|<percentage> | 0 | No| X-coordinate of the circle center. Attribute animations are supported.| +| cy | <length>\|<percentage> | 0 | No| Y-coordinate of the circle center. Attribute animations are supported.| +| r | <length>\|<percentage> | 0 | No| Radius of the circle. Attribute animations are supported.| + + +## Example + +```html
@@ -89,5 +41,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att
``` -![](figures/en-us_image_0000001173164853.png) +![en-us_image_0000001173164853](figures/en-us_image_0000001173164853.png) diff --git a/en/application-dev/reference/arkui-js/js-components-svg-common-attributes.md b/en/application-dev/reference/arkui-js/js-components-svg-common-attributes.md index 41708e4000c2be922448df292ce6cb1fad608f69..320afdc08a080c100ea224d022cadb5420f43a5e 100644 --- a/en/application-dev/reference/arkui-js/js-components-svg-common-attributes.md +++ b/en/application-dev/reference/arkui-js/js-components-svg-common-attributes.md @@ -1,176 +1,22 @@ -# Universal Attributes +# Universal Attributes ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->Universal attributes are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +> **NOTE** +> +> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

fill

-

<color>

-

black

-

No

-

Fill color of an element using the shorthand attribute. Attribute animations are supported.

-

fill-opacity

-

number

-

1

-

No

-

Opacity of a fill color. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. Attribute animations are supported.

-

fill-rule

-

nonzero | evenodd

-

nonzero

-

No

-

nonzero: non-zero rule; evenodd: parity rule.

-

opacity

-

number

-

1

-

No

-

Opacity of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. Attribute animations are supported.

-

stroke

-

<color>

-

-

-

No

-

Color of the stroke. Attribute animations are supported.

-

stroke-dasharray

-

<string>

-

-

-

No

-

Length of the dashes and notches. The format is [length length length length]. The length values of dashes and notches are separated by a space and appear in pairs.

-

stroke-dashoffset

-

<length>

-

0

-

No

-

Offset for rendering the associated dash line array. Attribute animations are supported.

-

stroke-linejoin

-

[bevel | miter | round]

-

miter

-

No

-

The shape used at the corner of a path when stroked.

-

bevel: connects paths with bevel corners.

-

miter: connects paths with mitered corners.

-

round: connects paths with rounded corners.

-

stroke-linecap

-

[butt | round | square]

-

butt

-

No

-

The shape used at the end of paths when stroked.

-

butt: The stroke for each path does not extend beyond its two endpoints.

-

round: At the end of each path the stroke is extended by a half circle with a diameter equal to the stroke width.

-

square: At the end of each path the stroke is extended by a half circle, with the width being equal to half of the stroke width, and the height being equal to the stroke width.

-

stroke-miterlimit

-

number

-

4

-

No

-

Limit value when the sharp angle is drawn as a miter. Attribute animations are supported.

-

stroke-opacity

-

number

-

1

-

No

-

Opacity of the stroke. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. Attribute animations are supported.

-

stroke-width

-

<length>

-

1px

-

No

-

Stroke width. Attribute animations are supported.

-

transform

-

<string>

-

-

-

No

-

Coordinate transformation parameters of the component and its child components.

-

The following formats are supported:

-

translate(<x> [<y>]): translates along the x[y]-axis.

-

scale(<x> [<y>]): scales along the x[y]-axis.

-

rotate(<a> [<x> <y>]): rotates at an angle of a with (x,y) as the center.

-

skewX(<a>): skews at an angle of a along the x-axis.

-

skewY(<a>): skews at an angle of a along the y-axis.

-
+| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| fill | <color> | black | No| Fill color of an element using the shorthand attribute. Attribute animations are supported.| +| fill-opacity | number | 1 | No| Opacity of a fill color. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.| +| fill-rule | nonzero \| evenodd | nonzero | No| Fill rule.
**nonzero**: non-zero rule.
**evenodd**: parity rule.| +| opacity | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.| +| stroke | <color> | - | No| Color of the stroke. Attribute animations are supported.| +| stroke-dasharray | <string> | - | No| Length of the dashes and notches. The format is [length length length length]. The length values of dashes and notches are separated by a space and appear in pairs.| +| stroke-dashoffset | <length> | 0 | No| Offset for rendering the associated dash line array. Attribute animations are supported.| +| stroke-linejoin | [bevel \| miter \| round] | miter | No| The shape used at the corner of a path when stroked.
**bevel**: connects paths with bevel corners.
**miter**: connects paths with mitered corners.
**round**: connects paths with rounded corners.| +| stroke-linecap | [butt \| round \| square] | butt | No| The shape used at the end of paths when stroked.
**butt**: The stroke for each path does not extend beyond its two endpoints.
**round**: At the end of each path the stroke is extended by a half circle with a diameter equal to the stroke width.
**square**: At the end of each path the stroke is extended by a half circle, with the width being equal to half of the stroke width, and the height being equal to the stroke width.| +| stroke-miterlimit | number | 4 | No| Limit value when the sharp angle is drawn as a miter. Attribute animations are supported.| +| stroke-opacity | number | 1 | No| Opacity of the stroke. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.| +| stroke-width | <length> | 1px | No| Stroke width. Attribute animations are supported.| +| transform | <string> | - | No| Coordinate transformation parameters of the component and its child components.
The following formats are supported:
**translate(\ [\])**: translates along the x[y]-axis.
**scale(\ [\])**: scales along the x[y]-axis.
**rotate(\ [\ \])**: rotates at an angle of **a** with point (x,y) as the center.
**skewX(\)**: skews at an angle of **a** along the x-axis.
**skewY(\)**: skews at an angle of **a** along the y-axis. | diff --git a/en/application-dev/reference/arkui-js/js-components-svg-ellipse.md b/en/application-dev/reference/arkui-js/js-components-svg-ellipse.md index 26e2940fc0d631b63c6713b0e8f162478866081c..1d790bb7cf468e75dc8cd070e01fd42beddf1574 100644 --- a/en/application-dev/reference/arkui-js/js-components-svg-ellipse.md +++ b/en/application-dev/reference/arkui-js/js-components-svg-ellipse.md @@ -1,96 +1,38 @@ -# ellipse +# ellipse -The **** component is used to draw oval shapes. +The **\** component is used to draw oval shapes. ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +> **NOTE** +> +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -## Required Permissions + +## Required Permissions None -## Child Components - -**animate**, **animateMotion**, and **animateTransform** are supported. - -## Attributes - -The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of the component.

-

cx

-

<length>|<percentage>

-

0

-

No

-

X-coordinate of the oval shape. Attribute animations are supported.

-

cy

-

<length>|<percentage>

-

0

-

No

-

Y-coordinate of the oval shape. Attribute animations are supported.

-

rx

-

<length>|<percentage>

-

0

-

No

-

Radius of the oval shape on the x-axis. Attribute animations are supported.

-

ry

-

<length>|<percentage>

-

0

-

No

-

Radius of the oval shape on the y-axis. Attribute animations are supported.

-
- -## Example -``` +## Child Components + +The following are supported: [\](js-components-svg-animate.md), [\](js-components-svg-animatemotion.md), and [\](js-components-svg-animatetransform.md). + + +## Attributes + +The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported. + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | No| Unique ID of the component.| +| cx | <length>\|<percentage> | 0 | No| X-coordinate of the oval shape. Attribute animations are supported.| +| cy | <length>\|<percentage> | 0 | No| Y-coordinate of the oval shape. Attribute animations are supported.| +| rx | <length>\|<percentage> | 0 | No| Radius of the oval shape on the x-axis. Attribute animations are supported.| +| ry | <length>\|<percentage> | 0 | No| Radius of the oval shape on the y-axis. Attribute animations are supported.| + + +## Example + +```html
@@ -100,5 +42,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att
``` -![](figures/en-us_image_0000001173164793.png) +![en-us_image_0000001173164793](figures/en-us_image_0000001173164793.png) diff --git a/en/application-dev/reference/arkui-js/js-components-svg-line.md b/en/application-dev/reference/arkui-js/js-components-svg-line.md index 6ec9f30e742e29c148f4e312afcc31feb6c55bea..f181199036a0d71e2e26e8a66cc3b9d05527ec04 100644 --- a/en/application-dev/reference/arkui-js/js-components-svg-line.md +++ b/en/application-dev/reference/arkui-js/js-components-svg-line.md @@ -1,108 +1,53 @@ -# line +# line -The **** component is used to draw a line. +The **\** component is used to draw a line. ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +> **NOTE** +> +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -## Required Permissions + +## Required Permissions None -## Child Components - -**animate**, **animateMotion**, and **animateTransform** are supported. - -## Attributes - -The universal attributes as well as the attributes listed below are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of the component.

-

x1

-

<length>|<percentage>

-

-

-

No

-

X-coordinate of the start point of the line. Attribute animations are supported.

-

y1

-

<length>|<percentage>

-

-

-

No

-

Y-coordinate of the start point of the line. Attribute animations are supported.

-

x2

-

<length>|<percentage>

-

-

-

No

-

X-coordinate of the end point of the line. Attribute animations are supported.

-

y2

-

<length>|<percentage>

-

-

-

No

-

Y-coordinate of the end point of the line. Attribute animations are supported.

-
- -## Example -``` +## Child Components + +The following are supported: [\](js-components-svg-animate.md), [\](js-components-svg-animatemotion.md), and [\](js-components-svg-animatetransform.md). + + +## Attributes + +The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported. + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | No| Unique ID of the component.| +| x1 | <length>\|<percentage> | - | No| X-coordinate of the start point of the line. Attribute animations are supported.| +| y1 | <length>\|<percentage> | - | No| Y-coordinate of the start point of the line. Attribute animations are supported.| +| x2 | <length>\|<percentage> | - | No| X-coordinate of the end point of the line. Attribute animations are supported.| +| y2 | <length>\|<percentage> | - | No| Y-coordinate of the end point of the line. Attribute animations are supported.| + + +## Example + +```html
+ // round: At the end of each path the stroke is extended by a half circle with a diameter equal to the stroke width. + // butt: The stroke for each path does not extend beyond its two endpoints. + // square: At the end of each path the stroke is extended by a half circle, with the width being equal to half of the stroke width, and the height being equal to the stroke width.
``` -![](figures/en-us_image_0000001127284954.png) +![en-us_image_0000001127284954](figures/en-us_image_0000001127284954.png) diff --git a/en/application-dev/reference/arkui-js/js-components-svg-path.md b/en/application-dev/reference/arkui-js/js-components-svg-path.md index a6f78eca6161b55eb5fed2fcf4ae624bd8199953..a1e114c49db8f8d608a4137b91fcd50fba9c5453 100644 --- a/en/application-dev/reference/arkui-js/js-components-svg-path.md +++ b/en/application-dev/reference/arkui-js/js-components-svg-path.md @@ -1,65 +1,34 @@ -# path +# path -The **** component is used to draw a path. +The **\** component is used to draw a path. ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +> **NOTE** +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -## Required Permissions + +## Required Permissions None -## Child Components - -**animate**, **animateMotion**, and **animateTransform** are supported. - -## Attributes - -The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported. The configured universal attributes are passed to the child components. - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of the component.

-

d

-

string

-

-

-

No

-

Shape of the path. The value contains a group of character instructions. Uppercase letters are absolute paths, and lowercase letters are relative paths.

-

The meanings of the letters are as follows:

-
  • M/m = moveto
  • L/l = lineto
  • H/h = horizontal lineto
  • V/v = vertical lineto
  • C/c = curveto
  • S/s = smooth curveto
  • Q/q = quadratic Belzier curve
  • T/t = smooth quadratic Belzier curveto
  • A/a = elliptical Arc
  • Z/z = closepath
-
- -## Example -``` +## Child Components + +The following are supported: [\](js-components-svg-animate.md), [\](js-components-svg-animatemotion.md), and [\](js-components-svg-animatetransform.md). + + +## Attributes + +The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported. The configured universal attributes are passed to the child components. + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | No| Unique ID of the component.| +| d | string | - | No| Shape of the path. The value contains a group of character instructions. Uppercase letters are absolute paths, and lowercase letters are relative paths.
The meanings of the letters are as follows:
- M/m = moveto
- L/l = lineto
- H/h = horizontal lineto
- V/v = vertical lineto
- C/c = curveto
- S/s = smooth curveto
- Q/q = quadratic Belzier curve
- T/t = smooth quadratic Belzier curveto
- A/a = elliptical Arc
- Z/z = closepath | + + +## Example + +```html
@@ -70,5 +39,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att
``` -![](figures/en-us_image_0000001173164891.png) +![en-us_image_0000001173164891](figures/en-us_image_0000001173164891.png) diff --git a/en/application-dev/reference/arkui-js/js-components-svg-polygon.md b/en/application-dev/reference/arkui-js/js-components-svg-polygon.md index 378be8a30a6fa4a0124d113a64b2eead3b19a79a..d747dc84673e72fa6e262509ee77469a3ee6515a 100644 --- a/en/application-dev/reference/arkui-js/js-components-svg-polygon.md +++ b/en/application-dev/reference/arkui-js/js-components-svg-polygon.md @@ -1,65 +1,35 @@ -# polygon +# polygon -The **** component is used to draw a polygon. +The **\** component is used to draw a polygon. ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -## Required Permissions +> **NOTE** +> +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. + +## Required Permissions None -## Child Components - -**animate**, **animateMotion**, and **animateTransform** are supported. - -## Attributes - -The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported. - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of the component.

-

points

-

string

-

-

-

No

-

Multiple coordinates of the polygon.

-

The format is [x1,y1 x2,y2 x3,y3].

-

Attribute animations are supported. If the number of coordinates of the animation change value set in the attribute animation is different from the format of the original points, the attribute animation is invalid.

-
- -## Example -``` +## Child Components + +The following are supported: [\](js-components-svg-animate.md), [\](js-components-svg-animatemotion.md), and [\](js-components-svg-animatetransform.md). + + +## Attributes + +The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported. + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | No| Unique ID of the component.| +| points | string | - | No| Multiple coordinates of the polygon.
The format is [x1,y1 x2,y2 x3,y3].
Attribute animations are supported. If the number of coordinates of the animation change value set in the attribute animation is different from the format of the original points, the attribute animation is invalid.| + + +## Example + +```html
@@ -69,5 +39,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att
``` -![](figures/en-us_image_0000001173324721.png) +![en-us_image_0000001173324721](figures/en-us_image_0000001173324721.png) diff --git a/en/application-dev/reference/arkui-js/js-components-svg-polyline.md b/en/application-dev/reference/arkui-js/js-components-svg-polyline.md index ddefca98447ae302fa9036bec278c8d1ebc46c85..c9dd021fecbccab76ea5f75f2a836653907657dd 100644 --- a/en/application-dev/reference/arkui-js/js-components-svg-polyline.md +++ b/en/application-dev/reference/arkui-js/js-components-svg-polyline.md @@ -1,65 +1,35 @@ -# polyline +# polyline -The **** component is used to draw a polyline. +The **\** component is used to draw a polyline. ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +> **NOTE** +> +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -## Required Permissions + +## Required Permissions None -## Child Components - -**animate**, **animateMotion**, and **animateTransform** are supported. - -## Attributes - -The universal attributes as well as the attributes listed below are supported. - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of the component.

-

points

-

string

-

-

-

No

-

Multiple coordinates of the polyline.

-

The format is [x1,y1 x2,y2 x3,y3].

-

Attribute animations are supported. If the number of coordinates of the animation change value set in the attribute animation is different from the format of the original points, the attribute animation is invalid.

-
- -## Example -``` +## Child Components + +The following are supported: [\](js-components-svg-animate.md), [\](js-components-svg-animatemotion.md), and [\](js-components-svg-animatetransform.md). + + +## Attributes + +The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported. + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | No| Unique ID of the component.| +| points | string | - | No| Multiple coordinates of the polyline.
The format is [x1,y1 x2,y2 x3,y3].
Attribute animations are supported. If the number of coordinates of the animation change value set in the attribute animation is different from the format of the original points, the attribute animation is invalid.| + + +## Example + +```html
@@ -69,5 +39,5 @@ The universal attributes as well as the attributes listed below are supported.
``` -![](figures/en-us_image_0000001173164845.png) +![en-us_image_0000001173164845](figures/en-us_image_0000001173164845.png) diff --git a/en/application-dev/reference/arkui-js/js-components-svg-rect.md b/en/application-dev/reference/arkui-js/js-components-svg-rect.md index 1b9ee69bba4ff67d311a08d6910b4d84cf03c472..0f24ac3749497acd8c5b826367882a185cde54a9 100644 --- a/en/application-dev/reference/arkui-js/js-components-svg-rect.md +++ b/en/application-dev/reference/arkui-js/js-components-svg-rect.md @@ -1,118 +1,40 @@ -# rect +# rect -The **** component is used to draw rectangles and rounded rectangles. +The **\** component is used to draw rectangles and rounded rectangles. ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +> **NOTE** +> +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -## Required Permissions + +## Required Permissions None -## Child Components - -**animate**, **animateMotion**, and **animateTransform** are supported. - -## Attributes - -The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of the component.

-

width

-

<length>|<percentage>

-

0

-

No

-

Width of a rectangle. Attribute animations are supported.

-

height

-

<length>|<percentage>

-

0

-

No

-

Height of a rectangle. Attribute animations are supported.

-

x

-

<length>|<percentage>

-

0

-

No

-

X-coordinate of the upper left corner of the rectangle. Attribute animations are supported.

-

y

-

<length>|<percentage>

-

0

-

No

-

Y-coordinate of the upper left corner of the rectangle. Attribute animations are supported.

-

rx

-

<length>|<percentage>

-

0

-

No

-

Radius of the rectangle rounded corner in the x-axis direction. Attribute animations are supported.

-

ry

-

<length>|<percentage>

-

0

-

No

-

Radius of the rectangle rounded corner in the y-axis direction. Attribute animations are supported.

-
- -## Example -``` +## Child Components + +The following are supported: [\](js-components-svg-animate.md), [\](js-components-svg-animatemotion.md), and [\](js-components-svg-animatetransform.md). + + +## Attributes + +The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported. + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | No| Unique ID of the component.| +| width | <length>\|<percentage> | 0 | No| Width of the rectangle. Attribute animations are supported.| +| height | <length>\|<percentage> | 0 | No| Height of the rectangle. Attribute animations are supported.| +| x | <length>\|<percentage> | 0 | No| X-coordinate of the upper left corner of the rectangle. Attribute animations are supported.| +| y | <length>\|<percentage> | 0 | No| Y-coordinate of the upper left corner of the rectangle. Attribute animations are supported.| +| rx | <length>\|<percentage> | 0 | No| Radius of the rectangle rounded corner in the x-axis direction. Attribute animations are supported.| +| ry | <length>\|<percentage> | 0 | No| Radius of the rectangle rounded corner in the y-axis direction. Attribute animations are supported.| + + +## Example + +```html
@@ -125,5 +47,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att
``` -![](figures/0.png) +![0](figures/0.png) diff --git a/en/application-dev/reference/arkui-js/js-components-svg-text.md b/en/application-dev/reference/arkui-js/js-components-svg-text.md index 41a4f5086f80cae11ed3be3f0ded52ebc2b75c64..c947bc9399b7abae6d343d2b3ea7c72766136f53 100644 --- a/en/application-dev/reference/arkui-js/js-components-svg-text.md +++ b/en/application-dev/reference/arkui-js/js-components-svg-text.md @@ -4,6 +4,7 @@ The **\** component is used to display a piece of textual information. > **NOTE** +> > - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > > - The text content must be written in the content area. The **tspan** sub-element label can be nested to segment the text content. The **textPath** sub-element label can be nested to draw the text content based on the specified path. @@ -19,7 +20,7 @@ None ## Child Components -The **\**, **\**, **\**, and **\** child components are supported. +The following are supported: [\](js-components-svg-tspan.md), [\](js-components-svg-textpath.md), [\](js-components-svg-animate.md), and [\](js-components-svg-animatetransform.md). ## Attributes @@ -29,16 +30,16 @@ The attributes in the following table are supported. | Name | Type | Default Value | Mandatory | Description | | -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- | | id | string | - | No | Unique ID of the component. | -| x | <length>\|<percentage> | 0 | No | X-coordinate of the upper left corner of the component. | -| y | <length>\|<percentage> | 0 | No | Y-coordinate of the upper left corner of the component. | -| dx | <length>\|<percentage> | 0 | No | Offset of the text on the x-axis. | -| dy | <length>\|<percentage> | 0 | No | Offset of the text on the y-axis. | +| x | <length> \| <percentage> | 0 | No | X-coordinate of the upper left corner of the component. | +| y | <length> \| <percentage> | 0 | No | Y-coordinate of the upper left corner of the component. | +| dx | <length> \| <percentage> | 0 | No | Offset of the text on the x-axis. | +| dy | <length> \| <percentage> | 0 | No | Offset of the text on the y-axis. | | rotate | number | 0 | No | Rotation of the text around its lower left corner. A positive number indicates clockwise rotation, and a negative number indicates counterclockwise rotation. | | font-size | <length> | 30px | No | Font size. | | fill | <color> | black | No | Fill color of the text. | | fill-opacity | number | 1.0 | No | Fill opacity of the text. | | opacity | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.| -| stroke | <color> | black | No | Stroke and stroke color. | +| stroke | <color> | black | No | Stroke color. | | stroke-width | number | 1px | No | Stroke width. | | stroke-opacity | number | 1.0 | No | Stroke opacity. | diff --git a/en/application-dev/reference/arkui-js/js-components-svg-textpath.md b/en/application-dev/reference/arkui-js/js-components-svg-textpath.md index 6ecd8c2df6f5b7917c24f06f5da354a9d597f334..536971760c5a2e5e56d01fbab11535406f83f55a 100644 --- a/en/application-dev/reference/arkui-js/js-components-svg-textpath.md +++ b/en/application-dev/reference/arkui-js/js-components-svg-textpath.md @@ -1,179 +1,51 @@ -# textPath +# textPath -The **** component is used to draw text along the path. +The **\** component is used to draw text along the path. ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->- This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ->- Draws text based on the specified path. The **tspan** child component can be nested for segmenting. ->- **** can be nested only by the parent element label **svg**. -## Required Permissions +> **NOTE** +> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +> +> - The **\** component can be nested in the **\** component for segmenting. +> +> - The **\** component can only be nested in the **\** component. + +## Required Permissions None -## Child Components -**tspan** is supported. +## Child Components + +The **[\](js-components-svg-tspan.md)** child component is supported. + + +## Attributes -## Attributes The attributes in the following table are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of the component.

-

path

-

string

-

0

-

Yes

-

Shape of the path.

-

The meanings of the letters are as follows:

-
  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Belzier curve
  • T = smooth quadratic Belzier curveto
  • A = elliptical Arc
  • Z = closepath
-

startOffset

-

<length>|<percentage>

-

0

-

No

-

Start offset of the text drawing along the path.

-

font-size

-

<length>

-

30px

-

No

-

Font size.

-

fill

-

<color>

-

black

-

No

-

Font fill color.

-

by

-

number

-

-

-

No

-

Attribute offset relative to the specified animation. The default value of from is the original attribute value.

-

opacity

-

number

-

1

-

No

-

Opacity of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. Attribute animations are supported.

-

fill-opacity

-

number

-

1.0

-

No

-

Font fill opacity.

-

stroke

-

<color>

-

black

-

No

-

Stroke and stroke color.

-

stroke-width

-

number

-

1px

-

No

-

Stroke width.

-

stroke-opacity

-

number

-

1.0

-

No

-

Stroke opacity.

-
- -## Example - -The following is an example of the **textspan** attribute. The **textpath** text is drawn along the path specified by the **path** attribute, and the start point is offset by 20% of the **path** length. \(The drawn element **** curve is for reference only.\) -``` -/* xxx.css */ -.container { - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - height: 1200px; - width: 600px; -} -``` +| Name | Type | Default Value| Description | +| -------------- | ---------------------------------- | ------ | ------------------------------------------------------------ | +| id | string | - | Unique ID of the component. | +| path | string | 0 | Shape of the path.
The meanings of the letters are as follows:
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath
Default value: **0**| +| startOffset | <length>\|<percentage> | 0 | Offset of the text start point relative to the path start point.
Default value: **0** | +| font-size | <length> | 30px | Font size.
Default value: **30px** | +| fill | <color> | black | Font fill color.
Default value: **black** | +| by | number | - | Attribute offset relative to the specified animation. By default, **from** is the original attribute value. | +| opacity | number | 1 | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.
Default value: **0**| +| fill-opacity | number | 1.0 | Font fill opacity.
Default value: **1.0** | +| stroke | <color> | black | Stroke color.
Default value: **black** | +| stroke-width | number | 1px | Stroke width.
Default value: **1px** | +| stroke-opacity | number | 1.0 | Stroke opacity.
Default value: **1.0** | -``` + +## Example + +The following is an example of the **\** attributes, where text is drawn along the path specified by **path**, and the start point is offset by 20% of the **path** length. (The drawn **\** curve is for reference only.) + +```html
@@ -187,11 +59,23 @@ The following is an example of the **textspan** attribute. The **textpath**
``` -![](figures/textpath-part1.png) +```css +/* xxx.css */ +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 1200px; + width: 600px; +} +``` + -Combination of **textpath** and **tspan** +![textpath-part1](figures/textpath-part1.png) -``` +Combination of **\** and **\** + +```html
@@ -207,9 +91,9 @@ Combination of **textpath** and **tspan**
``` -![](figures/textpath-part2.png) +![textpath-part2](figures/textpath-part2.png) -``` +```html
@@ -227,9 +111,9 @@ Combination of **textpath** and **tspan**
``` -![](figures/textpath-part3.png) +![textpath-part3](figures/textpath-part3.png) -``` +```html
@@ -248,11 +132,11 @@ Combination of **textpath** and **tspan**
``` -![](figures/textpath-part4.png) +![textpath-part4](figures/textpath-part4.png) -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. +The following is an example of the **startOffset** animation, where the value of **startOffset** changes from 10% to 40%, and the text is not drawn when its length exceeds the path length range. -``` +```css /* xxx.css */ .container { flex-direction: row; @@ -263,7 +147,7 @@ The following is an example of the **startOffset** animation. When the text is } ``` -``` +```html
@@ -280,11 +164,11 @@ The following is an example of the **startOffset** animation. When the text is
``` -![](figures/textpath-animate1.gif) +![textpath-animate1](figures/textpath-animate1.gif) -Animation and effect of the combination of **textpath** and **tspan** +Attribute animation of the **\** and **\** in combination -``` +```html
@@ -311,17 +195,17 @@ Animation and effect of the combination of **textpath** and **tspan**
``` -![](figures/textpath-animate2.gif) +![textpath-animate2](figures/textpath-animate2.gif) -\(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. +(1) **"tspan attribute x|rotate"**: The beginning of the text is offset from 50 px to 100 px, and the text 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 opacity changes from shallow to deep. +(2) **"tspan attribute dx|opacity"**: The text is drawn after the "tspan static." drawing is complete. The horizontal offset moves from 0% to 30%, and the opacity 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**. +(3) **tspan move**: After the previous **\** is drawn, the next **\** is drawn with an offset of 5%, creating the effect of following the previous **\**. -Animation and effect of the combination of **textpath** and **tspan** +Attribute animation of the **\** and **\** in combination -``` +```html
@@ -347,19 +231,19 @@ Animation and effect of the combination of **textpath** and **tspan**
``` -![](figures/textpath-animate3.gif) +![textpath-animate3](figures/textpath-animate3.gif) -\(1\) **This is TextPath**.: Draw the first paragraph of text on the path without offset. The size is 30px, and the color is "\#D2691E". +(1) **"This is TextPath."**: The first segment of text, in the size of 30px and color of \#D2691E is drawn on the path without offset. -\(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 opacity is from light to deep. +(2) **"tspan attribute fill|fill-opacity"**: The new segment of text is 20px offset from the end of the previous text segment. The text color changes from blue to red, and the opacity changes 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. +(3) **"tspan attribute font-size"**: The new segment of text is 20px offset from the end of the previous text segment. While the start point of the text is static, the font size shifts from 10px to 50px and 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. +(4) **"Single tspan"**: A horizontal line is drawn at the end of the previous segment, creating the effect of following the previous segment. -Animation and effect of the combination of **textpath** and **tspan** +Attribute animation of the **\** and **\** in combination -``` +```html
@@ -384,9 +268,8 @@ Animation and effect of the combination of **textpath** and **tspan**
``` -![](figures/textpath-animate4.gif) - -\(1\) **tspan attribute stroke**: The stroke color gradually changes from red to green. +![textpath-animate4](figures/textpath-animate4.gif) -\(2\) **tspan attribute stroke-width-opacity**: The contour width is changed from 1px to 5px, and the opacity is changed from shallow to deep. +(1) **"tspan attribute stroke"**: The stroke color gradually changes from red to green. +(2) **"tspan attribute stroke-width-opacity"**: The stroke width changes from 1px to 5px, and the opacity changes from shallow to deep. diff --git a/en/application-dev/reference/arkui-js/js-components-svg-tspan.md b/en/application-dev/reference/arkui-js/js-components-svg-tspan.md index a37f96069f116e394306edf9cbcef2f792f36019..2793ee7c1dbdb10c2d6f4731bfe630fd6564474f 100644 --- a/en/application-dev/reference/arkui-js/js-components-svg-tspan.md +++ b/en/application-dev/reference/arkui-js/js-components-svg-tspan.md @@ -1,193 +1,47 @@ -# tspan +# tspan ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->- This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ->- The text content must be written in the content area. The **** child component can be nested. ->- **** can be nested only by the parent element label **svg**. +The **\** component is used to add a text style. -## Required Permissions + +> **NOTE** +> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +> +> - This component can have **\** child components nested. +> +> - This component can only be nested by the parent element label **svg**. + +## Required Permissions None -## Child Components -Tspan is supported. +## Child Components -The attributes in the following table are supported. +The **[\](js-components-svg-tspan.md)** child component is supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of the component.

-

x

-

<length>|<percentage>

-

0

-

No

-

X-coordinate of the upper left corner of the component.

-

y

-

<length>|<percentage>

-

0

-

No

-

Y-coordinate of the upper left corner of the component. This parameter is invalid for the textpath child component.

-

dx

-

<length>|<percentage>

-

0

-

No

-

Offset of the text on the x-axis.

-

dy

-

<length>|<percentage>

-

0

-

No

-

Offset of the text on the y-axis. This parameter is invalid for the textpath child component.

-

rotate

-

number

-

0

-

No

-

Rotates the lower left corner of the font based on the circle center. A positive number indicates clockwise rotation, and a negative number indicates counterclockwise rotation.

-

font-size

-

<length>

-

30px

-

No

-

Font size.

-

fill

-

<color>

-

black

-

No

-

Font fill color.

-

opacity

-

number

-

1

-

No

-

Opacity of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. Attribute animations are supported.

-

fill-opacity

-

number

-

1.0

-

No

-

Font fill opacity.

-

stroke

-

<color>

-

black

-

No

-

Stroke and stroke color.

-

stroke-width

-

number

-

1px

-

No

-

Stroke width.

-

stroke-opacity

-

number

-

1.0

-

No

-

Stroke opacity.

-
-## Example +The attributes in the following table are supported. -``` -/* xxx.css */ -.container { - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - height: 1000px; - width: 1080px; -} -``` -``` +| Name | Type | Default Value | Mandatory | Description | +| -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- | +| id | string | - | No | Unique ID of the component. | +| x | <length>\|<percentage> | 0 | No | X-coordinate of the upper left corner of the component. | +| y | <length>\|<percentage> | 0 | No | Y-coordinate of the upper left corner of the component. This attribute is invalid when the component is a child component of the **\**. | +| dx | <length>\|<percentage> | 0 | No | Offset of the text on the x-axis. | +| dy | <length>\|<percentage> | 0 | No | Offset of the text on the y-axis. This attribute is invalid when the component is a child component of the **\**. | +| rotate | number | 0 | No | Rotation of the text around its lower left corner. A positive number indicates clockwise rotation, and a negative number indicates counterclockwise rotation. | +| font-size | <length> | 30px | No | Font size. | +| fill | <color> | black | No | Fill color of the text. | +| opacity | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. Attribute animations are supported.| +| fill-opacity | number | 1.0 | No | Fill opacity of the text. | +| stroke | <color> | black | No | Stroke color. | +| stroke-width | number | 1px | No | Stroke width. | +| stroke-opacity | number | 1.0 | No | Stroke opacity. | + +## Example + +```html
@@ -207,22 +61,22 @@ The attributes in the following table are supported.
``` -![](figures/tspan-part1.png) - -Attribute animation example - -``` +```css /* xxx.css */ -.container { +.container { flex-direction: row; justify-content: flex-start; align-items: flex-start; - height: 3000px; + height: 1000px; width: 1080px; } ``` -``` +![tspan-part1](figures/tspan-part1.png) + +Attribute animation example + +```html
@@ -245,9 +99,20 @@ Attribute animation example
``` -![](figures/tspan-animate-part1.gif) - +```css +/* xxx.css */ +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 3000px; + width: 1080px; +} ``` + +![tspan-animate-part1](figures/tspan-animate-part1.gif) + +```html
@@ -262,9 +127,9 @@ Attribute animation example
``` -![](figures/tspan-animate-part2.gif) +![tspan-animate-part2](figures/tspan-animate-part2.gif) -``` +```html
@@ -278,9 +143,9 @@ Attribute animation example
``` -![](figures/tspan-animate-part3.gif) +![tspan-animate-part3](figures/tspan-animate-part3.gif) -``` +```html
@@ -301,5 +166,4 @@ Attribute animation example
``` -![](figures/tspan-animate-part4.gif) - +![tspan-animate-part4](figures/tspan-animate-part4.gif) diff --git a/en/application-dev/reference/arkui-js/js-components-svg.md b/en/application-dev/reference/arkui-js/js-components-svg.md index 83fdf3085c0e6268dc313ceaa6d7c26dc0220ac7..1ac5d3f287246d41e586a71069c892774e3533a3 100644 --- a/en/application-dev/reference/arkui-js/js-components-svg.md +++ b/en/application-dev/reference/arkui-js/js-components-svg.md @@ -1,107 +1,40 @@ -# svg +# svg -The **** component is a basic container. It can be used as the root node of an SVG document or be used to nest an SVG fragment into an SVG document. +The **\** component is a basic container. It can be used as the root node of an SVG document or be used to nest an SVG fragment into an SVG document. ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->- This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ->- The width and height must be defined for the **** parent component or **** component. Otherwise, the component is not drawn. -## Required Permissions +> **NOTE** +> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +> +> - The width and height must be defined for the **** parent component or **** component. Otherwise, the component is not drawn. + +## Required Permissions None -## Child Components - -**svg**, **rect**, **circle**, **ellipse**, **path**, **line**, **polygon**, **polyline**, **text**, **animate**, and **animateTransform** are supported. - -## Attributes - -The [universal attributes](js-components-svg-common-attributes.md) and the attributes listed below are supported. The configured universal attributes are passed to the child components. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of the component.

-

width

-

<length>|<percentage>

-

-

-

No

-

Component width.

-

height

-

<length>|<percentage>

-

-

-

No

-

Component height.

-

x

-

<length>|<percentage>

-

-

-

No

-

X-coordinate of the current <svg> component. The settings do not work for the root <svg> node.

-

y

-

<length>|<percentage>

-		  

No

-

Y-coordinate of the current <svg> component. The settings do not work for the root <svg> node.

-

viewBox

-

string

-

-

-

No

-

View box of the current <svg> component. The supported format is <number number number number>. The four parameters indicate the min-x, min-y, width, and height. The width and height of the view box are different from those of the <svg> component. The view box is scaled in center-aligned mode.

-
- -## Example -``` +## Child Components + +The following are supported: [\](js-components-svg.md), [\](js-components-svg-rect.md), [\](js-components-svg-circle.md), [\](../arkui-js/js-components-svg-ellipse.md), [\](js-components-svg-path.md), [\](../arkui-js/js-components-svg-polygon.md), [\](js-components-svg-polyline.md), [\](js-components-svg-text.md), [\](js-components-svg-animate.md), and [\](js-components-svg-animateTransform.md). + + +## Attributes + +The [universal attributes](../arkui-js/js-components-svg-common-attributes.md) and the attributes listed below are supported. The configured universal attributes are passed to the child components. + +| Name| Type| Default Value| Mandatory| Description| +| -------- | -------- | -------- | -------- | -------- | +| id | string | - | No| Unique ID of the component.| +| width | <length>\|<percentage> | - | No| Component width.| +| height | <length>\|<percentage> | - | No| Component height.| +| x | <length>\|<percentage> | - | No| X-coordinate of the current **\** component. The settings do not work for the root **\** node. | +| y | <length>\|<percentage> | | No| Y-coordinate of the current **\** component. The settings do not work for the root **\** node. | +| viewBox | string | - | No| View box of the current **\** component. The supported format is \. The four parameters indicate **min-x**, **min-y**, **width**, and **height**, respectively. The width and height of the view box are different from those of the **\** component. The view box is scaled in center-aligned mode. | + + +## Example + +```html
@@ -119,5 +52,5 @@ The [universal attributes](js-components-svg-common-attributes.md) and the att
``` -![](figures/en-us_image_0000001173164789.png) +![en-us_image_0000001173164789](figures/en-us_image_0000001173164789.png) diff --git a/en/application-dev/ui/ts-component-based-preview.md b/en/application-dev/ui/ts-component-based-preview.md index 2321b90275138c29d827ed9b54045852d8f7ac90..eee9d34082a398dccb2ed5021cc91d69c08b8d83 100644 --- a/en/application-dev/ui/ts-component-based-preview.md +++ b/en/application-dev/ui/ts-component-based-preview.md @@ -1,15 +1,14 @@ # @Preview - -You can use @Preview to decorate a custom component so that it can be previewed in DevEco Studio. This component is created and displayed when the page where it is located is loaded. +You can use **@Preview** to decorate a custom component so that it can be previewed in real time in DevEco Studio. This component is created and displayed when the page where it is located is loaded. Dynamic pictures and dynamic preview are not yet supported. > **NOTE** > -> In a source file, at most one custom component can be decorated by @Preview. +> In a source file, at most 10 custom components can be decorated by **@Preview**. For details, see [@Preview](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-previewing-app-service-0000001218760596#section146052489820). -Example of using @Preview: +Example of using **@Preview**: ```ts @@ -17,46 +16,47 @@ Example of using @Preview: @Entry @Component struct MyComponent { - build() { - Column() { - Row() { - Text('Hello World!') - .fontSize("50lpx") - .fontWeight(FontWeight.Bold) - } - Row() { - Component1() - } - Row() { - Component2() - } - } + build() { + Column() { + Row() { + Text('Hello World!') + .fontSize("50lpx") + .fontWeight(FontWeight.Bold) + } + Row() { + Component1() + } + Row() { + Component2() + } } + } } + @Preview @Component struct Component1 { - build() { - Column() { - Row() { - Text('Hello Component1') - .fontSize("50lpx") - .fontWeight(FontWeight.Bold) - } - } + build() { + Column() { + Row() { + Text('Hello Component1') + .fontSize("50lpx") + .fontWeight(FontWeight.Bold) + } } + } } @Component struct Component2 { - build() { - Column() { - Row() { - Text('Hello Component2') - .fontSize("50lpx") - .fontWeight(FontWeight.Bold) - } - } + build() { + Column() { + Row() { + Text('Hello Component2') + .fontSize("50lpx") + .fontWeight(FontWeight.Bold) + } } + } } ``` diff --git a/en/application-dev/ui/ts-custom-component-lifecycle-callbacks.md b/en/application-dev/ui/ts-custom-component-lifecycle-callbacks.md index 3ca66944cc5cf561343ce7d9024a59778034f7f8..4515aa02c14c714971cff8a59f83a2e19ab18fc2 100644 --- a/en/application-dev/ui/ts-custom-component-lifecycle-callbacks.md +++ b/en/application-dev/ui/ts-custom-component-lifecycle-callbacks.md @@ -1,23 +1,21 @@ # Custom Component Lifecycle Callbacks - The lifecycle callbacks of a custom component are used to notify users of the lifecycle of the component. These callbacks are private and are invoked by the development framework at a specified time at runtime. They cannot be manually invoked from applications. -## Lifecycle Callback Definition +## Lifecycle Callback Definitions -| Function | Description | -| -------- | -------- | -| aboutToAppear | Invoked after a new instance of the custom component is created and before its build function is executed. You can change state variables in the **aboutToAppear** function. The change will take effect when you execute the **build** function next time. | -| aboutToDisappear | Invoked before the destructor of the custom component is consumed. Do not change state variables in the **aboutToDisappear** function as doing this can cause unexpected errors. For example, the modification of the **@Link** decorated variable may cause unstable application running. | -| onPageShow | Invoked when a page is displayed. This callback is used in the routing process or scenarios where the application is switched to the foreground or background. Only the custom components decorated by **@Entry** take effect. | -| onPageHide | Invoked when a page is hidden. This callback is used in the routing process or scenarios where the application is switched to the foreground or background. Only the custom components decorated by **@Entry** take effect. | -| onBackPress | Invoked when a user clicks the back button. Only the custom components decorated by **@Entry** take effect.
- The value **true** is returned if the page processes the return logic instead of performing page routing.
- The value **false** is returned if the default return logic is used.
- If no value is returned, the default return logic is used. | +| Name | Description | +| ---------------- | ------------------------------------------------------------ | +| aboutToAppear | Invoked after a new instance of the custom component is created and before its **build** function is executed. You can change state variables in the **aboutToAppear** function. The change will take effect when you execute the **build** function next time.| +| aboutToDisappear | Invoked before the destructor of the custom component is consumed. Do not change state variables in the **aboutToDisappear** function as doing this can cause unexpected errors. For example, the modification of the **@Link** decorated variable may cause unstable application running.| +| onPageShow | Invoked when a page is displayed. This callback is used in the routing process or scenarios where the application is switched to the foreground or background. Only the custom components decorated by **@Entry** take effect.| +| onPageHide | Invoked when a page is hidden. This callback is used in the routing process or scenarios where the application is switched to the foreground or background. Only the custom components decorated by **@Entry** take effect.| +| onBackPress | Invoked when a user clicks the back button. Only the custom components decorated by **@Entry** take effect.
The value **true** is returned if the page processes the return logic instead of performing page routing.
The value **false** is returned if the default return logic is used.
If no value is returned, the default return logic is used.| ## Example - ```ts // xxx.ets @Entry @@ -48,11 +46,10 @@ struct CountDownTimerComponent { } ``` -The example above shows that lifecycle functions are critical for CountDownTimerComponent to manage its timer resources. Similar functions include loading resources asynchronously from the network. +The example above shows that lifecycle functions are critical for **CountDownTimerComponent** to manage its timer resources. Similar functions include loading resources asynchronously from the network. > **NOTE** -> > - Promise and asynchronous callback functions can be used in lifecycle functions, for example, network resource getters and timer setters. > > - Do not use **async await** in lifecycle functions. diff --git a/en/application-dev/ui/ui-ts-layout-grid-container.md b/en/application-dev/ui/ui-ts-layout-grid-container.md index b97a9323b68f5e43765bc6235db870e7df7d23ed..e9d8beaeee85463ff0ee58138e4d4299e7407a1e 100644 --- a/en/application-dev/ui/ui-ts-layout-grid-container.md +++ b/en/application-dev/ui/ui-ts-layout-grid-container.md @@ -8,7 +8,7 @@ As a tool to provide layout auxiliary lines, the grid system is handy in graphic 2. Provides a unified positioning method for the system to ensure layout consistency among modules on different devices. 3. Provides a flexible spacing adjustment method for applications to keep up with layout in special scenarios. -To implement grid layout, the declarative paradigm provides the [GridContainer](../reference/arkui-ts/ts-container-gridcontainer.md) grid container component, which works with the common attribute useSizeType of its subcomponents to implement grid layout. +To implement grid layout, the declarative paradigm provides the [\](../reference/arkui-ts/ts-container-gridcontainer.md) component, which works with the **useSizeType** attribute of its child components to implement grid layout. ## Grid System @@ -19,10 +19,15 @@ The grid system works in terms of gutter, margin, and column. 1. Gutter: + Spacing between elements. You can define different clutter values for different device sizes as part of the overall grid layout specifications. For better results, make sure the gutter is not greater than the margin. + 2. Margin: + Spacing around an item in the grid container. You can define different margin values for different device sizes as part of the overall grid layout specifications. + 3. Column: + Main tool for positioning items in the grid layout. The grid container is divided into various numbers of columns based on the device size. The width per column is calculated based on the total number of columns while respecting the margin and clutter specifications. @@ -30,7 +35,7 @@ The grid system works in terms of gutter, margin, and column. Breakpoints in the grid system are set in terms of the device's screen pixel density. The grid system defines a set of breakpoint rules based on the mapping between the numbers of columns and device screen widths. -Depending on the screen width, devices are classified into different width types. The table below provides the mappings of the grid breakpoint ranges, device width types, default total number of columns, margins, and gutters. +Depending on the screen width, devices are classified into different width types. The table below provides the mappings of the grid breakpoint ranges, device width types, default total number of columns, margin, and gutter. | Grid Breakpoint Range | Device Width Type| Description | columns | gutter | margin | @@ -48,13 +53,15 @@ Create a grid container, define the grid layout, and set the number of columns f Use the `GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})` API to create a grid container. All child components in the grid container follow the grid layout. -- Use the **columns**, **gutter**, and **margin** parameters to define your grid layout. In the sample below, the grid container is divided into six columns, with the gutter (spacing between columns) of 10 vp and the margin (spacing around a column) of 20 vp. +- Use the **columns**, **gutter**, and **margin** parameters to define your grid layout. + + In the example below, the grid container is divided into six columns, with the gutter (spacing between columns) of 10 vp and the margin (spacing around a column) of 20 vp. ```ts GridContainer({ columns: 6, gutter: 10, margin: 20 }) {} ``` - In the sample below, the grid container does not have any parameter set. In this case, it follows the default layout, as in the case when sizeType is set to SizeType.Auto. + In the example below, the grid container does not have any parameter set. In this case, it follows the default layout, as in the case when **sizeType** is set to **SizeType.Auto**. ```ts GridContainer() {} @@ -62,7 +69,7 @@ Use the `GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeTyp On a small-sized device (**SizeType.SM**), the grid container is divided into four columns by default, with the gutter of 24 vp and the margin of 24 vp. On a medium-sized device (**SizeType.MD**), the grid container is divided into eight columns by default, with the gutter of 24 vp and the margin of 32 vp. -- You can also use **sizeType** to configure child components in the grid container to follow the grid settings for a specific device width type, as shown below: +- You can also use **sizeType** to configure child components in the grid container to follow the grid settings of a specific device width type, as shown below: ```ts GridContainer({ sizeType: SizeType.SM }) { @@ -70,7 +77,7 @@ Use the `GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeTyp Text('1') .useSizeType({ xs: { span: 2, offset: 0 }, - sm: { span: 2, offset: 0 }, + sm: { span: 3, offset: 0 }, md: { span: 6, offset: 2 }, lg: { span: 8, offset: 2 }, }) @@ -78,11 +85,11 @@ Use the `GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeTyp } ``` - In the preceding example, the **\** component uses the grid setting of the **SizeType.SM** type regardless of the actual width type of the device. That is, the **\** component occupies three columns and is placed in the first column. + In the preceding example, the **\** component uses the grid settings of the **SizeType.SM** type regardless of the actual device width type. That is, the **\** component takes up three columns and is placed in the first column. ### Grid Settings of Child Components in the Grid Container -Use the universal attribute **useSizeType** to configure the positioning of child components in the grid container. **span** indicates the number of columns occupied by the child component. **offset** indicates the column offset, that is, the column where the component is located. The sample code is as follows: +Use the universal attribute **useSizeType** to configure how child components are positioned in the grid container. **useSizeType** comes with the **span** and **offset** sub-attributes. **span** indicates the number of columns occupied by the child component; **offset** indicates the column offset, that is, the column where the component is located. The sample code is as follows: ```ts GridContainer() { @@ -90,16 +97,16 @@ GridContainer() { Text('1') .useSizeType({ xs: { span: 2, offset: 0 }, - sm: { span: 0, offset: 0 }, + sm: { span: 2, offset: 0 }, md: { span: 6, offset: 2 }, lg: { span: 8, offset: 2 }, }) } } ``` -In the preceding example, `sm: { span: 2, offset: 0 }` indicates that on a medium-sized device, the **\** component occupies two columns and is placed in the first column of the grid container. +In the preceding example, `sm: { span: 2, offset: 0 }` indicates that on a medium-sized device, the **\** component takes up two columns and is placed in the first column of the grid container. -![en-us_image_0000001218108718](figures/en-us_image_0000001218108719.png) +![en-us_image_0000001218108719](figures/en-us_image_0000001218108719.png) ## Example Scenario