Skip to main content

Step
New

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.

Properties #

Property Attribute Description Type Default
heading (required) heading Set the heading for the step. string undefined
headingLevel (required) heading-level Set the heading level used in the HTML markup. "h1" | "h2" | "h3" | "h4" | "h5" | "h6" undefined
roundedBottom rounded-bottom Enable/disable rounded bottom corners (on mobile). This property is used internally by stepper, and should not be set by the developer. boolean false
roundedTop rounded-top Enable/disable rounded top corners (on mobile). This property is used internally by stepper, and should not be set by the developer. boolean false
state state The state of the step. This property is used internally by stepper, and should not be set by the developer. "complete" | "current" | "incomplete" undefined
stepIndex step-index 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. number undefined
theme theme Theme of the component. "" | "default" | "turva" ""

Events #

Event Description Type
duetStepClick Event emitted when the step heading is clicked. CustomEvent<{ originalEvent: MouseEvent | KeyboardEvent; component: "duet-step"; stepIndex: number; }>

Methods #

setFocus() => Promise<void> #

Programmatically shift focus to the step's heading.

Returns #

Type: Promise<void>

Slots #

Slot Description
"heading-content" Step heading content. Use this slot to show additional content next to step heading.
"unnamed default slot" The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.

Dependencies #

Depends on #

Graph #

graph TD;
duet-step --> duet-icon
duet-step --> duet-spacer
duet-step --> duet-heading
style duet-step fill:#f9f,stroke:#333,stroke-width:4px

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.



Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Abstract

Tutorials

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes

Tutorials

Usage With Markdown

Tutorials

VS Code

Tutorials

Zeplin


Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.