Step is a component used inside Stepper. A step consists of a numbered heading and content. For concrete usage examples, please see the Stepper component.
| || ||Set the heading for the step.|| || |
| || ||Set the heading level used in the HTML markup.|| || |
| || ||Enable/disable rounded bottom corners (on mobile). This property is used internally by stepper, and should not be set by the developer.|| || |
| || ||Enable/disable rounded top corners (on mobile). This property is used internally by stepper, and should not be set by the developer.|| || |
| || ||The state of the step. This property is used internally by stepper, and should not be set by the developer.|| || |
| || ||The index of this step, derived from its position within stepper. This property is used internally by stepper, and should not be set by the developer.|| || |
| || ||Theme of the component.|| || |
| ||Event emitted when the step heading is clicked.|| |
setFocus() => Promise<void> #
Programmatically shift focus to the step's heading.
| ||Step heading content. Use this slot to show additional content next to step heading.|
| ||The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.|
Depends on #
duet-step --> duet-icon
duet-step --> duet-spacer
duet-step --> duet-heading
style duet-step fill:#f9f,stroke:#333,stroke-width:4px
Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:
Using CLI ToolsTutorials
Creating Custom PatternsTutorials
Server Side RenderingTutorials
Usage With MarkdownTutorials
If you experience any issues while using a component, please head over to the Support page for more guidelines and help.