Development guide

Progress Indicator <x-progress-indicator>

De progress indicator is een element wat in de vragenlijsten wordt gebruikt. Dit element heeft 2 verplichte properties:

Properties

Property Attribute Type Default Description
steps steps array [] Een array met labels die de stappen vertegenwoordigen
errorSteps error-step array [] De keys in $steps die eventueel voorzien moeten worden van een error weergave

De progress indicator wordt aangestuurd via javascript om tussen stappen te wisselen. Daarnaast heeft het element standaard margin ingesteld staan en dit kan makkelijk uitgeschakeld worden door class="my-0" toe te voegen.

Voorbeeld 1

@php
    $steps = ['stap 1', 'stap 2', 'stap 3', 'stap 4'];
    $errorSteps = [];
@endphp

<x-progress-indicator class="my-0" :steps="$steps ?? null" :error-steps="$errorSteps ?? null" />

Resultaat:

1/4
stap 1


Voorbeeld van Progress Indicator in combinatie met een vragenlijst

@php
    $tabs = [
        'Verzoekende partij',
        'Zorgproductmonitoring / zorginzicht',
        'Wettelijke taak',
        'Onderzoek',
        'Wetenschappelijk en statistisch onderzoek',
        'Afronding',
    ];
    $errorSteps = [];
@endphp

<form class="js-huisartsen-form mb-4"
      action=""
      data-question-visible-class="questions__item--is-visible"
      data-tab-selector=".tab-pane"
      data-tab-active-class="active"
      data-anchor="#scrollAnchor"
      data-progress-indication-selector="#piTextWrapFalse"
      style="max-width: 768px;"

>
    <div class="tab-content">
        @foreach($tabs as $key => $tab)
            <div class="tab-pane {{ $loop->first ? 'active' : '' }}" id="tab{{ $loop->iteration }}" role="tabpanel">
                <h2 class="title title--h1 mb-2">{{ $tab }}</h2>
                <div class="questions">
                    <div class="questions__item questions__item--is-visible js-question" id="voorbeeldvraag{{$key}}" data-visible-class="questions__item--is-visible">
                        <div class="question">
                            <label for="voorbeeldvraag{{$key}}" class="question__label question__label--lg">
                                Vraag {{$key+1}}
                            </label>
                            <div class="question__answer">
                                <div class="question__option form-check-inline">
                                    <input class="styled-input" id="voorbeeldvraag_Ja{{$key}}" name="voorbeeldvraag{{$key}}" type="radio" value="Ja">
                                    <label for="voorbeeldvraag_Ja{{$key}}" class="styled-switch">Ja</label>
                                </div>
                                <div class="question__option form-check-inline">
                                    <input class="styled-input" id="voorbeeldvraag_Nee{{$key}}" name="voorbeeldvraag{{$key}}" type="radio" value="Nee">
                                    <label for="voorbeeldvraag_Nee{{$key}}" class="styled-switch">Nee</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @if($loop->first)
                    <div class="align-xs-r">
                        @include('wachttijden.includes.step-next')
                    </div>
                @elseif($loop->last)
                    @include('wachttijden.includes.step-next-previous', ['submit' => true, 'submitText' => 'Verstuur aanvraag'])
                @else
                    @include('wachttijden.includes.step-next-previous')
                @endif
            </div>
        @endforeach
    </div>
</form>

<x-progress-indicator style="max-width: 768px;" :steps="$steps ?? null" :error-steps="$errorSteps ?? null" :text-wrap="false" />

Resultaat:

Verzoekende partij

Zorgproductmonitoring / zorginzicht

Wettelijke taak

Onderzoek

Wetenschappelijk en statistisch onderzoek

Afronding

1/6
Verzoekende partij