ts-basic-components-stepperitem.md 2.0 KB
Newer Older
Z
zengyawen 已提交
1 2
# StepperItem

E
ester.zhou 已提交
3
The **\<StepperItem>** component provides an element for the **\<Stepper>** component.
Z
zengyawen 已提交
4 5


E
ester.zhou 已提交
6 7 8
>  **NOTE**
>
>  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
Z
zengyawen 已提交
9 10 11 12 13 14 15 16 17 18 19 20 21 22


## Child Components

This component supports only one child component.


## APIs

StepperItem()


## Attributes

E
ester.zhou 已提交
23 24
| Name| Type| Description|
| -------- | -------- | -------- |
25
| prevLabel | string | Text label of the button on the left, which is not displayed on the first page. When the **\<Stepper>** contains more than one page, the default value for all pages except the first page is **Back**.|
E
ester.zhou 已提交
26
| nextLabel | string | Text label of the button on the right. The default value is **Start** for the last page and **Next** for the other pages.|
E
ester.zhou 已提交
27
| status | [ItemState](#itemstate) | Display status of **nextLabel** in the stepper. Optional.<br>Default value: **ItemState.Normal**|
E
ester.zhou 已提交
28

E
ester.zhou 已提交
29 30 31 32 33
>  **NOTE**
>
>  - The **\<StepperItem>** component does not support setting of the universal width attribute. By default, its width is the same as that of the parent **\<Stepper>** component.
>  - The **\<StepperItem>** component does not support setting of the universal height attribute. Its height is the height of the parent **\<Stepper>** component minus the height of the label button.
>  - The **\<StepperItem>** component does not support setting of the **aspectRadio** or **constrainSize** attribute, which may affect the length and width.
E
ester.zhou 已提交
34
## ItemState
Z
zengyawen 已提交
35

36 37 38 39 40 41
|   Name   | Description|
| -------- |-------- |
| Normal |The button on the right is clickable and can navigate users to the next **\<StepperItem>** when it is clicked.|
| Disabled |The button on the right is disabled.|
| Waiting | The button on the right is not displayed, and a progress bar is displayed instead.|
| Skip |The button on the right reads "Skip" by default. You can define the processing logic for this state in the **onSkip** callback of the stepper.|
Z
zengyawen 已提交
42 43 44 45 46


## Example

See [Stepper](ts-basic-components-stepper.md).