stepper
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.
NOTE: This component is supported since API version 5.
Permission List
None
Child Component
Only the <stepper-item> component is supported.
Attribute
Style
|
If this attribute is not set, the width required for the element content is used. |
||||
|
If this length attribute is not set, the length required for the element content is used. |
||||
The attribute can have one to four values:
|
||||
Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:
|
||||
Shorthand attribute to set all borders. You can set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set. |
||||
Shorthand attribute to set the style for all borders. Available values are as follows: |
||||
Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid. |
||||
Shorthand attribute to set the borders for every side respectively. You can set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set. |
||||
Shorthand attribute to set the width of all borders, or separately set the width of each border. |
||||
Attribute to set widths of left, top, right, and bottom borders. |
||||
Shorthand attribute to set the color of all borders, or separately set the color of each border. |
||||
Attribute to set colors of left, top, right, and bottom borders. |
||||
Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width or color of a specific border. To set the width or color, you need to set border-width or border-color for all the borders at the same time. |
||||
Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners |
||||
This attribute supports Gradient Styles only but is not compatible with background-color or background-image. |
||||
Background image. Currently, this attribute is not compatible with background-color or background. Both Internet and local image resources are supported. |
||||
|
|
|||
Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically. |
||||
|
|
|||
Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. |
||||
How and whether to display the box containing an element. Available values are as follows: |
||||
Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the display attribute to none.) Available values are as follows: |
||||
How to divide available space of the parent component for a child component. It is used as a shorthand attribute to set the flex-grow attribute of the parent component. |
||||
How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value 0 indicates that the child component does not grow. |
||||
How much a child component will shrink. The shrink occurs only when the sum of default child component widths is greater than that of the parent component. Value 0 indicates that the child component does not shrink. |
||||
Positioning type of an element. Dynamic changes are not supported. |
||||
left|top|right|bottom must be used together with position to determine the offset position of an element.
|
Event
Method
Example Code
<!-- xxx.hml -->
<div class = "container">
<stepper class="stepper" id="mystepper" index="0" onnext="nextclick" onback="backclick">
<stepper-item class ="stepperItem" label="{{label_1}}">
<div class = "stepperItemContent" >
<text class = "text">First screen</text>
</div>
<button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button>
</stepper-item>
<stepper-item class ="stepperItem" label="{{label_2}}">
<div class = "stepperItemContent" >
<text class = "text">Second screen</text>
</div>
<button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button>
</stepper-item>
<stepper-item class ="stepperItem" label="{{label_3}}">
<div class = "stepperItemContent" >
<text class = "text">Third screen</text>
</div>
<button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button>
</stepper-item>
</stepper>
</div>
/* xxx.css */
.container {
margin-top: 20px;
flex-direction: column;
align-items: center;
height: 300px;
}
.stepperItem {
flex-direction: column;
align-items: center;
}
.stepperItemContent {
color: #0000ff;
font-size: 50px;
justify-content: center;
}
.button {
width: 60%;
margin-top: 30px;
justify-content: center;
}
// xxx.js
export default {
data: {
label_1:
{
prevLabel: 'BACK',
nextLabel: 'NEXT',
status: 'normal'
},
label_2:
{
prevLabel: 'BACK',
nextLabel: 'NEXT',
status: 'normal'
},
label_3:
{
prevLabel: 'BACK',
nextLabel: 'NEXT',
status: 'normal'
},
},
setRightButton(e) {
this.$element('mystepper').setNextButtonStatus({status: 'skip', label: 'SKIP'});
},
nextclick(e) {
var index = {
pendingIndex: e.pendingIndex
}
return index;
},
backclick(e) {
var index = {
pendingIndex: e.pendingIndex
}
return index;
},
}
