webform-progress-tracker.html.twig in Webform 6.x

Default theme implementation for webform wizard progress tracker.

Available variables:

• webform: A webform.
• pages: Associative array of wizard pages.
• progress: Array of wizard progress containing page titles.
• current_page: Current wizard page key.
• current_index: The current wizard page index.
• max_pages: Maximum number of pages that progress text should be displayed on.

See also

template_preprocess_webform_progress_tracker()

https://www.w3.org/WAI/tutorials/forms/multi-page/

1 theme call to webform-progress-tracker.html.twig

template_preprocess_webform_progress in includes/webform.theme.template.inc

Prepares variables for webform 'wizard' progress templates.

File

templates/webform-progress-tracker.html.twig

{#
/**
 * @file
 * Default theme implementation for webform wizard progress tracker.
 *
 * Available variables:
 * - webform: A webform.
 * - pages: Associative array of wizard pages.
 * - progress: Array of wizard progress containing page titles.
 * - current_page: Current wizard page key.
 * - current_index: The current wizard page index.
 * - max_pages: Maximum number of pages that progress text should be displayed on.
 *
 * @see template_preprocess_webform_progress_tracker()
 * @see https://www.w3.org/WAI/tutorials/forms/multi-page/
 *
 * @ingroup themeable
 */
#}
{{ attach_library('webform/webform.progress.tracker') }}

<ul class="webform-progress-tracker progress-tracker progress-tracker--center" data-webform-progress-steps>
  {% for index, page in progress %}
    {% set is_completed = index < current_index %}
    {% set is_active = index == current_index %}
    {%
      set classes = [
        'progress-step',
        is_completed ? 'is-complete',
        is_active ? 'is-active',
      ]
    %}
    {%
      set attributes = create_attribute()
        .setAttribute('data-webform-' ~ page.type, page.name)
        .setAttribute('title', page.title)
        .setAttribute('class', '')
        .addClass(classes)
    %}
    <li{{ attributes }}>
      <div class="progress-marker" data-webform-progress-step data-webform-progress-link data-text="{{ index + 1 }}"></div>
      {% if progress|length < max_pages %}
        <div class="progress-text">
          <div class="progress-title" data-webform-progress-link>
            <span class="visually-hidden" data-webform-progress-state>{% if is_active or is_completed %}{{ is_active ? 'Current'|t : 'Completed'|t }}{% endif %}</span>
            {{ page.title }}
          </div>
        </div>
      {% endif %}
    </li>
  {% endfor %}
</ul>