zidanecomponents/Stepper
import { … } from 'zidane-ui'ui/src/components/Stepper.tsx
Components#
StepperComponent#
Renders the progress of a wizard as dots or as a rail of step names. The current step carries
aria-current="step". When onSelect is set, done steps go back through it.
function Stepper(props: StepperProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | StepperProps | Component props. |
Returns
ElementProps
| Name | Type | Default | Description |
|---|---|---|---|
| className? | string | Extra classes on the navigation. | |
| current | string | Id of the current step. | |
| label? | string | Accessible name of the navigation. Defaults to the | |
| onSelect? | (id: string) => void | Called with a done step's id when it is clicked. Absent: done steps are not buttons. | |
| steps | readonly StepperStep[] | The steps, in order. | |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. | |
| variant? | 'dots' | 'rail' | 'dots' |
|
Interfaces#
StepperPropsInterface#
Props for Stepper.
interface StepperPropsProperties
| Name | Type | Default | Description |
|---|---|---|---|
| className? | string | Extra classes on the navigation. | |
| current | string | Id of the current step. | |
| label? | string | Accessible name of the navigation. Defaults to the | |
| onSelect? | (id: string) => void | Called with a done step's id when it is clicked. Absent: done steps are not buttons. | |
| steps | readonly StepperStep[] | The steps, in order. | |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. | |
| variant? | 'dots' | 'rail' | 'dots' |
|
StepperStepInterface#
One step of a Stepper.
interface StepperStepProperties
| Name | Type | Description |
|---|---|---|
| id | string | Stable id, passed to |
| label | string | Step name: the rail's text, the dot's tooltip and accessible name. |