<header>
<div class="dso-logo-bar">
<img src="../../images/omgevingsloket.png" alt="Omgevingsloket" class="logo" />
<div class="dso-tools-bar">
<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”