diff --git a/en/application-dev/quick-start/arkts-rendering-control-foreach.md b/en/application-dev/quick-start/arkts-rendering-control-foreach.md
new file mode 100644
index 0000000000000000000000000000000000000000..4c916bec86f9c9d22b9bdb60ca476f9cbdcd4846
--- /dev/null
+++ b/en/application-dev/quick-start/arkts-rendering-control-foreach.md
@@ -0,0 +1,344 @@
+# ForEach: Rendering of Repeated Content
+
+
+**ForEach** enables repeated content based on array-type data.
+
+
+## API Description
+
+
+```ts
+ForEach(
+ arr: any[],
+ itemGenerator: (item: any, index?: number) => void,
+ keyGenerator?: (item: any, index?: number) => string
+)
+```
+
+
+| Name | Type | Mandatory | Description |
+| ------------- | ---------------------------------------- | ---- | ---------------------------------------- |
+| arr | Array | Yes | An array, which can be empty, in which case no child component is created. The functions that return array-type values are also allowed, for example, **arr.slice (1, 3)**. The set functions cannot change any state variables including the array itself, such as **Array.splice**, **Array.sort**, and **Array.reverse**.|
+| itemGenerator | (item: any, index?: number) => void | Yes | A lambda function used to generate one or more child components for each data item in an array. Each component and its child component list must be contained in parentheses.
**NOTE**
- The type of the child component must be the one allowed inside the parent container component of **ForEach**. For example, a **\** child component is allowed only when the parent container component of **ForEach** is **\**.
- The child build function is allowed to return an **if** or another **ForEach**. **ForEach** can be placed inside **if**.
- The optional **index** parameter should only be specified in the function signature if used in its body.|
+| keyGenerator | (item: any, index?: number) => string | No | An anonymous function used to generate a unique and fixed key value for each data item in an array. This key-value generator is optional. However, for performance reasons, it is strongly recommended that the key-value generator be provided, so that the development framework can better identify array changes. For example, if no key-value generator is provided, a reverse of an array will result in rebuilding of all nodes in **ForEach**.
**NOTE**
- Two items inside the same array must never work out the same ID.
- If **index** is not used, an item's ID must not change when the item's position within the array changes. However, if **index** is used, then the ID must change when the item is moved within the array.
- When an item is replaced by a new one (with a different value), the ID of the replaced and the ID of the new item must be different.
- When **index** is used in the build function, it should also be used in the ID generation function.
- The ID generation function is not allowed to mutate any component state.|
+
+
+## Restrictions
+
+- **ForEach** must be used in container components.
+
+- The type of the child component must be the one allowed inside the parent container component of **ForEach**.
+
+- The **itemGenerator** function can contain an **if/else** statement, and an **if/else** statement can contain **ForEach**.
+
+- The call sequence of **itemGenerator** functions may be different from that of the data items in the array. During the development, do not assume whether or when the **itemGenerator** and **keyGenerator** functions are executed. For example, the following example may not run properly:
+
+ ```ts
+ ForEach(anArray.map((item1, index1) => { return { i: index1 + 1, data: item1 }; }),
+ item => Text(`${item.i}. item.data.label`),
+ item => item.data.id.toString())
+ ```
+
+
+## Recommendations
+
+- Make no assumption on the order of item build functions. The execution order may not be the order of items inside the array.
+
+- Make no assumption either when items are built the first time. Currently initial render of **ForEach** builds all array items when the \@Component decorated component is rendered at the first time, but future framework versions might change this behaviour to a more lazy behaviour.
+
+- Using the **index** parameter has severe negative impact on the UI update performance. Avoid using this parameter whenever possible.
+
+- If the **index** parameter is used in the item generator function, it must also be used in the item index function. Otherwise, the framework counts in the index when generating the ID. By default, the index is concatenated to the end of the ID.
+
+
+## Application Scenarios
+
+
+### Simple ForEach Example
+
+This example creates three **\** and **\** components based on the **arr** data.
+
+
+```ts
+@Entry
+@Component
+struct MyComponent {
+ @State arr: number[] = [10, 20, 30];
+
+ build() {
+ Column({ space: 5 }) {
+ Button('Reverse Array')
+ .onClick(() => {
+ this.arr.reverse();
+ })
+ ForEach(this.arr, (item: number) => {
+ Text(`item value: ${item}`).fontSize(18)
+ Divider().strokeWidth(2)
+ }, (item: number) => item.toString())
+ }
+ }
+}
+```
+
+
+### Complex ForEach Example
+
+
+```ts
+@Component
+struct CounterView {
+ label: string;
+ @State count: number = 0;
+
+ build() {
+ Button(`${this.label}-${this.count} click +1`)
+ .width(300).height(40)
+ .backgroundColor('#a0ffa0')
+ .onClick(() => {
+ this.count++;
+ })
+ }
+}
+
+@Entry
+@Component
+struct MainView {
+ @State arr: number[] = Array.from(Array(10).keys()); // [0.,.9]
+ nextUnused: number = this.arr.length;
+
+ build() {
+ Column() {
+ Button(`push new item`)
+ .onClick(() => {
+ this.arr.push(this.nextUnused++)
+ })
+ .width(300).height(40)
+ Button(`pop last item`)
+ .onClick(() => {
+ this.arr.pop()
+ })
+ .width(300).height(40)
+ Button(`prepend new item (unshift)`)
+ .onClick(() => {
+ this.arr.unshift(this.nextUnused++)
+ })
+ .width(300).height(40)
+ Button(`remove first item (shift)`)
+ .onClick(() => {
+ this.arr.shift()
+ })
+ .width(300).height(40)
+ Button(`insert at pos ${Math.floor(this.arr.length / 2)}`)
+ .onClick(() => {
+ this.arr.splice(Math.floor(this.arr.length / 2), 0, this.nextUnused++);
+ })
+ .width(300).height(40)
+ Button(`remove at pos ${Math.floor(this.arr.length / 2)}`)
+ .onClick(() => {
+ this.arr.splice(Math.floor(this.arr.length / 2), 1);
+ })
+ .width(300).height(40)
+ Button(`set at pos ${Math.floor(this.arr.length / 2)} to ${this.nextUnused}`)
+ .onClick(() => {
+ this.arr[Math.floor(this.arr.length / 2)] = this.nextUnused++;
+ })
+ .width(300).height(40)
+ ForEach(this.arr,
+ (item) => {
+ CounterView({ label: item.toString() })
+ },
+ (item) => item.toString()
+ )
+ }
+ }
+}
+```
+
+**MainView** has an \@State decorated array of numbers. Adding, deleting, and replacing array items are observed mutation events. Whenever one of these events occurs, **ForEach** in **MainView** is updated.
+
+The item index function creates a unique and persistent ID for each array item. The ArkUI framework uses this ID to determine whether an item in the array changes. As long as the ID is the same, the item value is assumed to remain unchanged, but its index position may have changed. For this mechanism to work, different array items cannot have the same ID.
+
+Using the item ID obtained through computation, the framework can distinguish newly created, removed, and retained array items.
+
+1. The framework removes UI components for a removed array item.
+
+2. The framework executes the item build function only for newly added array items.
+
+3. The framework does not execute the item build function for retained array items. If the item index within the array has changed, the framework will just move its UI components according to the new order, but will not update that UI components.
+
+The item index function is recommended, but optional. The generated IDs must be unique. This means that the same ID must not be computed for any two items within the array. The ID must be different even if the two array items have the same value.
+
+If the array item value changes, the ID must be changed.
+As mentioned earlier, the ID generation function is optional. The following example shows **ForEach** without the item index function:
+
+ ```ts
+ ForEach(this.arr,
+ (item) => {
+ CounterView({ label: item.toString() })
+ }
+ )
+ ```
+
+If no item ID function is provided, the framework attempts to intelligently detect array changes when updating **ForEach**. However, it might remove child components and re-execute the item build function for array items that have been moved (with indexes changed). In the preceding example, this changes the application behavior in regard to the **counter** state of **CounterView**. When a new **CounterView** instance is created, the value of **counter** is initialized with **0**.
+
+
+### Example of ForEach Using \@ObjectLink
+
+If your application needs to preserve the state of repeated child components, you can use \@ObjectLink to enable the state to be "pushed up the component tree."
+
+
+```ts
+let NextID: number = 0;
+
+@Observed
+class MyCounter {
+ public id: number;
+ public c: number;
+
+ constructor(c: number) {
+ this.id = NextID++;
+ this.c = c;
+ }
+}
+
+@Component
+struct CounterView {
+ @ObjectLink counter: MyCounter;
+ label: string = 'CounterView';
+
+ build() {
+ Button(`CounterView [${this.label}] this.counter.c=${this.counter.c} +1`)
+ .width(200).height(50)
+ .onClick(() => {
+ this.counter.c += 1;
+ })
+ }
+}
+
+@Entry
+@Component
+struct MainView {
+ @State firstIndex: number = 0;
+ @State counters: Array = [new MyCounter(0), new MyCounter(0), new MyCounter(0),
+ new MyCounter(0), new MyCounter(0)];
+
+ build() {
+ Column() {
+ ForEach(this.counters.slice(this.firstIndex, this.firstIndex + 3),
+ (item) => {
+ CounterView({ label: `Counter item #${item.id}`, counter: item })
+ },
+ (item) => item.id.toString()
+ )
+ Button(`Counters: shift up`)
+ .width(200).height(50)
+ .onClick(() => {
+ this.firstIndex = Math.min(this.firstIndex + 1, this.counters.length - 3);
+ })
+ Button(`counters: shift down`)
+ .width(200).height(50)
+ .onClick(() => {
+ this.firstIndex = Math.max(0, this.firstIndex - 1);
+ })
+ }
+ }
+}
+```
+
+When the value of **firstIndex** is increased, **ForEach** within **Mainview** is updated, and the **CounterView** child component associated with the item ID **firstIndex-1** is removed. For the array item whose ID is **firstindex + 3**, a new** CounterView** child component instance is created. The value of the state variable **counter** of the **CounterView** child component is preserved by the **Mainview** parent component. Therefore, **counter** is not rebuilt when the **CounterView** child component instance is rebuilt.
+
+> **NOTE**
+>
+> The most common mistake application developers make in connection with **ForEach** is that the ID generation function returns the same value for two array items, especially in the Array\ scenario.
+
+
+### Nested Use of ForEach
+
+While nesting **ForEach** inside another **ForEach** in the same component is allowed, it is not recommended. It is better to split the component into two and have each build function include just one ForEach. The following is a poor example of nested use of **ForEach**.
+
+
+```ts
+class Month {
+ year: number;
+ month: number;
+ days: number[];
+
+ constructor(year: number, month: number, days: number[]) {
+ this.year = year;
+ this.month = month;
+ this.days = days;
+ }
+}
+@Component
+struct CalendarExample {
+ // Simulate with six months.
+ @State calendar : Month[] = [
+ new Month(2020, 1, [...Array(31).keys()]),
+ new Month(2020, 2, [...Array(28).keys()]),
+ new Month(2020, 3, [...Array(31).keys()]),
+ new Month(2020, 4, [...Array(30).keys()]),
+ new Month(2020, 5, [...Array(31).keys()]),
+ new Month(2020, 6, [...Array(30).keys()])
+ ]
+ build() {
+ Column() {
+ Button() {
+ Text('next month')
+ }.onClick(() => {
+ this.calendar.shift()
+ this.calendar.push(new Month(year: 2020, month: 7, days: [...Array(31).keys()]))
+ })
+ ForEach(this.calendar,
+ (item: Month) => {
+ ForEach(item.days,
+ (day : number) => {
+ // Build a date block.
+ },
+ (day : number) => day.toString()
+ )// Inner ForEach
+ },
+ (item: Month) => (item.year * 12 + item.month).toString() // This field is used together with the year and month as the unique ID of the month.
+ )// Outer ForEach
+ }
+ }
+}
+```
+
+The preceding example has two issues:
+
+1. The code readability is poor.
+
+2. For a data structure of months and days of a year, the framework cannot observe the attribute changes to **Month** objects, including any changes to the **days** array. As a result, the inner **ForEach** will not update the date.
+
+The recommended application design is to split **Calendar** into **Year**, **Month**, and **Day** child components. Define a **Day** model class to hold information about a day and decorate the class with \@Observed. The **DayView** component uses an \@ObjectLink decorated variable to link to the data about a day. Perform the same operations on the **MonthView** and **Month** model classes.
+
+
+### Example of Using the Optional index Parameter in ForEach
+
+You can use the optional **index** parameter in item build and ID generation functions.
+
+
+```ts
+@Entry
+@Component
+struct ForEachWithIndex {
+ @State arr: number[] = [4, 3, 1, 5];
+
+ build() {
+ Column() {
+ ForEach(this.arr,
+ (it, indx) => {
+ Text(`Item: ${indx} - ${it}`)
+ },
+ (it, indx) => {
+ return `${indx} - ${it}`
+ }
+ )
+ }
+ }
+}
+```
+
+The correct construction of the ID generation function is essential. When **index** is used in the item generation function, it should also be used in the ID generation function to produce unique IDs and an ID for given source array item that changes when its index position within the array changes.
+
+This example also illustrates that the **index** parameter can cause significant performance degradation. If an item is moved in the source array without modification, the dependent UI still requires rebuilding because of the changed index. For example, with the use of index sorting, the array only requires the unmodified child UI node of **ForEach** to be moved to the correct slot, which is a lightweight operation for the framework. When **index** is used, all child UI nodes need to be rebuilt, which is much more heavy weight.
diff --git a/en/application-dev/quick-start/arkts-rendering-control-ifelse.md b/en/application-dev/quick-start/arkts-rendering-control-ifelse.md
new file mode 100644
index 0000000000000000000000000000000000000000..a88e6d190a2c8a2769386804411b6efc98ea5219
--- /dev/null
+++ b/en/application-dev/quick-start/arkts-rendering-control-ifelse.md
@@ -0,0 +1,229 @@
+# if/else: Conditional Rendering
+
+
+ArkTS provides conditional rendering. Use the **if**, **else**, and **else if** statements to enable your application to display different content based on the condition or state.
+
+> **NOTE**
+>
+> Since API version 9, this API is supported in ArkTS widgets.
+
+## Rules of Use
+
+- The **if**, **else**, and **else if** statements are supported.
+
+- The conditional statements following **if** and **else if** can use state variables.
+
+- Use of the conditional statements within a container component is allowed for building different child components.
+
+- Conditional statements are "transparent" when it comes to the parent-child relationship of components. Rules about permissible child components must be followed when there is one or more **if** statements between the parent and child components.
+
+- The build function inside each branch must follow the special rules for build functions. Each of such build functions must create one or more components. An empty build function that creates no components will result in a syntax error.
+
+- Some container components impose restrictions on the type or number of child components. When conditional statements are used in such components, these restrictions also apply to the components created in conditional statements. For example, when a conditional statement is used in the **\** container component, whose child components can only be **\**, only the **\** component can be used in the conditional statement.
+
+
+## Update Mechanism
+
+A conditional statement updates whenever a state variable used inside the **if** condition or the **else if** condition changes. Specifically:
+
+1. The conditional statement re-evaluates the conditions. If the evaluation of the conditions changes, steps 2 and 3 are performed. Otherwise, no follow-up operation is required.
+
+2. The framework removes all child components that have been built.
+
+3. The framework executes the build function of the branch again to add the generated child component to its parent component. If an applicable **else** branch is missing, no new build function will be executed.
+
+A condition can include Typescript expressions. As for any expression inside build functions, such an expression must not change any application state.
+
+
+## Application Scenarios
+
+
+### Using if for Conditional Rendering
+
+
+```ts
+@Entry
+@Component
+struct ViewA {
+ @State count: number = 0;
+
+ build() {
+ Column() {
+ Text(`count=${this.count}`)
+
+ if (this.count > 0) {
+ Text(`count is positive`)
+ .fontColor(Color.Green)
+ }
+
+ Button('increase count')
+ .onClick(() => {
+ this.count++;
+ })
+
+ Button('decrease count')
+ .onClick(() => {
+ this.count--;
+ })
+ }
+ }
+}
+```
+
+Each branch of the **if** statement includes a build function. Each of such build functions must create one or more components. On initial render, **if** will execute a build function and add the generated child component to its parent component.
+
+**if** updates whenever a state variable used inside the **if** condition or the **else if** condition changes and re-evaluates the conditions. If the evaluation of the conditions changes, it means that another branch of **if** needs to be built. In this case, the ArkUI framework will:
+
+1. Remove all previously rendered components (of the earlier branch).
+
+2. Execute the build function of the branch and add the generated child component to its parent component.
+
+In the preceding example, if **count** increases from 0 to 1, then, **if** updates, the condition **count > 0** is re-evaluated, and the evaluation result changes from **false** to **true**. Therefore, the positive branch build function will be executed, which creates a **\** component and adds it to the **\** parent component. If **count** changes back to 0 later, then, the **\** component will be removed from the **\** component. Since there is no **else** branch, no new build function will be executed.
+
+
+### if ... else ... and Child Component State
+
+This example involves **if...** **else...** and a child component with an \@State decorated variable.
+
+
+```ts
+@Component
+struct CounterView {
+ @State counter: number = 0;
+ label: string = 'unknown';
+
+ build() {
+ Row() {
+ Text(`${this.label}`)
+ Button(`counter ${this.counter} +1`)
+ .onClick(() => {
+ this.counter += 1;
+ })
+ }
+ }
+}
+
+@Entry
+@Component
+struct MainView {
+ @State toggle: boolean = true;
+
+ build() {
+ Column() {
+ if (this.toggle) {
+ CounterView({ label: 'CounterView #positive' })
+ } else {
+ CounterView({ label: 'CounterView #negative' })
+ }
+ Button(`toggle ${this.toggle}`)
+ .onClick(() => {
+ this.toggle = !this.toggle;
+ })
+ }
+ }
+}
+```
+
+On first render, the **CounterView** (label: **'CounterView \#positive'**) child component is created. This child component carries the \@State decorated variable **counter**. When the **CounterView.counter** state variable is updated, the **CounterView** (label: **'CounterView \#positive'**) child component is re-rendered, with its state variable value preserved. When the value of the **MainView.toggle** state variable changes to **false**, the **if** statement inside the **MainView** parent component gets updated, and subsequently the **CounterView** (label: **'CounterView \#positive'**) child component will be removed. At the same time, a new **CounterView** (label: **'CounterView \#negative'**) child component will be created. Its own **counter** state variable is set to the initial value **0**.
+
+> **NOTE**
+>
+> **CounterView** (label: **'CounterView \#positive'**) and **CounterView** (label: **'CounterView \#negative'**) are two distinct instances of the same custom component. When the **if** branch changes, there is no updating of an existing child component and no preservation of state.
+
+The following example shows the required modifications if the value of **counter** be preserved when the **if** condition changes:
+
+
+```
+@Component
+struct CounterView {
+ @Link counter: number;
+ label: string = 'unknown';
+
+ build() {
+ Row() {
+ Text(`${this.label}`)
+ Button(`counter ${this.counter} +1`)
+ .onClick(() => {
+ this.counter += 1;
+ })
+ }
+ }
+}
+
+@Entry
+@Component
+struct MainView {
+ @State toggle: boolean = true;
+ @State counter: number = 0;
+
+ build() {
+ Column() {
+ if (this.toggle) {
+ CounterView({ counter: $counter, label: 'CounterView #positive' })
+ } else {
+ CounterView({ counter: $counter, label: 'CounterView #negative' })
+ }
+ Button(`toggle ${this.toggle}`)
+ .onClick(() => {
+ this.toggle = !this.toggle;
+ })
+ }
+ }
+}
+```
+
+Here, the \@State decorated variable **counter** is owned by the parent component. Therefore, it is not destroyed when a **CounterView** component instance is removed. The **CounterView** component refers to the state by an \@Link decorator. This technique is sometimes referred to as "pushing up the state in the component tree." The state must be moved from a child to its parent (or parent of parent) to avoid losing it when the conditional content (or repeated content) is destroyed.
+
+
+### Nested if Statements
+
+The nesting of **if** statements makes no difference to the rule about the parent component.
+
+
+```ts
+@Entry
+@Component
+struct CompA {
+ @State toggle: boolean = false;
+ @State toggleColor: boolean = false;
+
+ build() {
+ Column() {
+ Text('Before')
+ .fontSize(15)
+ if (this.toggle) {
+ Text('Top True, positive 1 top')
+ .backgroundColor('#aaffaa').fontSize(20)
+ // Inner if statement
+ if (this.toggleColor) {
+ Text('Top True, Nested True, positive COLOR Nested ')
+ .backgroundColor('#00aaaa').fontSize(15)
+ } else {
+ Text('Top True, Nested False, Negative COLOR Nested ')
+ .backgroundColor('#aaaaff').fontSize(15)
+ }
+ } else {
+ Text('Top false, negative top level').fontSize(20)
+ .backgroundColor('#ffaaaa')
+ if (this.toggleColor) {
+ Text('positive COLOR Nested ')
+ .backgroundColor('#00aaaa').fontSize(15)
+ } else {
+ Text('Negative COLOR Nested ')
+ .backgroundColor('#aaaaff').fontSize(15)
+ }
+ }
+ Text('After')
+ .fontSize(15)
+ Button('Toggle Outer')
+ .onClick(() => {
+ this.toggle = !this.toggle;
+ })
+ Button('Toggle Inner')
+ .onClick(() => {
+ this.toggleColor = !this.toggleColor;
+ })
+ }
+ }
+}
+```
diff --git a/en/application-dev/quick-start/arkts-rendering-control-lazyforeach.md b/en/application-dev/quick-start/arkts-rendering-control-lazyforeach.md
new file mode 100644
index 0000000000000000000000000000000000000000..7086569f912a0c447228643958c38b3bd16e0045
--- /dev/null
+++ b/en/application-dev/quick-start/arkts-rendering-control-lazyforeach.md
@@ -0,0 +1,220 @@
+# LazyForEach: Lazy Data Loading
+
+
+**LazyForEach** iterates over provided data sources and creates corresponding components during each iteration. When **LazyForEach** is used in a scrolling container, the framework creates components as required within the visible area of the scrolling container. When a component is out of the visible area, the framework destroys and reclaims the component to reduce memory usage.
+
+
+## API Description
+
+
+```ts
+LazyForEach(
+ dataSource: IDataSource, // Data source to iterate over
+ itemGenerator: (item: any) => void, // Child component generation function
+ keyGenerator?: (item: any) => string // (Optional). ID generation function
+): void
+interface IDataSource {
+ totalCount(): number; // Get total count of data
+ getData(index: number): any; // Get single data by index
+ registerDataChangeListener(listener: DataChangeListener): void; // Register listener to listening data changes
+ unregisterDataChangeListener(listener: DataChangeListener): void; // Unregister listener
+}
+interface DataChangeListener {
+ onDataReloaded(): void; // Called while data reloaded
+ onDataAdd(index: number): void; // Called while single data added
+ onDataMove(from: number, to: number): void; // Called while single data moved
+ onDataDelete(index: number): void; // Called while single data deleted
+ onDataChange(index: number): void; // Called while single data changed
+}
+```
+
+**Parameters**
+
+
+| Name | Type | Mandatory | Description |
+| ------------- | --------------------------------------- | ---- | ---------------------------------------- |
+| dataSource | IDataSource | Yes | **LazyForEach** data source. You need to implement related APIs. |
+| itemGenerator | (item: any) => void | Yes | Child component generation function, which generates a child component for each data item in the array.
**NOTE**
The function body of **itemGenerator** must be included in braces {...}. **itemGenerator** can and must generate only one child component for each iteration. The **if** statement is allowed in **itemGenerator**, but you must ensure that each branch of the **if** statement creates a child component of the same type. **ForEach** and **LazyForEach** statements are not allowed in **itemGenerator**.|
+| keyGenerator | (item: any) => string | No | ID generation function, which generates a unique and fixed ID for each data item in the data source. This ID must remain unchanged for the data item even when the item is relocated in the array. When the item is replaced by a new item, the ID of the new item must be different from that of the replaced item. This ID generation function is optional. However, for performance reasons, it is strongly recommended that the ID generation function be provided, so that the framework can better identify array changes. For example, if no ID generation function is provided, a reverse of an array will result in rebuilding of all nodes in **LazyForEach**.
**NOTE**
The ID generated for each data item in the data source must be unique.|
+
+
+## Description of IDataSource
+
+
+```ts
+interface IDataSource {
+ totalCount(): number;
+ getData(index: number): any;
+ registerDataChangeListener(listener: DataChangeListener): void;
+ unregisterDataChangeListener(listener: DataChangeListener): void;
+}
+```
+
+| Declaration | Parameter Type | Description |
+| ---------------------------------------- | ------------------ | ------------------------------------- |
+| totalCount(): number | - | Obtains the total number of data records. |
+| getData(index: number): any | number | Obtains the data record corresponding to the specified index.
**index**: index of the data record to obtain.|
+| registerDataChangeListener(listener:DataChangeListener): void | DataChangeListener | Registers a listener for data changes.
**listener**: listener for data changes. |
+| unregisterDataChangeListener(listener:DataChangeListener): void | DataChangeListener | Deregisters the listener for data changes.
**listener**: listener for data changes. |
+
+
+## Description of DataChangeListener
+
+
+```ts
+interface DataChangeListener {
+ onDataReloaded(): void;
+ onDataAdded(index: number): void;
+ onDataMoved(from: number, to: number): void;
+ onDataDeleted(index: number): void;
+ onDataChanged(index: number): void;
+ onDataAdd(index: number): void;
+ onDataMove(from: number, to: number): void;
+ onDataDelete(index: number): void;
+ onDataChange(index: number): void;
+}
+```
+
+| Declaration | Parameter Type | Description |
+| ---------------------------------------- | -------------------------------------- | ---------------------------------------- |
+| onDataReloaded(): void | - | Invoked when all data is reloaded. |
+| onDataAdded(index: number):void | number | Invoked when data is added to the position indicated by the specified index.
**index**: index of the position where data is added. |
+| onDataMoved(from: number, to: number): void | from: number,
to: number | Invoked when data is moved.
**from**: original position of data; **to**: target position of data.
**NOTE**
The ID must remain unchanged before and after data movement. If the ID changes, APIs for deleting and adding data must be called.|
+| onDataChanged(index: number): void | number | Invoked when data in the position indicated by the specified index is changed.
**index**: listener for data changes. |
+| onDataAdd(index: number): void | number | Invoked when data is added to the position indicated by the specified index.
**index**: index of the position where data is added. |
+| onDataMove(from: number, to: number): void | from: number,
to: number | Invoked when data is moved.
**from**: original position of data; **to**: target position of data.
**NOTE**
The ID must remain unchanged before and after data movement. If the ID changes, APIs for deleting and adding data must be called.|
+| onDataChanged(index: number): void | number | Invoked when data in the position indicated by the specified index is changed.
**index**: index of the position where data is changed.|
+
+
+## Restrictions
+
+- **LazyForEach** must be used in the container component. Only the **\**, **\**, and **\** components support lazy loading (that is, only the visible part and a small amount of data before and after the visible part are loaded for caching). For other components, all data is loaded at the same time.
+
+- **LazyForEach** must create one and only one child component in each iteration.
+
+- The generated child components must be allowed in the parent container component of **LazyForEach**.
+
+- **LazyForEach** can be included in an **if/else** statement, and can also contain such a statement.
+
+- The ID generation function must generate a unique value for each piece of data. If the IDs are the same, the framework ignores the UI components with the same key value. As a result, these UI components cannot be displayed in the parent container.
+
+- **LazyForEach** must be updated using a **DataChangeListener** object. When the first parameter **dataSource** uses a state variable, a state variable change does not trigger the UI update of **LazyForEach**.
+
+- For better rendering performance, when the **onDataChange** API of the **DataChangeListener** object is used to update the UI, an ID different from the original one needs to be generated to trigger component re-rendering.
+
+- The call sequence of **itemGenerator** functions may be different from the order of the data items in the data source. Therefore, do not assume whether or when the **itemGenerator** and **keyGenerator** functions are executed. For example, the following example may not run properly:
+
+
+ ```ts
+ LazyForEach(dataSource,
+ item => Text(`${item.i}. item.data.label`),
+ item => item.data.id.toString())
+ ```
+
+
+## Example
+
+
+```ts
+// Basic implementation of IDataSource to handle data listener
+class BasicDataSource implements IDataSource {
+ private listeners: DataChangeListener[] = [];
+
+ public totalCount(): number {
+ return 0;
+ }
+
+ public getData(index: number): any {
+ return undefined;
+ }
+
+ registerDataChangeListener(listener: DataChangeListener): void {
+ if (this.listeners.indexOf(listener) < 0) {
+ console.info('add listener');
+ this.listeners.push(listener);
+ }
+ }
+
+ unregisterDataChangeListener(listener: DataChangeListener): void {
+ const pos = this.listeners.indexOf(listener);
+ if (pos >= 0) {
+ console.info('remove listener');
+ this.listeners.splice(pos, 1);
+ }
+ }
+
+ notifyDataReload(): void {
+ this.listeners.forEach(listener => {
+ listener.onDataReloaded();
+ })
+ }
+
+ notifyDataAdd(index: number): void {
+ this.listeners.forEach(listener => {
+ listener.onDataAdd(index);
+ })
+ }
+
+ notifyDataChange(index: number): void {
+ this.listeners.forEach(listener => {
+ listener.onDataChange(index);
+ })
+ }
+
+ notifyDataDelete(index: number): void {
+ this.listeners.forEach(listener => {
+ listener.onDataDelete(index);
+ })
+ }
+
+ notifyDataMove(from: number, to: number): void {
+ this.listeners.forEach(listener => {
+ listener.onDataMove(from, to);
+ })
+ }
+}
+
+class MyDataSource extends BasicDataSource {
+ private dataArray: string[] = ['/path/image0', '/path/image1', '/path/image2', '/path/image3'];
+
+ public totalCount(): number {
+ return this.dataArray.length;
+ }
+
+ public getData(index: number): any {
+ return this.dataArray[index];
+ }
+
+ public addData(index: number, data: string): void {
+ this.dataArray.splice(index, 0, data);
+ this.notifyDataAdd(index);
+ }
+
+ public pushData(data: string): void {
+ this.dataArray.push(data);
+ this.notifyDataAdd(this.dataArray.length - 1);
+ }
+}
+
+@Entry
+@Component
+struct MyComponent {
+ private data: MyDataSource = new MyDataSource();
+
+ build() {
+ List({ space: 3 }) {
+ LazyForEach(this.data, (item: string) => {
+ ListItem() {
+ Row() {
+ Image(item).width('30%').height(50)
+ Text(item).fontSize(20).margin({ left: 10 })
+ }.margin({ left: 10, right: 10 })
+ }
+ .onClick(() => {
+ this.data.pushData('/path/image' + this.data.totalCount());
+ })
+ }, item => item)
+ }
+ }
+}
+```
diff --git a/en/application-dev/reference/apis/js-apis-router.md b/en/application-dev/reference/apis/js-apis-router.md
index 9f7933724c12285f56ac130c9c49c51f7e3549e4..deb3efe0e6ab157002994bea1f5c275a4db1be4a 100644
--- a/en/application-dev/reference/apis/js-apis-router.md
+++ b/en/application-dev/reference/apis/js-apis-router.md
@@ -395,7 +395,7 @@ Returns to the previous page or a specified page.
| Name | Type | Mandatory| Description |
| ------- | ------------------------------- | ---- | ------------------------------------------------------------ |
-| options | [RouterOptions](#routeroptions) | No | Description of the page. The **url** parameter indicates the URL of the page to return to. If the specified page does not exist in the page stack, the application does not respond. If no URL is set, the previous page is returned, and the page in the page stack is not reclaimed. It will be reclaimed after being popped up.|
+| options | [RouterOptions](#routeroptions) | No | Description of the page. The **url** parameter indicates the URL of the page to return to. If the specified page does not exist in the page stack, the application does not respond. If no URL is set, the application returns to the previous page, and the page is not rebuilt. The page in the page stack is not reclaimed. It will be reclaimed after being popped up.|
**Example**
@@ -574,8 +574,8 @@ Enumerates the routing modes.
| Name | Description |
| -------- | ------------------------------------------------------------ |
-| Standard | Standard mode.
The target page is added to the top of the page stack, regardless of whether a page with the same URL exists in the stack.
**NOTE**
If the routing mode is not used, the page is redirected to in standard mode.|
-| Single | Singleton mode.
If the URL of the target page already exists in the page stack, the page closest to the top of the stack is moved as a new page to the top of the stack.
If the URL of the target page does not exist in the page stack, the page is redirected to in standard mode.|
+| Standard | Multi-instance mode. It is the default routing mode.
The target page is added to the top of the page stack, regardless of whether a page with the same URL exists in the stack.
**NOTE**
If the routing mode is not used, the page is redirected to in multi-instance mode.|
+| Single | Singleton mode.
If the URL of the target page already exists in the page stack, the page closest to the top of the stack is moved to the top and becomes a new page.
If the URL of the target page does not exist in the page stack, the page is redirected to in multi-instance mode.|
## Examples
diff --git a/en/application-dev/reference/arkui-js/js-components-container-stepper.md b/en/application-dev/reference/arkui-js/js-components-container-stepper.md
index ffcab80f20581fcb3e6ef36586416faeec50f922..838c3c8ea78e228c572949de61ac855d8f4f4d45 100644
--- a/en/application-dev/reference/arkui-js/js-components-container-stepper.md
+++ b/en/application-dev/reference/arkui-js/js-components-container-stepper.md
@@ -48,8 +48,8 @@ In addition to the [universal events](../arkui-js/js-components-common-events.md
| finish | - | Triggered when the last step on the navigator is complete. |
| skip | - | Triggered when users click the skip button to skip steps.|
| change | { prevIndex: prevIndex, index: index} | Triggered when users click the left or right (text) button of the step navigator to switch between steps. **prevIndex** indicates the index of the previous step, and **index** indicates that of the current step.|
-| next | { index: index, pendingIndex: pendingIndex } | Triggered when users click the next (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in **{pendingIndex:*** pendingIndex***}** format. You can use **pendingIndex** to specify a **\** child component as the next step to go. |
-| back | { index: index, pendingIndex: pendingIndex } | Triggered when users click the previous (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in Object:{ **{pendingIndex:*** pendingIndex***}** format. You can use **pendingIndex** to specify a **** child component as the previous step.|
+| next | { index: index, pendingIndex: pendingIndex } | Triggered when users click the next (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in { pendingIndex: pendingIndex } format. You can use **pendingIndex** to specify a **\** child component as the next step to go. |
+| back | { index: index, pendingIndex: pendingIndex } | Triggered when users click the previous (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in Object: { pendingIndex: pendingIndex } format. You can use **pendingIndex** to specify a **\** child component as the previous step. |
## Methods
@@ -133,7 +133,7 @@ text {
```js
// xxx.js
-import prompt from '@system.prompt';
+import prompt from '@ohos.promptAction';
export default {
data: {
diff --git a/en/application-dev/reference/arkui-ts/figures/LoadingProgress.gif b/en/application-dev/reference/arkui-ts/figures/LoadingProgress.gif
new file mode 100644
index 0000000000000000000000000000000000000000..90d9c7bba27ef616fb6bfdea407358df25ac6f91
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/LoadingProgress.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/drag-drop.gif b/en/application-dev/reference/arkui-ts/figures/drag-drop.gif
new file mode 100644
index 0000000000000000000000000000000000000000..05b0d0a29dfff526df15e64914f77d598124581c
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/drag-drop.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/ifButton.gif b/en/application-dev/reference/arkui-ts/figures/ifButton.gif
new file mode 100644
index 0000000000000000000000000000000000000000..d92e24eadd8b744c17ee098ae876c2e9ef605325
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/ifButton.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/imagespan.png b/en/application-dev/reference/arkui-ts/figures/imagespan.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b0684be4d1e785c4301f97ca50016b0ccd83623
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/imagespan.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/loadProgress.jpeg b/en/application-dev/reference/arkui-ts/figures/loadProgress.jpeg
deleted file mode 100644
index 141bc03c7528681e90fc3ed91b4c05611355e092..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/loadProgress.jpeg and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md
index 7339314e264130287248efd6e5e5a2e696a726e7..66e4eae88f46e6b63652d9ebfd8fadc24df2b529 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md
@@ -23,7 +23,7 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Mandatory | Description |
| ----------- | ---------- | ------| --------------------------------- |
| type | ButtonType | No | Button type.
Default value: **ButtonType.Capsule** |
-| stateEffect | boolean | No | Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.
Default value: **true**|
+| stateEffect | boolean | No | Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.
Default value: **true**
**NOTE**
When the pressed effect is enabled on the click of the button and the state style is set, the background color is aaplied based on the state style.|
**API 2:** Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })
@@ -35,12 +35,13 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Mandatory | Description |
| ------- | ----------------------------------- | ---- | ------------- |
-| label | [ResourceStr](ts-types.md#resourcestr) | No | Button text. |
+| label | [ResourceStr](ts-types.md#resourcestr) | No | Button text.|
| options | { type?: ButtonType, stateEffect?: boolean } | No | See parameters of API 1.|
-
## Attributes
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
+
| Name | Type | Description |
| ----------- | ----------- | --------------------------------- |
| type | ButtonType | Button type.
Default value: **ButtonType.Capsule**
Since API version 9, this API is supported in ArkTS widgets.|
@@ -68,15 +69,19 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Mandatory| Description |
| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
-| overflow | [TextOverflow](ts-appendix-enums.md#textoverflow) | No | Display mode when the label text is too long. Text is clipped at the transition between words. To clip text in the middle of a word, add **\u200B** between characters.|
+| overflow | [TextOverflow](ts-appendix-enums.md#textoverflow) | No | Display mode when the label text is too long. Text is clipped at the transition between words. To clip text in the middle of a word, add zero-width spaces between characters.|
| maxLines | number | No | Maximum number of lines in the label text. By default, text is automatically folded. If this attribute is specified, the text will not exceed the specified number of lines. If there is extra text, you can use **textOverflow** to specify how it is displayed.|
| minFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | No | Minimum font size of the label text. For the setting to take effect, this attribute must be used together with **maxFontSize**, **maxLines**, or layout constraint settings.|
| maxFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | No | Maximum font size of the label text. For the setting to take effect, this attribute must be used together with **minFontSize**, **maxLines**, or layout constraint settings.|
-| heightAdaptivePolicy | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | No | How the adaptive height is determined for the label text. |
+| heightAdaptivePolicy | [TextHeightAdaptivePolicy](ts-appendix-enums.md#TextHeightAdaptivePolicy10) | No | How the adaptive height is determined for the label text. |
| font | [Font](ts-types.md#Font) | No | Font of the label text. |
+## Events
+The [universal events](ts-universal-events-click.md) are supported.
## Example
+### Example 1
+
```ts
// xxx.ets
@Entry
@@ -86,7 +91,13 @@ struct ButtonExample {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
Text('Normal button').fontSize(9).fontColor(0xCCCCCC)
Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
- Button('OK', { type: ButtonType.Normal, stateEffect: true }).borderRadius(8).backgroundColor(0x317aff).width(90)
+ Button('OK', { type: ButtonType.Normal, stateEffect: true })
+ .borderRadius(8)
+ .backgroundColor(0x317aff)
+ .width(90)
+ .onClick(() => {
+ console.log('ButtonType.Normal')
+ })
Button({ type: ButtonType.Normal, stateEffect: true }) {
Row() {
LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)
@@ -128,3 +139,33 @@ struct ButtonExample {
```
+
+### Example 2
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct SwipeGestureExample {
+ @State count: number = 0
+
+ build() {
+ Column() {
+ Text(`${this.count}`)
+ .fontSize(30)
+ .onClick(() => {
+ this.count++
+ })
+ if (this.count <= 0) {
+ Button('count is negative').fontSize(30).height(50)
+ } else if (this.count % 2 === 0) {
+ Button('count is even').fontSize(30).height(50)
+ } else {
+ Button('count is odd').fontSize(30).height(50)
+ }
+ }.height('100%').width('100%').justifyContent(FlexAlign.Center)
+ }
+}
+```
+
+
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md b/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
index 09b45c7abe0e652ec4d287d8f665444aafed9c25..7cb0815a89199adfcc7d07a93df95595c20ce53d 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
@@ -17,9 +17,10 @@ Not supported
ImageAnimator()
-
## Attributes
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
+
| Name | Type |Description |
| ---------- | ----------------------- |-------- |
| images | Array<[ImageFrameInfo](#imageframeinfo)> | Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. For details, see **ImageFrameInfo**.
Default value: **[]**
**NOTE**
Dynamic update is not supported.|
@@ -42,9 +43,10 @@ ImageAnimator()
| left | number \| string | No | Horizontal coordinate of the image relative to the upper left corner of the widget
Default value: **0** |
| duration | number | No | Playback duration of each image frame, in milliseconds.
Default value: **0** |
-
## Events
+In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
+
| Name| Description|
| -------- | -------- |
| onStart(event: () => void) | Triggered when the animation starts to play.|
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-imagespan.md b/en/application-dev/reference/arkui-ts/ts-basic-components-imagespan.md
new file mode 100644
index 0000000000000000000000000000000000000000..db8fbb1fa0a3e809409aa4afba07eb7696fc539c
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-imagespan.md
@@ -0,0 +1,95 @@
+# ImageSpan
+
+**\** is a child component of the [\](ts-basic-components-text.md) component and is used to display inline images.
+
+> **NOTE**
+>
+> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Child Components
+
+Not supported
+
+
+## APIs
+
+ImageSpan(value: ResourceStr | PixelMap)
+
+**Parameters**
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| value | [ResourceStr](ts-types.md#ResourceStr) \| [PixelMap](../apis/js-apis-image.md#pixelmap7) | Yes| Image source. Both local and online images are supported.
When using an image referenced using a relative path, for example, **ImageSpan("common/test.jpg")**, the **\** component cannot be called across bundles or modules. Therefore, you are advised to use **\$r** to reference image resources that need to be used globally.
\- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.
\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.
\- Strings with the **file:///data/storage** prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the application. Ensure that the application has the read permission to the files in the specified path.|
+
+
+## Attributes
+
+Among all the [universal events](ts-universal-attributes-size.md), only **width**, **height**, and **size** are supported.
+
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| verticalAlign | [ImageSpanAlignment](#imagespanalignment) | Alignment mode of the image with the text.|
+| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Image scale type.
Default value: **ImageFit.Cover**|
+
+## ImageSpanAlignment
+
+| Name | Description |
+| -------- | ------------------------------ |
+| TOP | The image is top aligned with the text. |
+| CENTER | The image is centered aligned with the text. |
+| BOTTOM | The image is bottom aligned with the text. |
+| BASELINE | The image is bottom aligned with the text baseline.|
+
+## Events
+
+Among all the universal events, only the [click event](ts-universal-attributes-click.md) is supported.
+
+## Example
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct SpanExample {
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start}) {
+ Text() {
+ Span('This is the Span and ImageSpan component').fontSize(25).textCase(TextCase.Normal)
+ .decoration({ type: TextDecorationType.None, color: Color.Pink })
+ }.width('100%')
+ Text() {
+ ImageSpan($r('app.media.icon'))
+ .width('200px')
+ .height('200px')
+ .objectFit(ImageFit.Fill)
+ .verticalAlign(ImageSpanAlignment.CENTER)
+ Span('I am LineThrough-span')
+ .decoration({ type: TextDecorationType.LineThrough, color: Color.Red }).fontSize(25)
+ ImageSpan($r('app.media.icon'))
+ .width('50px')
+ .height('50px')
+ .verticalAlign(ImageSpanAlignment.TOP)
+ Span('I am Underline-span')
+ .decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(25)
+ ImageSpan($r('app.media.icon'))
+ .size({width:'100px', height:'100px'})
+ .verticalAlign(ImageSpanAlignment.BASELINE)
+ Span('I am Underline-span')
+ .decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(25)
+ ImageSpan($r('app.media.icon'))
+ .width('70px')
+ .height('70px')
+ .verticalAlign(ImageSpanAlignment.BOTTOM)
+ Span('I am Underline-span')
+ .decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(50)
+ }
+ .width('100%')
+ .backgroundColor(Color.Orange)
+ .textIndent(50)
+ }.width('100%').height('100%').padding({ left: 0, right: 0, top: 0 })
+ }
+}
+```
+
+
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md
index 4381ad3257af51b69cb968af826f2359e3f30398..369a17a005daa7bbf1951ed25aea0ff635606df0 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md
@@ -43,4 +43,4 @@ struct LoadingProgressExample {
}
```
-
+
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md b/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
index 17787ccda78c576429fe1db1b81b3b5c879cba79..b761ae46e7409a709b37f39af778581f06186e96 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
@@ -23,86 +23,85 @@ Navigation()
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
-| Name | Type | Description |
-| -------------- | ---------------------------------------- | ---------------------------------------- |
-| title | [ResourceStr](ts-types.md#resourcestr)10+ \| [CustomBuilder](ts-types.md#custombuilder8)8+ \| [NavigationCommonTitle](#navigationcommontitle)9+ \| [NavigationCustomTitle](#navigationcustomtitle)9+ | Page title. |
-| subTitledeprecated | string | Subtitle of the page. This attribute is deprecated since API version 9. You are advised to use **title** instead. |
-| menus | Array<[NavigationMenuItem](#navigationmenuitem)> \| [CustomBuilder](ts-types.md#custombuilder8)8+ | Menu items in the upper right corner of the page. When the value type is Array\<[NavigationMenuItem](#navigationmenuitem)>, the menu shows a maximum of three icons in portrait mode and a maximum of five icons in landscape mode, plus excess icons (if any) under the automatically generated **More** icon. |
-| titleMode | [NavigationTitleMode](#navigationtitlemode) | Display mode of the page title bar.
Default value: **NavigationTitleMode.Free**|
-| toolBar | [object](#object) \| [CustomBuilder](ts-types.md#custombuilder8)8+ | Content of the toolbar.
**items**: items on the toolbar. |
-| hideToolBar | boolean | Whether to hide the toolbar.
Default value: **false**
**true**: Hide the toolbar.
**false**: Display the toolbar.|
-| hideTitleBar | boolean | Whether to hide the title bar.
Default value: **false**
**true**: Hide the title bar.
**false**: Display the title bar.|
-| hideBackButton | boolean | Whether to hide the Back button.
Default value: **false**
**true**: Hide the Back button.
**false**: Display the Back button.|The Back button in the title bar of the **\** component cannot be hidden.|
-| navBarWidth9+ | [Length](ts-types.md#length) | Width of the navigation bar.
Default value: **200vp**|
-| navBarPosition9+ | [NavBarPosition](#navbarposition) | Position of the navigation bar.
Default value: **NavBarPosition.Start**|
-| mode9+ | [NavigationMode](#navigationmode) | Display mode of the navigation bar.
Default value: **NavigationMode.Auto**|
-| backButtonIcon9+ | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Back button icon on the navigation bar. The Back button in the title bar of the **\** component cannot be hidden.|
-| hideNavBar9+ | boolean | Whether to hide the navigation bar. This attribute is valid only when **mode** is set to **NavigationMode.Split**.|
+| Name | Type | Description |
+| ----------------------------- | ---------------------------------------- | ---------------------------------------- |
+| title | [ResourceStr](ts-types.md#resourcestr)10+ \| [CustomBuilder](ts-types.md#custombuilder8)8+ \| [NavigationCommonTitle](#navigationcommontitle)9+ \| [NavigationCustomTitle](#navigationcustomtitle)9+ | Page title.
**NOTE**
When the NavigationCustomTitle type is used to set the height, the **titleMode** attribute does not take effect.
When the title string is too long: (1) If no subtitle is set, the string is scaled down, wrapped in two lines, and then clipped with an ellipsis (...); (2) If a subtitle is set, the subtitle is scaled down and then clipped with an ellipsis (...).|
+| subTitledeprecated | string | Subtitle of the page. If this attribute is not set, no subtitle is displayed. This attribute is deprecated since API version 9. You are advised to use **title** instead.|
+| menus | Array<[NavigationMenuItem](#navigationmenuitem)> \| [CustomBuilder](ts-types.md#custombuilder8)8+ | Menu items in the upper right corner of the page. If this parameter is not set, no menu item is displayed. When the value type is Array\<[NavigationMenuItem](#navigationmenuitem)>, the menu shows a maximum of three icons in portrait mode and a maximum of five icons in landscape mode, plus excess icons (if any) under the automatically generated **More** icon.|
+| titleMode | [NavigationTitleMode](#navigationtitlemode) | Display mode of the page title bar.
Default value: **NavigationTitleMode.Free**|
+| toolBar | [object](#object) \| [CustomBuilder](ts-types.md#custombuilder8)8+ | Content of the toolbar. If this attribute is not set, no toolbar is displayed.
**items**: items on the toolbar.
**NOTE**
Items are evenly distributed on the toolbar at the bottom. Text and icons are evenly distributed in each content area. If the text is too long, it is scaled down level by level, wrapped in two lines, and then clipped with an ellipsis (...).|
+| hideToolBar | boolean | Whether to hide the toolbar.
Default value: **false**
**true**: Hide the toolbar.
**false**: Display the toolbar.|
+| hideTitleBar | boolean | Whether to hide the title bar.
Default value: **false**
**true**: Hide the title bar.
**false**: Display the title bar.|
+| hideBackButton | boolean | Whether to hide the Back button.
Default value: **false**
**true**: Hide the Back button.
**false**: Display the Back button.
The Back button in the title bar of the **\** component cannot be hidden.
**NOTE**
The Back button is available only when **titleMode** is set to **NavigationTitleMode.Mini**.|
+| navBarWidth9+ | [Length](ts-types.md#length) | Width of the navigation bar.
Default value: **200**
Unit: vp
**NOTE**
This attribute is valid only when the **\** component is split.|
+| navBarPosition9+ | [NavBarPosition](#navbarposition) | Position of the navigation bar.
Default value: **NavBarPosition.Start**
**NOTE**
This attribute is valid only when the **\** component is split.|
+| mode9+ | [NavigationMode](#navigationmode) | Display mode of the navigation bar.
Default value: **NavigationMode.Auto**
At the default settings, the component adapts to a single column or two columns based on the component width.|
+| backButtonIcon9+ | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Back button icon on the navigation bar. The Back button in the title bar of the **\** component cannot be hidden.|
+| hideNavBar9+ | boolean | Whether to hide the navigation bar. This attribute is valid only when **mode** is set to **NavigationMode.Split**.|
## NavigationMenuItem
-| Name | Type | Mandatory| Description |
-| ------ | ----------------------- | ---- | ------------------------------ |
-| value | string | Yes | Text of a menu item. |
-| icon | string | No | Icon path of a menu item.|
-| action | () => void | No | Callback invoked when a menu item is selected. |
+| Name | Type | Mandatory | Description |
+| ------ | ----------------------- | ---- | --------------- |
+| value | string | Yes | Text of a menu item. |
+| icon | string | No | Icon path of a menu item.|
+| action | () => void | No | Callback invoked when a menu item is selected. |
## object
-| Name | Type | Mandatory| Description |
-| ------ | ----------------------- | ---- | ------------------------------ |
-| value | string | Yes | Text of an option on the toolbar. |
-| icon | string | No | Icon path of an option on the toolbar.|
-| action | () => void | No | Callback invoked when an option is selected. |
+| Name | Type | Mandatory | Description |
+| ------ | ----------------------- | ---- | --------------- |
+| value | string | Yes | Text of an option on the toolbar. |
+| icon | string | No | Icon path of an option on the toolbar.|
+| action | () => void | No | Callback invoked when an option is selected. |
## NavigationTitleMode
| Name | Description |
| ---- | ---------------------------------------- |
| Free | When the content is a scrollable component, the main title shrinks as the content scrolls down (the subtitle fades out with its size remaining unchanged) and restores when the content scrolls up to the top.|
-| Mini | The title is fixed at mini mode. |
-| Full | The title is fixed at full mode. |
+| Mini | The title is fixed at mini mode. |
+| Full | The title is fixed at full mode. |
## NavigationCommonTitle
-| Name | Type | Mandatory| Description |
-| ------ | --------- | ---- | -------- |
-| main | string | Yes| Main title.|
-| sub | string | Yes| Subtitle.|
+| Name | Type | Mandatory | Description |
+| ---- | ------ | ---- | ------ |
+| main | string | Yes | Main title.|
+| sub | string | Yes | Subtitle.|
## NavigationCustomTitle
-| Name | Type | Mandatory| Description |
-| ------ | ----------------------- | ---- | ------------------------------ |
-| builder | [CustomBuilder](ts-types.md#custombuilder8) | Yes| Content of the title bar.|
-| height | [TitleHeight](#titleheight) \| [Length](ts-types.md#length) | Yes| Height of the title bar.|
+| Name | Type | Mandatory | Description |
+| ------- | ---------------------------------------- | ---- | -------- |
+| builder | [CustomBuilder](ts-types.md#custombuilder8) | Yes | Content of the title bar.|
+| height | [TitleHeight](#titleheight) \| [Length](ts-types.md#length) | Yes | Height of the title bar.|
## NavBarPosition
-| Name| Description |
-| ---- | ---------------------------------------- |
+| Name | Description |
+| ----- | ---------------- |
| Start | When two columns are displayed, the main column is at the start of the main axis.|
-| End | When two columns are displayed, the main column is at the end of the main axis. |
+| End | When two columns are displayed, the main column is at the end of the main axis.|
## NavigationMode
-| Name| Description |
-| ---- | ---------------------------------------- |
-| Stack | The navigation bar and content area are displayed independently of each other, which are equivalent to two pages.|
-| Split | The navigation bar and content area are displayed in different columns.|
-| Auto | When the window width is greater than or equal to 520 vp, Split mode is used. Otherwise, the Stack mode is used.|
+| Name | Description |
+| ----- | ---------------------------------------- |
+| Stack | The navigation bar and content area are displayed independently of each other, which are equivalent to two pages. |
+| Split | The navigation bar and content area are displayed in different columns. |
+| Auto | When the window width is greater than or equal to 520 vp, Split mode is used. Otherwise, the Stack mode is used.|
## TitleHeight
-| Name| Description |
-| ---- | ---------------------------------------- |
-| MainOnly | Recommended height (56 vp) of the title bar when only the main title is available.|
+| Name | Description |
+| ----------- | -------------------------- |
+| MainOnly | Recommended height (56 vp) of the title bar when only the main title is available. |
| MainWithSub | Recommended height (82 vp) of the title bar when both the main title and subtitle exist.|
> **NOTE**
->
> Among the scrollable components, only **\** is supported.
@@ -150,7 +149,7 @@ struct NavigationExample {
.fontSize(14)
.lineHeight(19)
.opacity(0.4)
- .margin({ top: 2 })
+ .margin({ top: 2, bottom: 20 })
}.alignItems(HorizontalAlign.Start)
}
@@ -195,16 +194,16 @@ struct NavigationExample {
Column() {
Navigation() {
TextInput({ placeholder: 'search...' })
- .width(336)
+ .width('90%')
.height(40)
.backgroundColor('#FFFFFF')
- .margin({ top: 8, left: 12 })
+ .margin({ top: 8 })
List({ space: 12, initialIndex: 0 }) {
ForEach(this.arr, (item) => {
ListItem() {
Text('' + item)
- .width(336)
+ .width('90%')
.height(72)
.backgroundColor('#FFFFFF')
.borderRadius(24)
@@ -216,7 +215,7 @@ struct NavigationExample {
}
.height(324)
.width('100%')
- .margin({ top: 12, left: 12 })
+ .margin({ top: 12, left: '10%' })
}
.title(this.NavigationTitle)
.menus(this.NavigationMenus)
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md b/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md
index 3213884ab2337bdf548db9b685a64cdd5aa2815b..ee4275214beebdb3abd55b5eab9a8934f5f0226c 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md
@@ -40,7 +40,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
| Name| Description|
| -------- | -------- |
-| onChange(callback: (isChecked: boolean) => void) | Triggered when the selected state of the radio button changes.
- If **isChecked** is **true**, the radio button is selected.
- If **isChecked** is **false**, the radio button is not selected.
Since API version 9, this API is supported in ArkTS widgets.|
+| onChange(callback: (isChecked: boolean) => void) | Triggered when the selected state of the radio button changes.
- If **isChecked** is **true**, it indicates that the radio button changes from unselected to selected.
- If **isChecked** is **false**, it indicates that the radio button changes from selected to unselected.
Since API version 9, this API is supported in ArkTS widgets.|
## RadioStyle
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md b/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md
index eb3d4489f8cadd3df86f727fe68be24596b407ee..1b7b256be8889e800345b24a58d1b4d56afca3dc 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-rating.md
@@ -20,25 +20,31 @@ Since API version 9, this API is supported in ArkTS widgets.
**Parameters**
-| Name| Type| Mandatory| Description|
-| -------- | -------- | -------- | -------- |
-| rating | number | Yes| Value to rate.
Default value: **0**|
-| indicator | boolean | No| Whether the component is used only as an indicator and cannot be operated.
Default value: **false**|
+| Name | Type | Mandatory | Description |
+| --------- | ------- | ---- | ---------------------------------------- |
+| rating | number | Yes | Value to rate.
Default value: **0**
Value range: [0, stars]
A value less than 0 evaluates to the value **0**. A value greater than the value of **stars** evaluates to the value of **stars**.|
+| indicator | boolean | No | Whether the component is used only as an indicator and cannot be operated.
Default value: **false**
**NOTE**
When **indicator** is set to **true**, the default component height is 12.0 vp, and the component width is calculated as follows: Height x Value of **stars**.
When **indicator** is set to **false**, the default component height is 28.0 vp, and the component width is calculated as follows: Height x Value of **stars**.|
## Attributes
-| Name| Type| Description|
-| -------- | -------- | -------- |
-| stars | number | Total number of stars.
Default value: **5**
Since API version 9, this API is supported in ArkTS widgets.|
-| stepSize | number | Step of an operation.
Default value: **0.5**
Since API version 9, this API is supported in ArkTS widgets.|
-| starStyle | {
backgroundUri: string,
foregroundUri: string,
secondaryUri?: string
} | Star style.
**backgroundUri**: image path for the unselected star. You can use the default system image or a custom image.
**foregroundUri**: image path for the selected star. You can use the default system image or a custom image.
**secondaryUir**: image path for the partially selected star. You can use the default system image or a custom image.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
For details about the image types supported by the **startStyle** attribute, see [Image](ts-basic-components-image.md).
Local and online images are supported, but not **PixelMap** and **Resource** objects.
By default, the image is loaded in asynchronous mode. Synchronous loading is not supported.|
+| Name | Type | Description |
+| --------- | ---------------------------------------- | ---------------------------------------- |
+| stars | number | Total number of ratings.
Default value: **5**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 evaluates to the default value.|
+| stepSize | number | Step of an operation.
Default value: **0.5**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 evaluates to the default value.
Value range: [0.1, stars]|
+| starStyle | {
backgroundUri: string,
foregroundUri: string,
secondaryUri?: string
} | Star style.
**backgroundUri**: image path for the unselected star. You can use the default system image or a custom image.
**foregroundUri**: image path for the selected star. You can use the default system image or a custom image.
**secondaryUir**: image path for the partially selected star. You can use the default system image or a custom image.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
For details about the image types supported by the **startStyle** attribute, see [Image](ts-basic-components-image.md).
Local and online images are supported, but not **PixelMap** and **Resource** objects.
By default, the image is loaded in asynchronous mode. Synchronous loading is not supported.
If this parameter is set to **undefined** or an empty string, the **\** component loads the default star image source.|
+
+> **NOTE**
+>
+> The drawing area of each rating image is [width/stars, height], wherin **width** and **height** indicate the width and height of the **\** component, respectively.
+>
+> To specify the drawing area as a square, you are advised to customize the width and height in this format: [height * stars, height], width = height * stars.
## Events
-| Name| Description|
-| -------- | -------- |
+| Name | Description |
+| ---------------------------------------- | ---------------------------------------- |
| onChange(callback:(value: number) => void) | Triggered when the rating value changes.
Since API version 9, this API is supported in ArkTS widgets.|
## Example
@@ -80,7 +86,7 @@ struct RatingExample {
.fontColor('#182431')
.fontWeight(500)
Row() {
- Rating({ rating: 3.5, indicator: true }).margin({ top: 1, right: 8 })
+ Rating({ rating: 3.5, indicator: false }).margin({ top: 1, right: 8 })
Text('2021/06/02')
.fontSize(10)
.fontColor('#182431')
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-search.md b/en/application-dev/reference/arkui-ts/ts-basic-components-search.md
index 1086c3e68b3f5ca5d7d4383a62477d429ea122e4..3c297a8892d9c5852397a46bf6dd4fdba5038712 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-search.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-search.md
@@ -31,8 +31,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| ----------------------- | ------------------------------------------------ | ---------------------------------------------- |
| searchButton10+ | value: string,
option?: [SearchButtonOption](#searchbuttonoption10) | Text on the search button located next to the search text box. By default, there is no search button. |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor) | Placeholder text color. |
-| placeholderFont | [Font](ts-types.md#font) | Placeholder text font. |
-| textFont | [Font](ts-types.md#font) | Text font for the search text box. |
+| placeholderFont | [Font](ts-types.md#font) | Placeholder text style, including the font size, font width, font family, and font style. Currently, only the default font family is supported. |
+| textFont | [Font](ts-types.md#font) | Style of the text entered in the search box, including the font size, font width, font family, and font style. Currently, only the default font family is supported. |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Text alignment mode in the search text box.
Default value: **TextAlign.Start** |
| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed. |
| searchIcon10+ | [IconOptions](#iconoptions10) | Style of the search icon on the left. |
@@ -78,9 +78,9 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
| ------------------------------------------- | ------------------------------------------------------------ |
| onSubmit(callback: (value: string) => void) | Invoked when users click the search icon or the search button, or touch the search button on a soft keyboard.
- **value**: current text input. |
| onChange(callback: (value: string) => void) | Invoked when the input in the text box changes.
- **value**: current text input. |
-| onCopy(callback: (value: string) => void) | Invoked when data is copied to the pasteboard, which is displayed when the search text box is long pressed.
- **value**: text copied. |
-| onCut(callback: (value: string) => void) | Invoked when data is cut from the pasteboard, which is displayed when the search text box is long pressed.
- **value**: text cut. |
-| onPaste(callback: (value: string) => void) | Invoked when data is pasted from the pasteboard, which is displayed when the search text box is long pressed.
-**value**: text pasted. |
+| onCopy(callback: (value: string) => void) | Invoked when data is copied to the pasteboard, which is displayed when the search text box is long pressed.
- **value**: text copied. |
+| onCut(callback: (value: string) => void) | Invoked when data is cut from the pasteboard, which is displayed when the search text box is long pressed.
- **value**: text cut. |
+| onPaste(callback: (value: string) => void) | Invoked when data is pasted from the pasteboard, which is displayed when the search text box is long pressed.
-**value**: text pasted. |
## SearchController
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md b/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md
index 4c32cb2686c2f6e3abc7dd4b3ee4af2c9355d6fa..efc17049a39e3a97e1ae038ac7f18c7b3b255fd2 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-slider.md
@@ -24,8 +24,8 @@ Since API version 9, this API is supported in ArkTS widgets.
| -------- | -------- | -------- | -------- |
| value | number | No| Current progress.
Default value: **0**|
| min | number | No| Minimum value.
Default value: **0**|
-| max | number | No| Maximum value.
Default value: **100**|
-| step | number | No| Step of the slider.
Default value: **1**
Value range: [0.01, max]|
+| max | number | No| Maximum value.
Default value: **100**
**NOTE**
If the value of **min** is greater than or equal to the value of **max**, the default value **0** is used for **min** and the default value **100** is used for **max**.
If the value is not within the [min, max] range, the value of **min** or **max**, whichever is closer.|
+| step | number | No| Step of the slider.
Default value: **1**
Value range: [0.01, max]
**NOTE**
If this parameter is set to a value less than 0 or a percentage, the default value is used.|
| style | [SliderStyle](#sliderstyle) | No| Style of the slider thumb and track.
Default value: **SliderStyle.OutSet**|
| direction8+ | [Axis](ts-appendix-enums.md#axis) | No| Whether the slider moves horizontally or vertically.
Default value: **Axis.Horizontal**|
| reverse8+ | boolean | No| Whether the slider values are reversed. By default, the values increase from left to right for a horizontal slider and from top to bottom for a vertical slider.
Default value: **false**|
@@ -39,9 +39,6 @@ Since API version 9, this API is supported in ArkTS widgets.
| OutSet | The slider is on the slider track.|
| InSet | The slider is in the slider track.|
-
-## Attributes
-
Except touch target attributes, the universal attributes are supported.
| Name| Type| Description|
@@ -51,7 +48,7 @@ Except touch target attributes, the universal attributes are supported.
| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected part of the slider track.
Since API version 9, this API is supported in ArkTS widgets.|
| showSteps | boolean | Whether to display the current step.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.|
| showTips | boolean | Whether to display a bubble to indicate the percentage when the user drags the slider.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
When **direction** is set to **Axis.Horizontal**, the bubble is displayed right above the slider. When **direction** is set to **Axis.Vertical**, the bubble is displayed on the left of the slider.
The drawing area of the bubble is the overlay of the slider.
If no margin is set for the slider or the margin is not large enough, the bubble will be clipped.|
-| trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.
Since API version 9, this API is supported in ArkTS widgets.|
+| trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.
Default value: **4.0vp** when **style** is set to **[SliderStyle](#sliderstyle).OutSet**; **20.0vp** when **style** is set to **[SliderStyle](#sliderstyle).InSet**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 evaluates to the default value.|
| blockBorderColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Border color of the slider in the block direction.|
| blockBorderWidth10+ | [Length](ts-types.md#length) | Border width of the slider in the block direction.|
| stepColor10+ | [ResourceColor](ts-types.md#resourcecolor) | Step color.|
@@ -86,7 +83,7 @@ In addition to the **OnAppear** and **OnDisAppear** universal events, the follow
| Name| Description|
| -------- | -------- |
-| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Invoked when the slider is dragged or clicked.
**value**: current slider value. If the return value contains decimals, you can use **Math.toFixed()** to process the data to the desired precision.
**mode**: state triggered by the event.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The **Begin** and **End** states are triggered when the slider is clicked with a gesture. The **Moving** and **Click** states are triggered when the value of **value** changes.
If the coherent action is a drag action, the **Click** state will not be triggered.
The value range of **value** is the **steps** value array.|
+| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Invoked when the slider is dragged or clicked.
**value**: current slider value. If the return value contains decimals, you can use the **number.toFixed()** API to process the data to the expected precision.
**mode**: state triggered by the event.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The **Begin** and **End** states are triggered when the slider is clicked with a gesture. The **Moving** and **Click** states are triggered when the value of **value** changes.
If the coherent action is a drag action, the **Click** state will not be triggered.
The value range of **value** is the **steps** value array.|
## SliderChangeMode
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-text.md b/en/application-dev/reference/arkui-ts/ts-basic-components-text.md
index d20ad37b35f6184fb9f3c2b9b626d232fa6a3a6a..2c6e87d2812bb855b685d3176c5f1fed68eee3e6 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-text.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-text.md
@@ -9,7 +9,7 @@ The **\** component is used to display a piece of textual information.
## Child Components
-This component can contain the [\](ts-basic-components-span.md) child component.
+This component can contain the \<[Span](ts-basic-components-span.md)> and \<[ImageSpan](ts-basic-components-imagespan.md)> child components.
## APIs
@@ -31,22 +31,27 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Type | Description |
| ----------------------- | ----------------------------------- | ------------------------------------------- |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Horizontal alignment mode of the text.
Default value: **TextAlign.Start**
**NOTE**
The text takes up the full width of the **\** component. To set the vertical alignment for the text, use the [align](ts-universal-attributes-location.md) attribute.
Since API version 9, this API is supported in ArkTS widgets.|
-| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | Display mode when the text is too long.
Default value: **{overflow: TextOverflow.Clip}**
**NOTE**
Text is clipped at the transition between words. To clip text in the middle of a word, add **\u200B** between characters.
This attribute must be used with **maxLines** to take effect.
Since API version 9, this API is supported in ArkTS widgets. |
-| maxLines | number | Maximum number of lines in the text.
Default value: **Infinity**
**NOTE**
By default, text is automatically folded. If this attribute is specified, the text will not exceed the specified number of lines. If there is extra text, you can use **textOverflow** to specify how it is displayed.
Since API version 9, this API is supported in ArkTS widgets. |
+| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | Display mode when the text is too long.
Default value: **{overflow: TextOverflow.Clip}**
**NOTE**
Text is clipped at the transition between words. To clip text in the middle of a word, add **\u200B** between characters.
If **overflow** is set to **TextOverflow.None**, **TextOverflow.Clip**, or **TextOverflow.Ellipsis**, this attribute must be used with **maxLines**. Otherwise, the setting does not take effect. If **overflow** is set to **TextOverflow.Marquee**, the text scrolls in a line, and therefore **maxLines** does not need to be set.
Since API version 9, this API is supported in ArkTS widgets. |
+| maxLines | number | Maximum number of lines in the text.
Default value: **Infinity**
**NOTE**
By default, text is automatically folded. If this attribute is specified, the text will not exceed the specified number of lines. If there is extra text, you can use **textOverflow** to specify how it is displayed.
Since API version 9, this API is supported in ArkTS widgets.|
| lineHeight | string \| number \| [Resource](ts-types.md#resource) | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.
Since API version 9, this API is supported in ArkTS widgets.|
| decoration | {
type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),
color?: [ResourceColor](ts-types.md#resourcecolor)
} | Style and color of the text decorative line.
Default value: {
type: TextDecorationType.None,
color: Color.Black
}
Since API version 9, this API is supported in ArkTS widgets.|
-| baselineOffset | number \| string | Baseline offset of the text. The default value is **0**.
Since API version 9, this API is supported in ArkTS widgets. |
-| letterSpacing | number \| string | Letter spacing.
Since API version 9, this API is supported in ArkTS widgets. |
-| minFontSize | number \| string \| [Resource](ts-types.md#resource) | Minimum font size.
For the setting to take effect, this attribute must be used together with **maxFontSize**, **maxLines**, or layout constraint settings.
Since API version 9, this API is supported in ArkTS widgets. |
-| maxFontSize | number \| string \| [Resource](ts-types.md#resource) | Maximum font size.
For the setting to take effect, this attribute must be used together with **minFontSize**, **maxLines**, or layout constraint settings.
Since API version 9, this API is supported in ArkTS widgets. |
+| baselineOffset | number \| string | Baseline offset of the text. The default value is **0**.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If this attribute is set to a percentage, the default value is used.|
+| letterSpacing | number \| string | Letter spacing.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If this attribute is set to a percentage, the default value is used.|
+| minFontSize | number \| string \| [Resource](ts-types.md#resource) | Minimum font size.
For the setting to take effect, this attribute must be used together with **maxFontSize**, **maxLines**, or layout constraint settings.
Since API version 9, this API is supported in ArkTS widgets. |
+| maxFontSize | number \| string \| [Resource](ts-types.md#resource) | Maximum font size.
For the setting to take effect, this attribute must be used together with **minFontSize**, **maxLines**, or layout constraint settings.
Since API version 9, this API is supported in ArkTS widgets. |
| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.
Default value: **TextCase.Normal**
Since API version 9, this API is supported in ArkTS widgets.|
| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.
Default value: **CopyOptions.None**
This API is supported in ArkTS widgets.|
| textShadow10+ | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions) | Text shadow.|
| heightAdaptivePolicy10+ | [TextHeightAdaptivePolicy](ts-appendix-enums.md#TextHeightAdaptivePolicy10) | How the adaptive height is determined for the text.|
+| textIndent10+ | number \| string | Indentation of the first line.
Default value: **0**|
> **NOTE**
>
-> The **\** component cannot contain both the text and the child component **\**. If both of them exist, only the content in **\** is displayed.
+> The **\** component cannot contain both the text and the child component **\** or **\**. If both of them exist, only the content in **\** or **\** is displayed.
+
+## Events
+
+The [universal events](ts-universal-events-click.md) are supported.
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md b/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md
index f5acbb698cb3c77954cd8bd51a8e489f3ad2f1d4..191c4839533806a43c41e2c27f500dd10ca18e8d 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md
@@ -6,10 +6,6 @@ The **\** component provides a clickable element in the check box, butto
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-
-
## Child Components
This component can contain child components only when **ToggleType** is set to **Button**.
@@ -39,20 +35,22 @@ Since API version 9, this API is supported in ArkTS widgets.
| Button | Button type. The set string, if any, will be displayed inside the button. |
| Switch | Switch type.
**NOTE**
The default value of the universal attribute [margin](ts-universal-attributes-size.md) is as follows:
{
top: 14 vp,
right:6 vp,
bottom: 6 vp,
left: 14 vp
} |
-
## Attributes
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
+
| Name | Parameter | Description |
| ---------------- | --------------------------- | ---------------------- |
| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the component when it is turned on.
Since API version 9, this API is supported in ArkTS widgets.|
| switchPointColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the circular slider when the component is of the **Switch** type.
**NOTE**
This attribute is valid only when **type** is set to **ToggleType.Switch**.
Since API version 9, this API is supported in ArkTS widgets.|
-
## Events
+In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
+
| Name| Description|
| -------- | -------- |
-| onChange(callback: (isOn: boolean) => void) | Triggered when the toggle status changes.
Since API version 9, this API is supported in ArkTS widgets.|
+| onChange(callback: (isOn: boolean) => void) | Triggered when the toggle status changes.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If **isOn** is **true**, it indicates that the toggle changes from off to on. If **isOn** is **false**, it indicates that the toggle changes from on to off.|
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-container-column.md b/en/application-dev/reference/arkui-ts/ts-container-column.md
index 5f5cf16fe27d23978db2abf3d1ca58c74f926db4..301abecaa18ce5872e41ea1532c54ae45d2cb694 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-column.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-column.md
@@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
-| space | string \| number | No| Vertical spacing between two adjacent child components.
Since API version 9, this parameter does not take effect when it is set to a negative number or **justifyContent** is set to **FlexAlign.SpaceBetween**, **FlexAlign.SpaceAround** or **FlexAlign.SpaceEvenly**.
Default value: **0**|
+| space | string \| number | No| Vertical spacing between two adjacent child components.
Since API version 9, this parameter does not take effect when it is set to a negative number or **justifyContent** is set to **FlexAlign.SpaceBetween**, **FlexAlign.SpaceAround** or **FlexAlign.SpaceEvenly**.
Default value: **0**
**NOTE**
The value can be a number greater than or equal to 0 or a string that can be converted to a number.|
## Attributes
diff --git a/en/application-dev/reference/arkui-ts/ts-container-counter.md b/en/application-dev/reference/arkui-ts/ts-container-counter.md
index 69869ef7610fb7359c194afc45da866d5c96df08..d23e6938ae1328dd127f5dbf2aee5ad559ea1f8c 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-counter.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-counter.md
@@ -18,6 +18,14 @@ Counter()
Since API version 9, this API is supported in ArkTS widgets.
+## Attributes
+
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
+
+| Name | Type | Description |
+| --------------------------- | ---------------------------------------- | ---------------------------------------- |
+| enableInc10+ | boolean | Whether the plus button is enabled.
Default value: **true** |
+| enableDec10+ | boolean | Whether the minus button is enabled.
Default value: **true**|
## Events
diff --git a/en/application-dev/reference/arkui-ts/ts-container-flex.md b/en/application-dev/reference/arkui-ts/ts-container-flex.md
index 8a98f8237eb7656f48eeb5b2eeba442a64b9b4c6..02ac7b49bc3765381b488628266ebbf6599651b0 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-flex.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-flex.md
@@ -5,7 +5,7 @@ The **\** component allows for flexible layout of child components.
> **NOTE**
>
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-> - The **\** component adapts the layout of flex items during rendering. This may affect the performance. Therefore, you are advised to use **[Column](ts-container-column.md)** or **[Row](ts-container-row.md)** instead under scenarios where consistently high performance is required.
+> - The **\** component adapts the layout of flex items during rendering. This may affect the performance. Therefore, you are advised to use **[\](ts-container-column.md)** or **[\](ts-container-row.md)** instead under scenarios where consistently high performance is required.
> - If the main axis of the **\** component is not set, it follows the size of the parent container. On the contrary, if the main axis of the [\](ts-container-column.md) or [\](ts-container-row.md) component is not set, it follows the size of their child component.
@@ -26,11 +26,11 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Mandatory | Default Value | Description |
| -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- |
-| direction | [FlexDirection](ts-appendix-enums.md#flexdirection) | No | FlexDirection.Row | Direction in which child components are arranged in the **\** component, that is, the direction of the main axis. |
-| wrap | [FlexWrap](ts-appendix-enums.md#flexwrap) | No | FlexWrap.NoWrap | Whether the **\** component has a single line or multiple lines. |
-| justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in the **\** component along the main axis. |
-| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign) | No | ItemAlign.Start | Alignment mode of the child components in the **\** component along the cross axis. |
-| alignContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **\** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**. |
+| direction | [FlexDirection](ts-appendix-enums.md#flexdirection) | No | FlexDirection.Row | Direction in which child components are arranged in the **\** component, that is, the direction of the main axis. |
+| wrap | [FlexWrap](ts-appendix-enums.md#flexwrap) | No | FlexWrap.NoWrap | Whether the **\** component has a single line or multiple lines.
**NOTE**
When wrapped onto multiple lines, the child elements on the new line are stacked in the direction based on the cross axis direction.|
+| justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in the **\** component along the main axis. |
+| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign) | No | ItemAlign.Start | Alignment mode of the child components in the **\** component along the cross axis. |
+| alignContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **\** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**.|
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-container-listitem.md b/en/application-dev/reference/arkui-ts/ts-container-listitem.md
index c5bb7c662b007a3cd5b186ecf2c910efef2362ef..97f1d9faf82279e83ed14f7388c6b495fa6e948a 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-listitem.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-listitem.md
@@ -26,8 +26,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| -------- | -------- | -------- |
| sticky(deprecated) | [Sticky](#stickydeprecated) | Sticky effect of the list item.
Default value: **Sticky.None**
This API is deprecated since API version 9. You are advised to use **sticky** of the [\](ts-container-list.md#attributes) component.|
| editable(deprecated) | boolean \| [EditMode](#editmodedeprecated) | Whether to enter editing mode, where the list item can be deleted or moved.
This API is deprecated since API version 9.
Default value: **false**|
-| selectable8+ | boolean | Whether the current list item is selectable by mouse drag.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute takes effect only when mouse frame selection is enabled for the parent **\** container.
Default value: **true**|
-| swipeAction9+ | {
start?: CustomBuilder,
end?:CustomBuilder,
edgeEffect?: [SwipeEdgeEffect](#swipeedgeeffect9),
} | Component displayed when the list item is swiped out from the screen edge.
- **start**: component on the left of the list item when the item is swiped to the right (in vertical list layout) or component above the list item when the item is swiped down (in horizontal list layout).
- **end**: component on the right of the list item when the item is swiped to the left (in vertical list layout) or component below the list item when the item is swiped up (in horizontal list layout).
- **edgeEffect**: scroll effect.
|
+| selectable8+ | boolean | Whether the current list item is selectable by mouse drag.
**NOTE**
This attribute takes effect only when mouse frame selection is enabled for the parent **\** container.
Default value: **true**|
+| swipeAction9+ | {
start?: CustomBuilder,
end?:CustomBuilder,
edgeEffect?: [SwipeEdgeEffect](#swipeedgeeffect9),
} | Component displayed when the list item is swiped out from the screen edge.
- **start**: component on the left of the list item when the item is swiped to the right (in vertical list layout) or component above the list item when the item is swiped down (in horizontal list layout).
- **end**: component on the right of the list item when the item is swiped to the left (in vertical list layout) or component below the list item when the item is swiped up (in horizontal list layout).
- **edgeEffect**: scroll effect.
**NOTE**
The top level of the **@builder** function corresponding to **start** and **end** must be a single component and cannot be an **if/else**, **ForEach**, or **LazyForEach** statement.|
## Sticky(deprecated)
This API is deprecated since API version 9. You are advised to use [stickyStyle](ts-container-list.md#stickystyle9) of the **\** component.
@@ -55,7 +55,7 @@ This API is deprecated since API version 9.
| Name| Description|
| -------- | -------- |
-| onSelect(event: (isSelected: boolean) => void)8+ | Triggered when the selected state of the **\** changes.
**isSelected**: Returns **true** if the **\** is selected by mouse drag; returns **false** otherwise.
Since API version 9, this API is supported in ArkTS widgets.|
+| onSelect(event: (isSelected: boolean) => void)8+ | Triggered when the selected state of the **\** changes.
**isSelected**: Returns **true** if the **\** is selected by mouse drag; returns **false** otherwise.|
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md b/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md
index 978b93088cdb7c6eb729204b0b16d89af2066be5..f0aab291ecf652bba774dcdaa7c567081dea69a6 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md
@@ -35,6 +35,14 @@ ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?:
| -------- | -------- | -------- |
| divider | {
strokeWidth: [Length](ts-types.md#length),
color?: [ResourceColor](ts-types.md#resourcecolor),
startMargin?: [Length](ts-types.md#length),
endMargin?: [Length](ts-types.md#length)
} \| null | Style of the divider for the list items. By default, there is no divider.
- **strokeWidth**: stroke width of the divider.
- **color**: color of the divider.
- **startMargin**: distance between the divider and the start of the list.
- **endMargin**: distance between the divider and the end of the list.|
+> **NOTE**
+>
+> The **\** component does not support the universal attribute **[aspectRatio](ts-universal-attributes-layout-constraints.md)**.
+>
+> If the main axis of **\** runs in the vertical direction, the [height](ts-universal-attributes-size.md) setting does not take effect.
+>
+> If the main axis of **\** runs in the horizontal direction, the [width](ts-universal-attributes-size.md) setting does not take effect.
+
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-container-row.md b/en/application-dev/reference/arkui-ts/ts-container-row.md
index 606759b76c1d63dda9ebabcfffaeec5f11f833c7..97e5ae02ee83a0c0f8b6e0345ea77a64fc3dce81 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-row.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-row.md
@@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
-| space | string \| number | No| Horizontal spacing between two adjacent child components.
Since API version 9, this parameter does not take effect when it is set to a negative number or **justifyContent** is set to **FlexAlign.SpaceBetween**, **FlexAlign.SpaceAround** or **FlexAlign.SpaceEvenly**.
Default value: **0**, in vp|
+| space | string \| number | No| Horizontal spacing between two adjacent child components.
Since API version 9, this parameter does not take effect when it is set to a negative number or **justifyContent** is set to **FlexAlign.SpaceBetween**, **FlexAlign.SpaceAround** or **FlexAlign.SpaceEvenly**.
Default value: **0**, in vp
**NOTE**
The value can be a number greater than or equal to 0 or a string that can be converted to a number.|
## Attributes
diff --git a/en/application-dev/reference/arkui-ts/ts-container-stack.md b/en/application-dev/reference/arkui-ts/ts-container-stack.md
index 766e63854217ff91b3ed49748d60b72ff490fee8..0bfa204dd223123bd5a1ef98cfc45eb1136b42b8 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-stack.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-stack.md
@@ -28,9 +28,9 @@ Since API version 9, this API is supported in ArkTS widgets.
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
-| Name | Type | Description |
-| ------------ | ------------------------------------------- | ------------------------------ |
-| alignContent | [Alignment](ts-appendix-enums.md#alignment) | Alignment of child components in the container.
Default value: **Alignment.Center**
Since API version 9, this API is supported in ArkTS widgets.|
+| Name | Type | Description |
+| ------------ | ------------------------------------------- | ------------------------------------------------------------ |
+| alignContent | [Alignment](ts-appendix-enums.md#alignment) | Alignment of child components in the container.
Default value: **Alignment.Center**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
When this attribute and the universal attribute [align](ts-universal-attributes-location.md) are both set, only the **align** setting takes effect.|
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md b/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md
index 190118b6a7f136146d6a7d3e5853255439920d43..677690cdc8d8b6d05c2e7927f205a9569942f217 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md
@@ -103,11 +103,11 @@ The following attributes are supported.
| Name | Type | Mandatory| Description |
| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| overflow | [TextOverflow](ts-appendix-enums.md#textoverflow) | No | Display mode when the label text is too long. By default, an ellipsis (...) is used to represent text overflow.|
-| maxLines | number | No | Maximum number of lines in the label text. By default, text is automatically folded. If this attribute is specified, the text will not exceed the specified number of lines. If there is extra text, you can use **textOverflow** to specify how it is displayed.|
-| minFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | No | Minimum font size of the label text. For the setting to take effect, this attribute must be used together with **maxFontSize**, **maxLines**, or layout constraint settings.|
-| maxFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | No | Maximum font size of the label text. For the setting to take effect, this attribute must be used together with **minFontSize**, **maxLines**, or layout constraint settings.|
-| heightAdaptivePolicy | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | No | How the adaptive height is determined for the label text. |
-| font | [Font](ts-types.md#font) | No | Font of the label text. |
+| maxLines | number | No | Maximum number of lines in the label text. If this attribute is specified, the text will not exceed the specified number of lines. You can use **textOverflow** to specify how to represent text overflow. Default value: **1**|
+| minFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | No | Minimum font size of the label text. For the setting to take effect, this attribute must be used together with **maxFontSize**, **maxLines**, or layout constraint settings. When the adaptive text size is set, **font.size** does not take effect. Default value: **0.0fp**|
+| maxFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | No | Maximum font size of the label text. For the setting to take effect, this attribute must be used together with **minFontSize**, **maxLines**, or layout constraint settings. When the adaptive text size is set, **font.size** does not take effect. Default value: **0.0fp**|
+| heightAdaptivePolicy | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | No | How the adaptive height is determined for the label text. By default, the **maxLines** settings are prioritized. |
+| font | [Font](ts-types.md#font) | No | Font of the label text. By default, the font size is 16.0fp, the font type is HarmonyOS Sans, the font style is normal, and the font weight is normal. |
## BottomTabBarStyle9+
@@ -399,4 +399,3 @@ struct TabBarStyleExample {
```
-
\ No newline at end of file
diff --git a/en/application-dev/reference/arkui-ts/ts-container-tabs.md b/en/application-dev/reference/arkui-ts/ts-container-tabs.md
index db9325e998325495db17eb915dbd888f834c4ecc..e33252888cc0e8c2a5cffebab76b519e6b20e824 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-tabs.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-tabs.md
@@ -21,7 +21,7 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr
| Name | Type | Mandatory | Description |
| ----------- | --------------------------------- | ---- | ---------------------------------------- |
| barPosition | BarPosition | No | Position of the **\** component.
Default value: **BarPosition.Start** |
-| index | number | No | Initial tab index.
Default value: **0**
**NOTE**
A value less than 0 evaluates to the default value.
The value ranges from 0 to the number of **\** subnodes minus 1.
When this parameter is set to different values, the slide animation for tab switching is enabled by default. To disable the animation, set **animationDuration** to **0**.|
+| index | number | No | Initial tab index.
Default value: **0**
**NOTE**
A value less than 0 evaluates to the default value.
The value ranges from 0 to the number of **\** subnodes minus 1.
When this parameter is set to different values, the slide animation for tab switching is enabled by default. To disable the animation, set **animationDuration** to **0**. |
| controller | [TabsController](#tabscontroller) | No | Tab controller. |
## BarPosition
@@ -43,9 +43,9 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| barMode | BarMode | Tab bar layout mode. For details, see **BarMode**.
Default value: **BarMode.Fixed**|
| barWidth | number \| Length8+ | Width of the tab bar.
**NOTE**
A value less than 0 or greater than the width of the **\** component evaluates to the default value.|
| barHeight | number \| Length8+ | Height of the tab bar.
**NOTE**
A value less than 0 or greater than the width of the **\** component evaluates to the default value.|
-| animationDuration | number | Duration of the slide animation for tab switching. If this parameter is set, the tab switching animation is played when the user switches between tabs by sliding or clicking. If this parameter is not set, the tab switching animation is played only when the user switches between tabs by sliding.
Default value: **300**
**NOTE**
A value less than 0 or in percentage evaluates to the default value. |
+| animationDuration | number | Duration of the slide animation for tab switching. If this parameter is set, the tab switching animation is played when the user switches between tabs by sliding or clicking. If this parameter is not set, the tab switching animation is played only when the user switches between tabs by sliding.
Default value: **300**
**NOTE**
A value less than 0 or in percentage evaluates to the default value.|
| divider10+ | [DividerStyle](#dividerstyle10) \| null | Whether the divider is displayed for the **\** and **\** components and the divider style. By default, the divider is not displayed.
**DividerStyle**: divider style.
**null**: The divider is not displayed.|
-| FadingEdge10+ | boolean | Whether the tab fades out when it exceeds the container width.
Default value: **true** |
+| fadingEdge10+ | boolean | Whether the tab fades out when it exceeds the container width.
Default value: **true** |
## DividerStyle10+
@@ -67,9 +67,9 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
-| Name | Description |
-| ------------------------------------------- | ------------------------------------------------------------ |
-| onChange(event: (index: number) => void) | Triggered when a tab is switched.
- **index**: index of the active tab. The index starts from 0.
This event is triggered when any of the following conditions is met:
1. The **\** component supports sliding, and the user slides on the tab bar.
2. The [Controller](#tabscontroller) API is called.
3. The attribute value is updated using a [state variable](../../quick-start/arkts-state.md).
4. A tab is clicked. |
+| Name | Description |
+| ---------------------------------------- | ---------------------------------------- |
+| onChange(event: (index: number) => void) | Triggered when a tab is switched.
- **index**: index of the active tab. The index starts from 0.
This event is triggered when any of the following conditions is met:
1. The **\** component supports sliding, and the user slides on the tab bar.
2. The [Controller](#tabscontroller) API is called.
3. The attribute value is updated using a [state variable](../../quick-start/arkts-state.md).
4. A tab is clicked.|
## TabsController
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
index 63adc44dc9489b233c92d96176a7cf1d6e9eb520..ef361829897dcbf29396cb14d654051bea2f41c6 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
@@ -18,7 +18,7 @@ The size attributes set the width, height, and margin of a component.
| padding | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | Padding of the component.
When the parameter is of the **Length** type, the four paddings take effect.
Default value: **0**
When **padding** is set to a percentage, the width of the parent container is used as the basic value.
Since API version 9, this API is supported in ArkTS widgets.|
| margin | [Margin](ts-types.md#margin) \| [Length](ts-types.md#length) | Margin of the component.
When the parameter is of the **Length** type, the four margins take effect.
Default value: **0**
When **margin** is set to a percentage, the width of the parent container is used as the basic value.
Since API version 9, this API is supported in ArkTS widgets.|
| constraintSize | {
minWidth?: [Length](ts-types.md#length),
maxWidth?: [Length](ts-types.md#length),
minHeight?: [Length](ts-types.md#length),
maxHeight?: [Length](ts-types.md#length)
} | Constraint size of the component, which is used to limit the size range during component layout. **constraintSize** takes precedence over **width** and **height**. If the value of **minWidth** is greater than that of **maxWidth**, only the value of **minWidth** takes effect. The same rule applies to **minHeight** and **maxHeight**.
Default value:
{
minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity
}
Since API version 9, this API is supported in ArkTS widgets.|
-| layoutWeight | number \| string | Weight of the component during layout. When the container size is determined, the container space is allocated along the main axis among the component and sibling components based on the layout weight, and the component size setting is ignored.
**NOTE**
This attribute is valid only for the **\**, **\**, and **\** layouts.
Since API version 9, this API is supported in ArkTS widgets.|
+| layoutWeight | number \| string | Weight of the component during layout. When the container size is determined, the container space is allocated along the main axis among the component and sibling components based on the layout weight, and the component size setting is ignored.
Default value: **0**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This attribute is valid only for the **\**, **\**, and **\** layouts.
The value can be a number greater than or equal to 0 or a string that can be converted to a number.|
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md b/en/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
index 64ff5cd450da4f88e462bdf3f6e80858adcda14e..3bdc9a96c4a4960cba8418ab6a6d02f693f29bb3 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
@@ -45,6 +45,113 @@ A drag event is triggered when a component is dragged.
## Example
+### Example 1
+
+```ts
+@Observed
+class ClassA {
+ public name: string
+ public bol: boolean
+
+ constructor(name: string, bol: boolean) {
+ this.name = name
+ this.bol = bol
+ }
+}
+
+@Extend(Text) function textStyle() {
+ .width('25%')
+ .height(35)
+ .fontSize(16)
+ .textAlign(TextAlign.Center)
+ .backgroundColor(0xAFEEEE)
+}
+
+@Entry
+@Component
+struct DragExample {
+ @State arr: ClassA[] = [new ClassA('A', true), new ClassA('B', true), new ClassA('C', true)]
+ @State dragIndex: number = 0
+
+ changeIndex(index1: number, index2: number) {// Exchange the array position.
+ [this.arr[index1], this.arr[index2]] = [this.arr[index2], this.arr[index1]];
+ }
+
+ build() {
+ Column() {
+ Row({ space: 15 }) {
+ List({ space: 20 }) {
+ ForEach(this.arr, (item, index) => {
+ ListItem() {
+ Column() {
+ Child({ a: this.arr[index] })
+ }
+ .onTouch((event: TouchEvent) => {
+ if (event.type === TouchType.Down) {
+ this.dragIndex = index // Obtain the index of the current dragged child component.
+ console.info('onTouch' + this.dragIndex)
+ }
+ })
+ }
+ })
+ }
+ .listDirection(Axis.Horizontal)
+ .onDrop((event: DragEvent, extraParams: string) => { // The component bound to this event can be used as the drop target. When the dragging stops within the component scope, the callback is triggered.
+ let jsonString = JSON.parse(extraParams);
+ this.changeIndex(this.dragIndex, jsonString.insertIndex)
+ })
+ }.padding({ top: 10, bottom: 10 }).margin(10)
+
+ }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 })
+ }
+}
+
+@Component
+struct Child {
+ @ObjectLink a: ClassA
+
+ @Builder pixelMapBuilder() {
+ Column() {
+ Text(this.a.name)
+ .width('50%')
+ .height(60)
+ .fontSize(16)
+ .borderRadius(10)
+ .textAlign(TextAlign.Center)
+ .backgroundColor(Color.Yellow)
+ }
+ }
+
+ build() {
+ Column() {
+ Text(this.a.name)
+ .textStyle()
+ .visibility(this.a.bol ? Visibility.Visible : Visibility.None)
+ .onDragStart(() => { // The callback is triggered when the component bound to this event is dragged for the first time.
+ this.a.bol = false // Control the visibility.
+ return this.pixelMapBuilder() // Set the image displayed during dragging.
+ })
+ .onTouch((event: TouchEvent) => {
+ if (event.type === TouchType.Up) {
+ this.a.bol = true
+ }
+ })
+ Text('')
+ .width('25%')
+ .height(35)
+ .fontSize(16)
+ .textAlign(TextAlign.Center)
+ .border({ width: 5, color: 'red' })
+ .visibility(!this.a.bol ? Visibility.Visible : Visibility.None)
+ }
+ }
+}
+```
+
+
+
+### Example 2
+
```ts
// xxx.ets
@Extend(Text) function textStyle () {