@@ -6,20 +6,20 @@ Components support dynamic rotation, translation, and scaling effects. These eff
>
> The initial APIs of this component are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
| transform-origin | string<sup>6+</sup>\|\<percentage> \|\<length> string<sup>6+</sup>\|\<percentage> \|\<length> | center center | Origin position of the transformed element. The unit can be px or a percentage (relative to the animation target component). If only one value is specified, the other one is **50%**. The available values for the first string are **left**, **center**, and **right**. The available values for the second string are **top**, **center**, and **bottom**.<br>Example:<br/>transform-origin: 200px 30%<br/>transform-origin: 100px topt<br/>ransform-origin: center center |
| transform | string | - | Translation, rotation, and scaling attributes.<br/>For details, see **transform**. |
| animation<sup>6+</sup> | string | 0s ease 0s 1 normal none running none | Animation attributes in the format of **duration \| timing-function \| delay \| iteration-count \| direction \| fill-mode \| play-state \| name**. The order of the parameters is not specified, but the **duration** and **delay** parameters are parsed based on where they are placed. |
| animation-name | string | - | @keyframes rule. For details, see **@keyframes**. |
| animation-delay | \<time> | 0 | Delay for playing the animation, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms. |
| animation-duration | \<time> | 0 | Animation duration, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms.<br/>NOTE:<br/>**animation-duration** must be specified. Otherwise, the duration is **0**, which means the animation will not be played. |
| animation-iteration-count | number \| infinite | 1 | Number of times that an animation is played. The animation is played once by default. You can set the value to **infinite** to play the animation infinitely. |
| animation-timing-function | string | ease | Speed curve of an animation, which makes the animation more fluent.Available values are as follows: <br>- **linear**: The animation speed keeps unchanged. <br>- **ease**: The animation starts at a low speed and then accelerates. It slows down before the animation ends. **cubic-bezier(0.25, 0.1, 0.25, 1.0)**<br>- **ease-in**: The animation starts at a low speed. **cubic-bezier(0.42, 0.0, 1.0, 1.0)**<br>- **ease-out**: The animation ends at a low speed. **cubic-bezier(0.0, 0.0, 0.58, 1.0)**<br>- **ease-in-out**: The animation starts and ends at a low speed. **cubic-bezier(0.42, 0.0, 0.58, 1.0)****<br>- **friction**: Damping curve, **cubic-bezier(0.2, 0.0, 0.2, 1.0)****<br>- **extreme-deceleration**: Extreme deceleration curve, **cubic-bezier(0.0, 0.0, 0.0, 1.0) curve****<br>- **sharp**: Sharp curve, **cubic-bezier(0.33, 0.0, 0.67, 1.0)****<br>- **rhythm**: Rhythm curve, **cubic-bezier(0.7, 0.0, 0.2, 1.0)****<br>- **smooth**: Smooth curve, **cubic-bezier(0.4, 0.0, 0.4, 1.0)****<br>- **cubic-bezier**: You can customize an animation speed curve in the **cubic-bezier()** function. The x and y values of each input parameter must be between 0 and 1.<br>- steps: step curve <sup>6+</sup>. Syntax: steps(number[, end\|start]); The number parameter is mandatory. The value must be a positive integer. The second parameter is optional. It indicates that the start point or end point of each interval changes step by step. The value can be end or start. The default value is end. |
| animation-direction<sup>6+</sup> | string | normal | Mode of playing the animation. <br>- **normal**: Plays the animation in forward loop mode. <br>- **reverse**: Plays the animation in reverse loop mode. <br>- **alternate**: Plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in backward direction. <br>- **alternate-reverse**: Plays the animation in reverse-alternating loop mode. When the animation is played for an odd number of times, the playback is in backward direction. When the animation is played for an even number of times, the playback is in forward direction. |
| animation-fill-mode | string | none | Start and end styles of the animation <br>- **none**: No style is applied to the target before or after the animation is executed. <br>- **forwards**: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed. <br>- **backwards**<sup>6+</sup>: The animation uses the value defined in the first key frame during the **animation-delay**. When **animation-direction** is set to **normal** or **alternate**, the value in the **from** key frame is used. When **animation-direction** is set to **reverse** or **alternate-reverse**, the value in the **to** key frame is used.. <br>- **both**<sup>6+</sup>: The animation follows the **forwards** and **backwards** rules. |
| animation-play-state<sup>6+</sup> | string | running | Current state of the animation. <br>- **paused**: paused <br>- **running**: playing |
| transition<sup>6+</sup> | string | all 0 ease 0 | Transition effect when the component status is switched. The following four attributes can be set through the **transition** attribute.<br>- **transition-property**: name of the CSS property for setting the transition effect. Currently, the width, height, and background color are supported. <br>- **transition-duration**: duration required for completing the transition effect, in seconds. <br>- **transition-timing-function**: time curve of the transition effect. The curve provided by the style animation is supported. <br>- **transition-delay**: delay for starting the transition effect, in seconds. |
| transform-origin | string<sup>6+</sup>\|\<percentage> \|\<length> string<sup>6+</sup>\|\<percentage> \|\<length> | Origin position of the transformed element. The unit can be px or a percentage (relative to the animation target component). If only one value is specified, the other one is **50%**. The available values for the first string are **left**, **center**, and **right**. The available values for the second string are **top**, **center**, and **bottom**.<br>Example:<br/>transform-origin: 200px 30%<br/>transform-origin: 100px topt<br/>ransform-origin: center center<br/>Default value: **center center** |
| transform | string | Translation, rotation, and scaling attributes.<br/>For details, see **transform**. |
| animation<sup>6+</sup> | string | Animation attributes in the format of **duration \| timing-function \| delay \| iteration-count \| direction \| fill-mode \| play-state \| name**. The order of the parameters is not specified, but the **duration** and **delay** parameters are parsed based on where they are placed.<br/>Default value: 0s ease 0s 1 normal none running none |
| animation-name | string | @keyframes rule. For details, see **@keyframes**. |
| animation-delay | \<time> | Delay for playing the animation, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms.<br/>Default value: 0 |
| animation-duration | \<time> | Animation duration, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms.<br/>**NOTE**<br/>**animation-duration** must be specified. Otherwise, the duration is **0**, which means the animation will not be played.<br/>Default value: **0** |
| animation-iteration-count | number \| infinite | Number of times that an animation is played. The animation is played once by default. You can set the value to **infinite** to play the animation infinitely.<br/>Default value: **1** |
| animation-timing-function | string | Speed curve of an animation, which makes the animation more fluent.Available values are as follows: <br>- **linear**: The animation speed keeps unchanged. <br>- **ease**: The animation starts slowly, accelerates, and then slows down towards the end. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used.<br>- **ease-in**: The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used.<br>- **ease-out**: The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.<br>- **ease-in-out**: The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.<br>- **friction**: The animation uses the friction cubic-bezier curve (0.2, 0.0, 0.2, 1.0).<br>- **extreme-deceleration**: The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0).<br>- **sharp**: The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0).<br>- **rhythm**: The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0).<br>- **smooth**: The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0).<br>- **cubic-bezier**: You can customize an animation speed curve in the **cubic-bezier()** function. The x and y values of each input parameter must be between 0 and 1.<br>- **steps**: The animation uses the step curve<sup>6+</sup>. The syntax is as follows: steps(number[, end\|start]), where the first parameter **number** is mandatory and must be a positive integer; the second parameter is optional and indicates that the start point or end point (default) of each interval changes step by step.<br/>Default value: **ease** |
| animation-direction<sup>6+</sup> | string | Mode of playing the animation. <br>- **normal**: Plays the animation in forward loop mode. <br>- **reverse**: Plays the animation in reverse loop mode. <br>- **alternate**: Plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in backward direction. <br>- **alternate-reverse**: Plays the animation in reverse-alternating loop mode. When the animation is played for an odd number of times, the playback is in backward direction. When the animation is played for an even number of times, the playback is in forward direction.<br/>Default value: **normal** |
| animation-fill-mode | string | Start and end styles of the animation <br>- **none**: No style is applied to the target before or after the animation is executed. <br>- **forwards**: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed. <br>- **backwards**<sup>6+</sup>: The animation uses the value defined in the first key frame during the **animation-delay**. When **animation-direction** is set to **normal** or **alternate**, the value in the **from** key frame is used. When **animation-direction** is set to **reverse** or **alternate-reverse**, the value in the **to** key frame is used.. <br>- **both**<sup>6+</sup>: The animation follows the **forwards** and **backwards** rules.<br/>Default value: none |
| animation-play-state<sup>6+</sup> | string | Current state of the animation. <br>- **paused**: paused <br>- **running**: playing<br/>Default value: **running** |
| transition<sup>6+</sup> | string | Transition effect when the component status is switched. The following four attributes can be set through the **transition** attribute.<br>- **transition-property**: name of the CSS property for setting the transition effect. Currently, the width, height, and background color are supported. <br>- **transition-duration**: duration required for completing the transition effect, in seconds. <br>- **transition-timing-function**: time curve of the transition effect. The curve provided by the style animation is supported. <br>- **transition-delay**: delay for starting the transition effect, in seconds.<br/>Default value: **all 0 ease 0** |
The **<stepper\>** component provides a step navigator. When multiple steps are required to complete a task, you can use the **<stepper\>** component to navigate your users through the whole process.
The **\<stepper>** component provides a step navigator. When multiple steps are required to complete a task, you can use the **\<stepper>** component to navigate your users through the whole process.
<tdclass="cellrowborder"valign="top"width="38.67%"headers="mcps1.1.5.1.4 "><pid="p7174328203414"><aname="p7174328203414"></a><aname="p7174328203414"></a>Index of the <strongid="b1432325813342"><aname="b1432325813342"></a><aname="b1432325813342"></a><stepper-item></strong> child component that is currently displayed.</p>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section72591594253"></a>
Styles in [Universal Styles](js-components-common-styles.md) are supported.
>By default, the **<stepper\>** component fills entire space of its container. To optimize user experience, it is recommended that the container should be as large as the application window in size, or should be the root component.
## Events<a name="section69611614182911"></a>
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
<tdclass="cellrowborder"valign="top"width="47.6047604760476%"headers="mcps1.1.4.1.3 "><pid="p7906113531711"><aname="p7906113531711"></a><aname="p7906113531711"></a>Triggered when the last step on the navigator is complete.</p>
<tdclass="cellrowborder"valign="top"width="47.6047604760476%"headers="mcps1.1.4.1.3 "><pid="p1342113381171"><aname="p1342113381171"></a><aname="p1342113381171"></a>Triggered when users click the skip button, which works only if you have called <strongid="b494641310465"><aname="b494641310465"></a><aname="b494641310465"></a>setNextButtonStatus</strong> method to allow users to skip all steps.</p>
<tdclass="cellrowborder"valign="top"width="47.6047604760476%"headers="mcps1.1.4.1.3 "><pid="p113602034189"><aname="p113602034189"></a><aname="p113602034189"></a>Triggered when users click the left or right (text) button of the step navigator to switch between steps. <strongid="b108361233105012"><aname="b108361233105012"></a><aname="b108361233105012"></a>prevIndex</strong> indicates the index of the previous step, and <strongid="b1014617216510"><aname="b1014617216510"></a><aname="b1014617216510"></a>index</strong> indicates that of the current step.</p>
<tdclass="cellrowborder"valign="top"width="47.6047604760476%"headers="mcps1.1.4.1.3 "><pid="p18140235202411"><aname="p18140235202411"></a><aname="p18140235202411"></a>Triggered when users click the next (text) button. <strongid="b155446175519"><aname="b155446175519"></a><aname="b155446175519"></a>index</strong> indicates the index of the current step, and <strongid="b16471726587"><aname="b16471726587"></a><aname="b16471726587"></a>pendingIndex</strong> indicates that of the step to go. The return value is in <strongid="b20759101845911"><aname="b20759101845911"></a><aname="b20759101845911"></a>{pendingIndex:</strong><emid="i13961625125919"><aname="i13961625125919"></a><aname="i13961625125919"></a> pendingIndex</em><strongid="b1882982055918"><aname="b1882982055918"></a><aname="b1882982055918"></a>}</strong> format. You can use <strongid="b79512405598"><aname="b79512405598"></a><aname="b79512405598"></a>pendingIndex</strong> to specify a <strongid="b1235062917016"><aname="b1235062917016"></a><aname="b1235062917016"></a><stepper-item></strong> child component as the next step to go.</p>
<tdclass="cellrowborder"valign="top"width="47.6047604760476%"headers="mcps1.1.4.1.3 "><pid="p714261895119"><aname="p714261895119"></a><aname="p714261895119"></a>Triggered when users click the previous (text) button. <strongid="b1620921210312"><aname="b1620921210312"></a><aname="b1620921210312"></a>index</strong> indicates the index of the current step, and <strongid="b1621511211318"><aname="b1621511211318"></a><aname="b1621511211318"></a>pendingIndex</strong> indicates that of the step to go. The return value is in Object:{ <strongid="b102171121532"><aname="b102171121532"></a><aname="b102171121532"></a>{pendingIndex:</strong><emid="i42187121636"><aname="i42187121636"></a><aname="i42187121636"></a> pendingIndex</em><strongid="b1622051211313"><aname="b1622051211313"></a><aname="b1622051211313"></a>}</strong> format. You can use <strongid="b822118128316"><aname="b822118128316"></a><aname="b822118128316"></a>pendingIndex</strong> to specify a <strongid="b192236121235"><aname="b192236121235"></a><aname="b192236121235"></a><stepper-item></strong> child component as the previous step.</p>
</td>
</tr>
</tbody>
</table>
## Methods<a name="section1954212182148"></a>
In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported.
<tdclass="cellrowborder"valign="top"width="56.33563356335634%"headers="mcps1.1.4.1.3 "><pid="p12794143917141"><aname="p12794143917141"></a><aname="p12794143917141"></a>Sets the status of the next (text) button in this step navigator. Available <strongid="b29094326514"><aname="b29094326514"></a><aname="b29094326514"></a>status</strong> values are as follows:</p>
<aname="ol12242138121713"></a><aname="ol12242138121713"></a><olid="ol12242138121713"><li><strongid="b1032161115214"><aname="b1032161115214"></a><aname="b1032161115214"></a>normal</strong>: The next button is displayed normally and can navigate users to the next step when it is clicked.</li><li><strongid="b1661325920517"><aname="b1661325920517"></a><aname="b1661325920517"></a>disabled</strong>: The next button is grayed out and unavailable.</li><li><strongid="b873175710711"><aname="b873175710711"></a><aname="b873175710711"></a>waiting</strong>: The next button is not displayed, and a process bar is displayed instead.</li><li><strongid="b1990819331594"><aname="b1990819331594"></a><aname="b1990819331594"></a>skip</strong>: The skip button is displayed to allow users to skip all remaining steps.</li></ol>
</td>
</tr>
</tbody>
</table>
## Example<a name="section15374183712313"></a>
```
## Child Components
Only the **\<stepper-item>** component is supported.
> **NOTE**
>
> Steps in the **\<stepper>** are sorted according to the sequence of its **\<stepper-item>** child components.
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| index | number | - | Index of the **<stepper-item>** child component that is currently displayed.|
## Styles
The [universal styles](../arkui-js/js-components-common-styles.md) are supported.
> **NOTE**
>
> By default, the **\<stepper>** component fills entire space of its container. To optimize user experience, it is recommended that the container should be as large as the application window in size, or should be the root component.
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| finish | - | Triggered when the last step on the navigator is complete. |
| skip | - | Triggered when users click the skip button, which works only if you have called **setNextButtonStatus** method to allow users to skip all 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 **<stepper-item>** 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 **<stepper-item>** child component as the previous step.|
## Methods
In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
| setNextButtonStatus | { status: string, label: label } | Sets the status of the next (text) button in this step navigator. Available **status** values are as follows:<br>- **normal**: The next button is displayed normally and can navigate users to the next step when it is clicked.<br>- **disabled**: The next button is grayed out and unavailable.<br>- **waiting**: The next button is not displayed, and a process bar is displayed instead.<br>- **skip**: The skip button is displayed to allow users to skip all remaining steps.|
Poor-performing code may work, but will take away from your application performance. This topic presents a line-up of recommendations that you can take to improve your implementation, thereby avoiding possible performance drop.
## Lazy Loading
When developing a long list, use of loop rendering, as in the code snippet below, can greatly slow down page loading and increase server load.
```ts
@Entry
@Component
structMyComponent{
@Statearr:number[]=Array.from(Array(100),(v,k)=>k);// Construct an array of 0 to 99.
build(){
List(){
ForEach(this.arr,(item:number)=>{
ListItem(){
Text(`item value: ${item}`)
}
},(item:number)=>item.toString())
}
}
}
```
The preceding code snippet loads all of the 100 list elements at a time during page loading. This is generally not desirable. Instead, what we need is to load data from the data source and create corresponding components on demand. This can be achieved through lazy loading. The sample code is as follows:
The preceding code initializes only three list elements during page loading and loads a new list item each time a list element is clicked.
## Prioritizing Conditional Rendering over Visibility Control
Use of the visibility attribute to hide or show a component, as in the code snippet below, results in re-creation of the component, leading to performance drop.
By default, the flex container needs to re-lay out flex items to comply with the **flexShrink** and **flexGrow** settings. This may result in drop in rendering performance.
## Setting Width and Height for \<List> Components
When a **\<List>** component is nested within a **\<Scroll>** component, all of its content will be loaded if its width and height is not specified, which may result in performance drop.
To minimize white blocks durign swiping, expand the UI loading range by increasing the value of **cachedCount** for the **\<List>** and **\<Grid>** components. **cachedCount** indicates the number of list or grid items preloaded outside of the screen.
If an item needs to request an online image, set **cachedCount** as appropriate so that the the image is downloaded in advance before the item comes into view on the screen, thereby reducing the number of white blocks.
The following is an example of using **cachedCount**:
```ts
@Entry
@Component
structMyComponent{
privatesource:MyDataSource=newMyDataSource();
build(){
List(){
LazyForEach(this.source,item=>{
ListItem(){
Text("Hello"+item)
.fontSize(100)
.onAppear(()=>{
console.log("appear:"+item)
})
}
})
}.cachedCount(3)// Increase the value to enlarge the range of logs that appear.
A greater **cachedCount** value may result in higher CPU and memory overhead of the UI. Adjust the value by taking into account both the comprehensive performance and user experience.
| size | number | No | Font size. If the value is of the number type, the unit fp is used. |
| weight | number | No | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.|
| family | [FontWeight](../reference/arkui-ts/ts-appendix-enums.md#fontweight)\| number \| string | No | Font family of the text. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, sans-serif'**.|
| style | string \| Resource | No | Font style. |
## Area<sup>8+</sup>
The **Area** type is used to describe the area information of the target element.
| constructor | number[] | Yes | Constructor for creating a color filter with a 4\*5 matrix. The input parameter is [m*n], which is the matrix value in row m and column n. The matrix is row-first. |
## CustomBuilder<sup>8+</sup>
The **CustomBuilder** type is used to define custom UI descriptions in component attribute methods.
| CustomBuilder | () => any | Builder of component attribute methods for defining custom UI descriptions. This type of method must be decorated by **@Builder**. For details, see [@Builder](ts-component-based-builder.md).|
When multiple steps are required to complete a task, you can use the **<stepper>** component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md).
When multiple steps are required to complete a task, you can use the **<stepper>** component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md).
> **NOTE**
...
...
@@ -9,9 +8,9 @@ When multiple steps are required to complete a task, you can use the **<stepp
> This component is supported since API version 5.
## Creating a <stepper> Component
## Creating a \<stepper> Component
Create a **<stepper>** component in the .hml file under **pages/index**.
Create a **\<stepper>** component in the .hml file under **pages/index**.
Set the **label** attribute to customize the button text for the **<stepper-item>**.
Set the **label** attribute to customize the label for the **\<stepper-item>**.
```html
<!-- xxx.hml -->
...
...
@@ -149,8 +148,7 @@ export default {
## Setting Styles
By default, the **<stepper>** component fills entire space of its container. The sample code below shows how to set the border and background color using the **border** and **background-color** attributes.
By default, the **\<stepper>** component fills entire space of its container. The sample code below shows how to set the border and background color using the **border** and **background-color** attributes.
```html
<!-- xxx.hml -->
<divclass="container">
...
...
@@ -194,7 +192,7 @@ text{
## Adding Events
The **<stepper>** component supports the **finish**, **change**, **next**, **back**, and **skip** events.
The **\<stepper>** component supports the **finish**, **change**, **next**, **back**, and **skip** events.
- When the **change** and **next** or **back** events exist at the same time, the **next** or **back** event is executed before the **change** event.
...
...
@@ -271,12 +269,14 @@ export default {
stepperChange(e){
console.log("stepperChange"+e.index)
prompt.showToast({
// index indicates the sequence number of the current step.
Select the options displayed on the page. Your selection will be shown in real time. Click the next button to dynamically change the font color and font size on the page.
In this example, you can select the options displayed on the page and see how your selection takes effect in real time. Clicking the next button will dynamically change the font color and font size of the selected option.
Use the <stepper> component to navigate through the steps. Create a [<toggle>](../reference/arkui-js/js-components-basic-toggle.md) component to implement the functions of selection and displaying the selection result. Then use the [<select>](../reference/arkui-js/js-components-basic-select.md) component to dynamically change the font color or size of the selected options.
Use a **\<stepper>** component to navigate through the steps. Create a **\<Toggle>**(../reference/arkui-js/js-components-basic-toggle.md) component to implement the functions of selecting an option and displaying the selection result. Then use the **\<Select>**(../reference/arkui-js/js-components-basic-select.md) component to dynamically change the font color or size of the selected option.
