From 35ac44aa3072d19b66f71c84c235af3c9666c26e Mon Sep 17 00:00:00 2001 From: "ester.zhou" Date: Tue, 7 Jun 2022 19:37:51 +0800 Subject: [PATCH] update js-components-common-attributes.md Signed-off-by: ester.zhou --- .../js-components-common-attributes.md | 191 +++--------------- 1 file changed, 25 insertions(+), 166 deletions(-) diff --git a/en/application-dev/reference/arkui-js/js-components-common-attributes.md b/en/application-dev/reference/arkui-js/js-components-common-attributes.md index 7c3db13df6..4175288f9f 100644 --- a/en/application-dev/reference/arkui-js/js-components-common-attributes.md +++ b/en/application-dev/reference/arkui-js/js-components-common-attributes.md @@ -1,175 +1,34 @@ -# Universal Attributes +# Universal Attributes -## Common Attributes +> **NOTE**
+> Universal attributes are supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. + +## Common Attributes Common attributes are used to set component identities and appearance. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Mandatory

-

Description

-

id

-

string

-

-

-

No

-

Unique ID of a component.

-

style

-

string

-

-

-

No

-

Style declaration of a component.

-

class

-

string

-

-

-

No

-

Style class of a component, which is used to refer to a style table.

-

ref

-

string

-

-

-

No

-

Used to register reference information of child elements or child components. The reference information is registered with the parent component on $refs.

-

disabled

-

boolean

-

false

-

No

-

Whether a component is disabled. If it is disabled, it cannot respond to user interaction.

-

data

-

string

-

-

-

No

-

Attribute set for the component to facilitate data storage and reading. In the JS file:

-
  • Use e.target.attr.data to read data in the event callback, where e is the input parameter.
  • After a DOM element is obtained by using $element or $refs, it can be accessed through attr.data.
-
NOTE:

It is recommended that you use data-* since API version 6.

-
-

data-*6+

-

string

-

-

-

No

-

Attribute set for components to facilitate data storage and reading. The value is case insensitive. For example, data-A and data-a are the same by default. In the JS file:

-
  • Use e.target.dataSet.a to read data in the event callback, where e is the input parameter.
  • After a DOM element is obtained by using $element or $refs, it can be accessed through dataSet.a.
-

click-effect5+

-

string

-

-

-

No

-

Click effect complying with spring physics. Available values are as follows:

-
  • spring-small: The component scales down to 90% of its size when it is selected. This is appropriate for small components.
  • spring-medium: The component scales down to 95% of its size when it is selected. This is appropriate for medium-sized components.
  • spring-large: The component scales down to 95% of its size when it is selected. This is appropriate for large components.
-

dir6+

-

string

-

auto

-

No

-

Element layout mode. The value can be:

-
  • rtl: right-to-left layout.
  • ltr: left-to-right layout.
  • auto: follows the system language environment.
-
+| Name | Type | Default Value | Mandatory | Description | +| ------------------------- | ------- | ----- | ---- | ---------------------------------------- | +| id | string | - | No | Unique ID of the component. | +| style | string | - | No | Style declaration of the component. | +| class | string | - | No | Style class of the component, which is used to refer to a style table. | +| ref | string | - | No | Reference information of child elements or child components, which is registered with the parent component on `$refs`.| +| disabled | boolean | false | No | Whether the component is disabled. If it is disabled, it cannot respond to user interaction. | +| data | string | - | No | Attribute set for the component to facilitate data storage and reading. In the JS file:
- Use **e.target.attr.data** to read data in the event callback, where **e** is the input parameter.
- Use `$element` or `$refs` to obtain a DOM element, which can then be accessed through **attr.data**.
You are advised to use **data-*** instead since API version 6.| +| data-\*6+ | string | - | No | Attribute set for the component to facilitate data storage and reading. The value is case insensitive. For example, **data-A** and **data-a** are the same by default. In the JS file:
- Use **e.target.dataSet.a** to read data in the event callback, where **e** is the input parameter.
- After a DOM element is obtained by using **$element** or **$refs**, it can be accessed through **dataSet.a**.| +| click-effect5+ | string | - | No | Click effect complying with spring physics. Available values are as follows:
- **spring-small**: The component scales down to 90% of its size when it is selected. This is appropriate for small components.
- **spring-medium**: The component scales down to 95% of its size when it is selected. This is appropriate for medium-sized components.
- **spring-large**: The component scales down to 95% of its size when it is selected. This is appropriate for large components.| +| dir6+ | string | auto | No | Element layout mode. Available values are as follows:
- **rtl**: right-to-left layout.
- **ltr**: left-to-right layout.
- **auto**: follows the system language environment.| -## Rendering Attributes -Rendering attributes are used to set whether a component is rendered. +## Rendering Attributes - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Type

-

Default Value

-

Description

-

for

-

Array

-

-

-

Expands the current element based on the configured data list.

-

if

-

boolean

-

-

-

Whether the element is added or removed.

-

show

-

boolean

-

-

-

Whether the element is displayed or hidden.

-
+Rendering attributes are used to set whether a component is rendered. ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->Do not set styles in attribute fields. +| Name | Type | Default Value | Description | +| ---- | ------- | ---- | ------------------------ | +| for | Array | - | Expands the current element based on the configured data list. | +| if | boolean | - | Whether the element is added or removed.| +| show | boolean | - | Whether the element is displayed or hidden.| +> **NOTE**
+> Do not set styles in attribute fields. -- GitLab