Steps
An ordered list of steps, those done checked, the current one marked, joined by a line.
- AccountYour details
- PlanPick a tier
- PaymentCard or invoice
- Review
forSlots(StepsSlots)(Recipes.Steps({}))
Usage
The function that drew the preview, over the theme module Create a theme writes. The preview passes it the style picked above instead of its default.
export const StepsStyle = forSlots(StepsSlots)(Recipes.Steps({}))
export const steps = <Message>(style: NamedStyle<typeof StepsSlots>, h: HtmlBuilder<Message>): Html =>
Steps.view(
{
label: 'Checkout',
steps: [
{ title: 'Account', description: 'Your details' },
{ title: 'Plan', description: 'Pick a tier' },
{ title: 'Payment', description: 'Card or invoice' },
{ title: 'Review' },
],
current: 2,
style,
},
h,
)