components. \*/
+/* Set the style for all
components. */
div {
flex-direction: column;
}
-/* Set the style for the component whose class is title. */
+/* Set the style for the component whose class is title.*/
.title {
font-size: 30px;
}
@@ -101,13 +101,13 @@ div {
.title, .content {
padding: 5px;
}
-/\* Set the style for all texts of components whose class is container.\*/
+/* Set the style for all texts of components whose class is container.*/
.container text {
color: \#007dff;
}
-/\* Set the style for direct descendant texts of components whose class is container.\*/
+/* Set the style for direct descendant texts of components whose class is container.*/
.container > text {
- color: \#fa2a2d;
+ color: #fa2a2d;
}
```
@@ -128,7 +128,7 @@ When multiple selectors point to the same element, their priorities are as follo
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :disabled can be used to select the element whose disabled attribute is true.
-In addition to a single pseudo-class, a combination of pseudo-classes is supported. For example, **:focus:checked** selects the element whose focus and checked attributes are both set to true. The following table lists the supported single pseudo-class in descending order of priority.
+In addition to a single pseudo-class, a combination of pseudo-classes is supported. For example, :focus:checked selects the element whose focus and checked attributes are both set to true. The following table lists the supported single pseudo-class in descending order of priority.
| Pseudo-class | Available Components | Description |
diff --git a/en/application-dev/ui/ts-resource-access.md b/en/application-dev/ui/ts-resource-access.md
index 82d53954d3fc86878a48222e449428faf1a341d1..5b4a7627f6b810bf87e457b2b0042f6b806dfc15 100644
--- a/en/application-dev/ui/ts-resource-access.md
+++ b/en/application-dev/ui/ts-resource-access.md
@@ -5,10 +5,13 @@
To reference an application resource in a project, use the `"$r('app.type.name')"` format. **app** indicates the resource defined in the **resources** directory of the application. **type** indicates the resource type (or the location where the resource is stored). The value can be **color**, **float**, **string**, **plural**, or **media**. **name** indicates the resource name, which you set when defining the resource.
-When referencing resources in the **rawfile** sub-directory, use the `"$rawfile('filename')"` format. Currently, **$rawfile** allows only the **\
** component to reference image resources. **filename** indicates the relative path of a file in the **rawfile** directory, and the file name must contain the file name extension. Note that the relative path cannot start with a slash (/).
+When referencing resources in the **rawfile** sub-directory, use the ```"$rawfile('filename')"``` format. **filename** indicates the relative path of a file in the **rawfile** directory, and the file name must contain the file name extension. Note that the relative path cannot start with a slash (/).
> **NOTE**
+>
> Resource descriptors accept only strings, such as `'app.type.name'`, and cannot be combined.
+>
+> `$r` returns a **Resource** object. To obtain the corresponding string, use [getString](../reference/apis/js-apis-resource-manager.md#getstring).
In the **.ets** file, you can use the resources defined in the **resources** directory.
@@ -47,7 +50,7 @@ Image($rawfile('newDir/newTest.png')) // Reference an image in the rawfile direc
System resources include colors, rounded corners, fonts, spacing, character strings, and images. By using system resources, you can develop different applications with the same visual style.
-To reference a system resource, use the "$r('sys.type.resource_id')" format. Wherein: sys indicates a system resource; type indicates the resource type, which can be color, float, string, or media; resource_id indicates the resource ID, which is determined when the system resource is provided. For details about available system resource IDs.
+To reference a system resource, use the ```"$r('sys.type.resource_id')"``` format. Wherein: **sys** indicates a system resource; **type** indicates the resource type, which can be **color**, **float**, **string**, or **media**; **resource_id** indicates the resource ID.
```ts
Text('Hello')
diff --git a/en/application-dev/ui/ts-syntactic-sugar.md b/en/application-dev/ui/ts-syntactic-sugar.md
index 78b908edf1f85a6deaa9fc37b8e7d029d977cab5..de6d2f0cdb280e9160ff3ee4aa6f4895b505fc32 100644
--- a/en/application-dev/ui/ts-syntactic-sugar.md
+++ b/en/application-dev/ui/ts-syntactic-sugar.md
@@ -1,32 +1,35 @@
# About Syntactic Sugar
-
## Decorators
-A decorator @Decorator can decorate a class, structure, or class attribute. Multiple decorators can be applied to the same target element and defined on a single line or multiple lines. It is recommended that the decorators be defined on multiple lines.
-In the example below, the elements decorated by @Component take on the form of a component, and the variables decorated by @State can be used to represent states.
+A decorator **@Decorator** can decorate a class, structure, or class attribute. Multiple decorators can be applied to the same target element and defined on a single line or multiple lines. It is recommended that the decorators be defined on multiple lines.
-```
+In the example below, the elements decorated by **@Component** take on the form of a component, and the variables decorated by **@State** can be used to represent states.
+
+
+```ts
@Component
struct MyComponent {
@State count: number = 0
}
```
+
Multiple decorators can be defined on a single line, as shown below:
-```
+```ts
@Entry @Component struct MyComponent {
}
```
+
However, you are advised to define the decorators on multiple lines, as shown below:
-```
+```ts
@Entry
@Component
struct MyComponent {
@@ -36,30 +39,29 @@ struct MyComponent {
### Supported Decorators
- | Decorator | Decorates... | Description |
-| -------- | -------- | -------- |
-| @Component | struct | The decorated structure has the component-based capability. The build method must be implemented to update the UI. |
-| @Entry | struct | The decorated component is used as the entry of a page. The component is rendered and displayed when the page is loaded. |
-| @Preview | struct | Custom components decorated by @Preview can be previewed in the Previewer of DevEco Studio. When the page is loaded, the custom components decorated by @Preview are created and displayed. |
-| @Builder | Methods | In the decorated method, you can use the declarative UI description to quickly generate multiple layouts in a custom component. |
-| @Extend | Methods | This decorator adds new attribute functions to a preset component, allowing you to quickly define and reuse the custom style of the component. |
-| @CustomDialog | struct | This decorator is used to decorate custom pop-up dialog boxes. |
-| @State | Primitive data types, classes, and arrays | If the decorated state data is modified, the build method of the component will be called to update the UI. |
-| @Prop | Primitive data types | This decorator is used to establish one-way data binding between the parent and child components. When the data associated with the parent component is modified, the UI of the current component is updated. |
-| @Link | Primitive data types, classes, and arrays | This decorator is used to establish two-way data binding between the parent and child components. The internal state data of the parent component is used as the data source. Any changes made to one component will be reflected to the other. |
-| @Observed | Classes | This decorator is used to indicate that the data changes in the class will be managed by the UI page. |
-| @ObjectLink | Objects of @Observed decorated classes | When the decorated state variable is modified, the parent and sibling components that have the state variable will be notified for UI re-rendering. |
-| @Consume | Primitive data types, classes, and arrays | When the @Consume decorated variable detects the update of the @Provide decorated variable, the re-rendering of the current custom component is triggered. |
-| @Provide | Primitive data types, classes, and arrays | As the data provider, @Provide can update the data of child nodes and trigger page rendering. |
-| @Watch | Variables decorated by @State, @Prop, @Link, @ObjectLink, @Provide, @Consume, @StorageProp, or @StorageLink | This decorator is used to listen for the changes of the state variables. The application can register a callback method through @Watch. |
+| Decorator | Decorates... | Description |
+| ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| @Component | struct | The decorated structure has the component-based capability. The **build** method must be implemented to update the UI.|
+| @Entry | struct | The decorated component is used as the entry of a page. The component is rendered and displayed when the page is loaded. |
+| @Preview | struct | Custom components decorated by **@Preview** can be previewed in DevEco Studio. When the target page is loaded, the custom components decorated by **@Preview** are created and displayed.|
+| @Builder | Methods | In the decorated method, you can use the declarative UI description to quickly generate multiple layouts in a custom component.|
+| @Extend | Methods | This decorator adds attribute functions to a preset component, allowing you to quickly define and reuse the custom style of the component.|
+| @CustomDialog | struct | This decorator is used to decorate custom pop-up dialog boxes. |
+| @State | Primitive data types, classes, and arrays | If the decorated state data is modified, the **build** method of the component will be called to update the UI. |
+| @Prop | Primitive data types | This decorator is used to establish one-way data binding between the parent and child components. When the data associated with the parent component is modified, the UI of the current component is updated.|
+| @Link | Primitive data types, classes, and arrays | This decorator is used to establish two-way data binding between the parent and child components. The internal state data of the parent component is used as the data source. Any changes made to one component will be reflected to the other.|
+| @Observed | Classes | This decorator is used to indicate that the data changes in the class will be managed by the UI page. |
+| @ObjectLink | Objects of **@Observed** decorated classes | When the decorated state variable is modified, the parent and sibling components that have the state variable will be notified for UI re-rendering.|
+| @Consume | Primitive data types, classes, and arrays | When the **@Consume** decorated variable detects the update of the **@Provide** decorated variable, the re-rendering of the current custom component is triggered.|
+| @Provide | Primitive data types, classes, and arrays | As the data provider, **@Provide** can update the data of child nodes and trigger page rendering.|
+| @Watch | Variables decorated by **@State**, **@Prop**, **@Link**, **@ObjectLink**, **@Provide**, **@Consume**, **@StorageProp**, or **@StorageLink** | This decorator is used to listen for the changes of the state variables. The application can register a callback method through **@Watch**. |
## Chain Call
You can configure the UI structure and its attributes and events and separate them with a dot(.) to implement chain call.
-
-```
+```ts
Column() {
Image('1.jpg')
.alt('error.jpg')
@@ -71,10 +73,9 @@ Column() {
## struct
-Components can be implemented based on structs. Components cannot inherit from each other. The structs implemented components can be created and destroyed more quickly than class implemented components.
+Components can be implemented based on **struct**s. Components cannot inherit from each other. The **struct**s implemented components can be created and destroyed more quickly than **class** implemented components.
-
-```
+```ts
@Component
struct MyComponent {
@State data: string = ''
@@ -87,10 +88,9 @@ struct MyComponent {
## Instantiating a struct Without the new Keyword
-You can omit the new keyword when instantiating a struct.
-
+You can omit the **new** keyword when instantiating a **struct**.
-```
+```ts
// Definition
@Component
struct MyComponent {
@@ -98,7 +98,7 @@ struct MyComponent {
}
}
-// Use
+// Usage
Column() {
MyComponent()
}
@@ -114,23 +114,22 @@ new Column() {
TypeScript has the following restrictions on generators:
-- Expressions can be used only in character strings (${expression}), if conditions, ForEach parameters, and component parameters.
+- Expressions can be used only in character strings (${expression}), **if** conditions, **ForEach** parameters, and component parameters.
-- No expressions should cause any application state variables (@State, @Link, and @Prop) to change. Otherwise, undefined and potentially unstable framework behavior may occur.
+- No expressions should cause any application state variables (**@State**, **@Link**, and **@Prop**) to change. Otherwise, undefined and potentially unstable framework behavior may occur.
- The generator function cannot contain local variables.
-None of the above restrictions apply to anonymous function implementations of event-handling functions (such as onClick)
+None of the above restrictions apply to anonymous function implementations of event-handling functions (such as **onClick**)
Incorrect:
-
-```
+```ts
build() {
let a: number = 1 // invalid: variable declaration not allowed
Column() {
- Text('Hello ${this.myName.toUpperCase()}') // ok.
- ForEach(this.arr.reverse(), ..., ...) // invalid: Array.reverse modifies the @State array varible in place
+ Text(`Hello ${this.myName.toUpperCase()}`) // ok.
+ ForEach(this.arr.reverse(), ..., ...) // invalid: Array.reverse modifies the @State array variable in place
}
buildSpecial() // invalid: no function calls
Text(this.calcTextValue()) // this function call is ok.
@@ -139,11 +138,13 @@ build() {
## $$
-$$ supports two-way binding for simple variables and @State, @Link, and @Prop decorated variables.
+**$$** supports two-way binding for simple variables and **@State**, **@Link**, and **@Prop** decorated variables.
-Currently, $$ supports only the rendering between the show parameter of the bindPopup attribute and the @State decorated variable, and the checked attribute of the \ component.
+Currently, **$$** supports only the rendering between the **show** parameter of the **[bindPopup](../reference/arkui-ts/ts-universal-attributes-popup.md)** attribute and the **@State** decorated variable, and the **checked** attribute of the **\** component.
-```
+
+```ts
+// xxx.ets
@Entry
@Component
struct bindPopup {
@@ -166,3 +167,29 @@ struct bindPopup {
}
```
+## Restrictions on Declaring Multiple Data Types of State Variables
+
+If a **@State**, **@Provide**, **@Link**, or **@Consume** decorated state variable supports multiple data types, they must be all simple data types or references at one time.
+
+Example:
+
+```ts
+@Entry
+@Component
+struct Index {
+ // Incorrect: @State message: string | Resource = 'Hello World'
+ @State message: string = 'Hello World'
+
+ build() {
+ Row() {
+ Column() {
+ Text(`${ this.message }`)
+ .fontSize(50)
+ .fontWeight(FontWeight.Bold)
+ }
+ .width('100%')
+ }
+ .height('100%')
+ }
+}
+```
diff --git a/en/application-dev/ui/ui-js-components-switch.md b/en/application-dev/ui/ui-js-components-switch.md
index 4eeffd99b1bac376b5d8e6db2298ec9232003c70..23d0f4285c18022e383d8734784f5d46e56bf445 100644
--- a/en/application-dev/ui/ui-js-components-switch.md
+++ b/en/application-dev/ui/ui-js-components-switch.md
@@ -9,14 +9,15 @@ The **<switch>** component is used to switch between the on and off states
Create a **<switch>** component in the .hml file under **pages/index**.
-```
+```html
+
```
-```
+```css
/* xxx.css */
.container {
flex-direction: column;
@@ -31,9 +32,9 @@ Create a **<switch>** component in the .hml file under **pages/index**.
## Adding Attributes and Methods
- Use the **textoff** and **showtext** attributes to set the status when text is selected and unselected. Set the **checked** attribute to **true** (indicating that the component is on). Add the **change** event that is triggered when the component status changes. After the event is triggered, the **switchChange** function is executed to obtain the current component status (on or off).
+Use the **textoff** and **showtext** attributes to set the status when text is selected and unselected. Set the **checked** attribute to **true** (indicating that the component is on). Add the **change** event that is triggered when the component status changes. After the event is triggered, the **switchChange** function is executed to obtain the current component status (on or off).
-```
+```html
@@ -41,28 +42,26 @@ Create a **<switch>** component in the .hml file under **pages/index**.
```
-```
+```css
/* xxx.css */
.container {
width: 100%;
- height: 100%;
+ height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
-switch{
- // Color of the selected text
+switch {
texton-color: #002aff;
- // Color of the unselected text
-textoff-color: silver;
+ textoff-color: silver;
text-padding: 20px;
font-size: 50px;
}
```
-```
+```js
// xxx.js
import prompt from '@system.prompt';
export default {
@@ -84,7 +83,8 @@ export default {
->  **NOTE:**
+> **NOTE**
+>
> The text set by **texton** and **textoff** takes effect only when **showtext** is set to **true**.
@@ -94,7 +94,7 @@ Turn on the switch and the default delivery address is used. When the switch is
Implementation method: Create a **<switch>** component, set the **checked** attribute to **true**, and change the delivery address through data binding. Set the **display** attribute (the default value is **none**). When the switch is turned off and the **display** attribute is set to **flex**, the address module is displayed and clicking the button can change the color.
-```
+```html
@@ -113,11 +113,11 @@ Turn on the switch and the default delivery address is used. When the switch is
```
-```
+```css
/* xxx.css */
.container {
width: 100%;
- height: 100%;
+ height: 100%;
background-color: #F1F3F5;
flex-direction: column;
padding: 50px;
@@ -168,7 +168,7 @@ switch{
```
-```
+```js
// xxx.js
import prompt from '@system.prompt';
export default {