<header>
    <div class="dso-logo-bar">
        <img src="../../images/omgevingsloket.png" alt="Omgevingsloket" class="logo" />
        <div class="dso-tools-bar">
            <form class="dso-search">
                <div class="dso-searchbar dso-animate  dso-open">
                    <input type="text" id="searchbar" class="form-control" placeholder="Zoeken" />
                    <span class="dso-searchbar-icon" aria-hidden="true"></span>
                    <label for="searchbar">Zoeken</label>
                    <button type="button">Open zoeken</button>
                </div>
                <button type="submit">Zoeken</button>
            </form>

            <div class="dso-login">
                <a href="">
                    <span class="login-icon" aria-hidden="true"></span>
                    Inloggen
                </a>
            </div>
        </div>
    </div>

    <nav class="dso-navbar">
        <div class="dso-navbar-header">
            <button type="button" class="dso-navbar-toggle">
                <span class="fas fa-bars" aria-hidden="true"></span>
                <span class="sr-only">Ga naar menu</span>
            </button>
        </div>
        <ul class="dso-nav dso-nav-main">
            <li class="dso-active">
                <a href="#">
                    Home
                </a>
            </li>
            <li>
                <a href="#">
                    Actueel
                </a>
            </li>
            <li>
                <a href="#">
                    Kalender
                </a>
            </li>
            <li>
                <a href="#">
                    Zelf aan de slag
                </a>
            </li>
            <li>
                <a href="#">
                    Documenten
                </a>
            </li>
            <li>
                <a href="#">
                    Over ons
                </a>
            </li>
            <li>
                <a href="#">
                    Wetgeving
                </a>
            </li>
        </ul>

    </nav>

    <ol class="breadcrumb">
        <li>
            <a href="#">Home</a>
        </li>
        <li class="active">Checken</li>
    </ol>
</header>

<main>
    <div class="row">
        <div class="col-xs-12">
            <h1>Project | Aanbouw Kerkstraat 1</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-9">
            <div class="dso-accordion">
                <div class="dso-accordion-section dso-success">
                    <div class="dso-section-handle">
                        <a href="#">Woning</a>
                    </div>
                </div>
                <div class="dso-accordion-section dso-success">
                    <div class="dso-section-handle">
                        <a href="#">Bouwwerkzaamheden</a>
                    </div>
                </div>
                <div class="dso-accordion-section dso-warning dso-open">
                    <div class="dso-section-handle">
                        <a href="#">Plaats van het bouwwerk</a>
                    </div>
                    <div class="dso-section-body">
                        <form>
                            <fieldset class="dso-form-fields">
                                <legend class="sr-only">Aanvraagformulier</legend>
                                <fieldset>
                                    <legend>Plaats van het bouwwerk</legend>
                                    <div class="form-group dso-input dso-input-text">
                                        <div class="dso-label-container">
                                            <label for="omgevingsvergunningPostcode" class="control-label">
                                                Postcode
                                            </label>
                                        </div>
                                        <div class="dso-field-container">
                                            <input type="text" id="omgevingsvergunningPostcode" class="form-control" size="8" />
                                        </div>
                                    </div>
                                    <div class="form-group dso-input dso-input-text">
                                        <div class="dso-label-container">
                                            <label for="omgevingsvergunningHuisnummer" class="control-label">
                                                Huisnummer
                                            </label>
                                        </div>
                                        <div class="dso-field-container">
                                            <input type="text" id="omgevingsvergunningHuisnummer" class="form-control" size="8" />
                                        </div>
                                    </div>
                                    <div class="form-group dso-input dso-input-text">
                                        <div class="dso-label-container">
                                            <label for="omgevingsvergunningToevoeging" class="control-label">
                                                Huisnummer toevoeging
                                            </label>
                                        </div>
                                        <div class="dso-field-container">
                                            <input type="text" id="omgevingsvergunningToevoeging" class="form-control" size="8" />
                                        </div>
                                    </div>
                                    <div class="form-group dso-input dso-input-text">
                                        <div class="dso-label-container">
                                            <label for="omgevingsvergunningStraatnaam" class="control-label">
                                                Straatnaam
                                            </label>
                                        </div>
                                        <div class="dso-field-container">
                                            <input type="text" id="omgevingsvergunningStraatnaam" class="form-control" />
                                        </div>
                                    </div>
                                    <div class="form-group dso-input dso-input-text">
                                        <div class="dso-label-container">
                                            <label for="omgevingsvergunningWoonplaats" class="control-label">
                                                Woonplaats
                                            </label>
                                        </div>
                                        <div class="dso-field-container">
                                            <input type="text" id="omgevingsvergunningWoonplaats" class="form-control" />
                                        </div>
                                    </div>
                                </fieldset>
                            </fieldset>
                            <div class="dso-form-buttons">
                                <button type="submit" class="btn btn-primary">
                                    Volgende stap
                                </button>
                            </div>
                        </form>

                    </div>
                </div>
                <div class="dso-accordion-section">
                    <div class="dso-section-handle">
                        <a href="#">Afmetingen van het bouwwerk</a>
                    </div>
                </div>
                <div class="dso-accordion-section">
                    <div class="dso-section-handle">
                        <a href="#">Extra werkzaamheden</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="well progress-block" data-spy="affix" data-offset-top="245" data-offset-bottom="444">
                <h2>Aanvraag voorbereiden</h2>
                <p>Omgevingsvergunning</p>
                <ul class="list-unstyled">
                    <li class="active">
                        <span class="fas fa-angle-right" aria-hidden="true"></span>
                        Omschrijving project <span class="fas fa-check" aria-hidden="true"></span>

                    </li>
                    <li class="active">
                        <span class="fas fa-angle-right" aria-hidden="true"></span>
                        Aanvrager <span class="fas fa-check" aria-hidden="true"></span>

                    </li>
                    <li>
                        <span class="fas fa-angle-right" aria-hidden="true"></span>
                        Locatie
                    </li>
                    <li>
                        <span class="fas fa-angle-right" aria-hidden="true"></span>
                        Werkzaamheden
                    </li>
                    <li>
                        <span class="fas fa-angle-right" aria-hidden="true"></span>
                        Bijlagen
                    </li>
                </ul>

            </div>
        </div>
    </div>
</main>

<footer>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <h2>Service</h2>
            <ul>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Sitemap</a></li>
                <li><a href="#">Help</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Over deze site</h2>
            <ul>
                <li><a href="#">Copyright</a></li>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Cookies</a></li>
                <li><a href="#">Toegankelijkheid</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Volg ons ook op</h2>
            <ul>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">LinkedIn</a></li>
            </ul>
        </div>
    </div>
</footer>
{{render '@header' }}

<main>
  <div class="row">
    <div class="col-xs-12">
      <h1>Project | Aanbouw Kerkstraat 1</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-md-9">
      {{#accordion}}
        {{#each sections }}
          {{#accordionSection title }}
            {{> '@form' }}
          {{/accordionSection}}
        {{/each}}
      {{/accordion}}
    </div>

    <div class="col-md-3">
      {{#progressBlock }}
        <h2>Aanvraag voorbereiden</h2>
        <p>Omgevingsvergunning</p>
        <ul class="list-unstyled">
          <li class="active">
            {{> '@icon' icon="fas fa-angle-right"}} Omschrijving project {{> '@icon' icon="fas fa-check"}}
          </li>
          <li class="active">
            {{> '@icon' icon="fas fa-angle-right"}} Aanvrager {{> '@icon' icon="fas fa-check"}}
          </li>
          <li>
            {{> '@icon' icon="fas fa-angle-right"}} Locatie
          </li>
          <li>
            {{> '@icon' icon="fas fa-angle-right"}} Werkzaamheden
          </li>
          <li>
            {{> '@icon' icon="fas fa-angle-right"}} Bijlagen
          </li>
        </ul>
      {{/progressBlock}}
    </div>
  </div>
</main>

{{render '@footer' }}
breadcrumbs:
  crumbs:
    - label: Home
      url: '#'
    - label: Aanvragen
      url: '#'
    - label: Mijn project
      url: '#'
    - label: Aanvraag voorbereiden
      url: '#'
sections:
  - title: Woning
    id: panel1
    state: success
  - title: Bouwwerkzaamheden
    id: panel2
    state: success
  - title: Plaats van het bouwwerk
    id: panel3
    state: warning
    open: true
    formLegend: Aanvraagformulier
    fieldsets:
      - legend: Plaats van het bouwwerk
        groups:
          - id: omgevingsvergunningPostcode
            inputType: input
            type: text
            label: Postcode
            size: 8
          - id: omgevingsvergunningHuisnummer
            inputType: input
            type: text
            label: Huisnummer
            size: 8
          - id: omgevingsvergunningToevoeging
            inputType: input
            type: text
            label: Huisnummer toevoeging
            size: 8
          - id: omgevingsvergunningStraatnaam
            inputType: input
            type: text
            label: Straatnaam
          - id: omgevingsvergunningWoonplaats
            inputType: input
            type: text
            label: Woonplaats
    submitButton:
      type: submit
      modifier: primary
      label: Volgende stap
  - title: Afmetingen van het bouwwerk
    id: panel4
  - title: Extra werkzaamheden
    id: panel5

De aside met de checklist schuift mee met het formulier, tot hij een punt bereikt waar hij niet verder MAG scrollen. We gebruiken hiervoor Bootstrap Affix, en deze heeft twee values - data-offset-top en data-offset-bottom - die bepalen waar het kantelpunt zit. Let op de uitlijning die te zien is in onderstaande instructie afbeelding.

Zie ook

  • Bootstrap Affix
  • Positioneren van de affix, links in het menu onder het kopje “Documentation”