Stepper

composant

The steps of a process, the finished ones marked, the current one announced, reading downwards on a phone.

Aperçu

Clair

Finished:Cart
Address
Payment

Code

<twig:Stepper label="Checkout">
    <twig:Stepper:Item state="done" href="/cart" doneLabel="Finished:">Cart</twig:Stepper:Item>
    <twig:Stepper:Item state="current">Address</twig:Stepper:Item>
    <twig:Stepper:Item>Payment</twig:Stepper:Item>
</twig:Stepper>

Sombre

Finished:Cart
Address
Payment

Code

<twig:Stepper label="Checkout">
    <twig:Stepper:Item state="done" href="/cart" doneLabel="Finished:">Cart</twig:Stepper:Item>
    <twig:Stepper:Item state="current">Address</twig:Stepper:Item>
    <twig:Stepper:Item>Payment</twig:Stepper:Item>
</twig:Stepper>

Installation

php bin/console ux:install stepper --kit=github.com/parler-haut-interagir-librement/ux-kit

Propriétés

Propriété	Type	Par défaut	Description
`label`	`string\|null`	`null`	What screen readers call the list of steps.

Accessibility

An ordered list, the current step with aria-current="step". Say with doneLabel what the mark of a finished step shows.

Fichiers à copier

templates/components/Stepper.html.twig

{%- props
    ## string|null What screen readers call the list of steps.
    label = null
-%}
<ol{{ attributes.defaults({class: 'isStepper'}|merge(label is null ? {} : {'aria-label': label})) }}>
{##- The steps, each a `Stepper:Item`. -#}
{%- block content %}{% endblock -%}
</ol>

templates/components/Stepper/Item.html.twig

{%- props
    ## 'done'|'current'|'upcoming' Where the process stands at this step.
    state = 'upcoming',
    ## string|null Where the step leads, when it can be gone back to.
    href = null,
    ## string|null What screen readers read before the name of a finished step.
    doneLabel = null
-%}
<li{{ attributes.defaults({class: 'isStepperItem' ~ (state is same as('done') ? ' isDone' : '')}|merge(state is same as('current') ? {'aria-current': 'step'} : {})) }}>
    {%- if state is same as('done') and doneLabel is not null -%}<span class="isVisuallyHidden">{{ doneLabel }}</span>{%- endif -%}
    {%- if href is not null -%}<a class="isStepperLabel" href="{{ href }}">{%- else -%}<span class="isStepperLabel">{%- endif -%}
    {##- The name of the step. -#}
    {%- block content %}{% endblock -%}
    {%- if href is not null -%}</a>{%- else -%}</span>{%- endif -%}
</li>