Activiteiten
Component preview opent in nieuw tabbladThere are no notes for this item.
<main>
<form>
<h2 class="dso-steps-indicator">
3. Kies activiteiten
<span class="dso-step">
Stap 3/7
</span>
</h2>
<dso-alert status="info">
Hulp nodig bij kiezen? Doe dan eerst de <a href="#">Vergunningscheck</a>.
</dso-alert>
<h3>Mijn activiteiten</h3>
<div class="dso-shopping-cart">
<div class="dso-contents">
<button type="button" class="dso-status">
<dso-icon icon="chevron-down"></dso-icon>U heeft 1 activiteit gekozen
</button>
</div>
</div>
<div class="dso-highlight-box">
<div class="dso-search-bar">
<div class="dso-search-bar-input">
<label for="filter_activiteiten">Zoek uw activiteiten</label>
<span class="dso-search-icon" aria-hidden="true"></span>
<input type="text" id="filter_activiteiten" placeholder="Bijvoorbeeld bouwactiviteiten" />
<button type="button">
Zoekopdracht legen
</button>
</div>
<button type="button" class="btn btn-default sr-only">
Button
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3">
<fieldset>
<legend>
<h4>Filters</h4>
</legend>
<fieldset class="form-group dso-checkboxes">
<legend class="sr-only">Bestuurslaag</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Bestuurslaag
</span>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="checkbox" id="facets-0" name="facets" value="1">
<label for="facets-0">
Rijk (18)
</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="facets-1" name="facets" value="2">
<label for="facets-1">
Gemeente (4)
</label>
</div>
</div>
</fieldset>
<fieldset class="form-group dso-checkboxes">
<legend class="sr-only">Toestemming</legend>
<div class="dso-label-container">
<span class="control-label" aria-hidden="true">
Toestemming
</span>
</div>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="checkbox" id="facets-0" name="facets" value="1">
<label for="facets-0">
Aanvraag vergunning (11)
</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="facets-1" name="facets" value="2">
<label for="facets-1">
Aanvraag maatwerkvoorschrift (3)
</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="facets-2" name="facets" value="3">
<label for="facets-2">
Melding (7)
</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="facets-3" name="facets" value="4">
<label for="facets-3">
Informatie (1)
</label>
</div>
</div>
</fieldset>
</fieldset>
</div>
<div class="col-xs-12 col-sm-9">
<fieldset>
<legend>
<h4>5 activiteiten</h4>
</legend>
<button type="button" class="btn dso-list-button dso-selected">
<span>Andere activiteiten dan kabels en leidingen in het beperkingengebied van een Rijksweg - Aanvraag vergunning</span>
<span class="dso-sublabel">Rijk</span>
<dso-icon icon="check"></dso-icon>
<span class="sr-only">geselecteerd</span>
</button>
<button type="button" class="btn dso-list-button">
<span>Bouwen dakkapel - Aanvraag vergunning</span>
<span class="dso-sublabel">Gemeente</span>
</button>
<button type="button" class="btn dso-list-button">
<span>In stand houden van bouwwerken - Melding</span>
<span class="dso-sublabel">Gemeente</span>
</button>
<button type="button" class="btn dso-list-button">
<span>Milieubelastende activiteit - Aanvraag vergunning</span>
<span class="dso-sublabel">Gemeente</span>
</button>
<button type="button" class="btn dso-list-button">
<span>Opslaan van vloeistoffen in opslagtanks of in tankcontainers of verpakkingen gebruikt als opslagtank - Aanvraag vergunning</span>
<span class="dso-sublabel">Rijk</span>
</button>
</fieldset>
</div>
</div>
<div class="dso-form-buttons">
<div class="dso-aside">
<button type="link" class="btn btn-link">
<dso-icon icon="chevron-left"></dso-icon><span>Vorige stap</span>
</button>
</div>
<button type="submit" class="btn btn-primary"><span>Volgende stap</span>
<dso-icon icon="chevron-right"></dso-icon>
</button>
</div>
</form>
</main>
<main>
<form>
{% render '@form-steps', steps %}
<dso-alert status="{{ alert.status }}">
{{ alert.message | safe }}
</dso-alert>
{% render '@shopping-cart', shoppingcart %}
<div class="dso-highlight-box">
{% render '@search-bar', search %}
</div>
<div class="row">
<div class="col-xs-12 col-sm-3">
{% render '@form-fieldsets', {fieldsets: formFacets} %}
</div>
<div class="col-xs-12 col-sm-9">
<fieldset>
<legend>
<h4>5 activiteiten</h4>
</legend>
{% for listButton in listButtons %}
{% render '@list-button', listButton %}
{% endfor %}
</fieldset>
</div>
</div>
{% render '@form-buttons', {buttons: buttons, asideButtons: asideButtons} %}
</form>
</main>
steps:
title: 3. Kies activiteiten
step: Stap 3/7
alert:
status: info
message: 'Hulp nodig bij kiezen? Doe dan eerst de <a href="#">Vergunningscheck</a>.'
shoppingcart:
shoppingcartTitle: Mijn activiteiten
shoppingcartTitleTag: h3
items:
- label: >-
Andere activiteiten dan kabels en leidingen in het beperkingengebied van
een Rijksweg - Aanvraag vergunning
additive: 1
collapsed: true
search:
inputType: search-bar
label: Zoek uw activiteiten
placeholder: Bijvoorbeeld bouwactiviteiten
icon: true
id: filter_activiteiten
hideSearchButton: true
clearButton: true
formFacets:
- legend: |
<h4>Filters</h4>
groups:
- id: facets
inputType: checkboxes
label: Bestuurslaag
options:
- value: 1
label: Rijk (18)
id: checkbox_1
- value: 2
label: Gemeente (4)
id: checkbox_2
- id: facets
inputType: checkboxes
label: Toestemming
options:
- value: 1
label: Aanvraag vergunning (11)
id: checkbox_3
- value: 2
label: Aanvraag maatwerkvoorschrift (3)
id: checkbox_4
- value: 3
label: Melding (7)
id: checkbox_5
- value: 4
label: Informatie (1)
id: checkbox_6
listButtons:
- type: button
label: >-
Andere activiteiten dan kabels en leidingen in het beperkingengebied van
een Rijksweg - Aanvraag vergunning
sublabel: Rijk
count: '1'
- type: button
label: Bouwen dakkapel - Aanvraag vergunning
sublabel: Gemeente
- type: button
label: In stand houden van bouwwerken - Melding
sublabel: Gemeente
- type: button
label: Milieubelastende activiteit - Aanvraag vergunning
sublabel: Gemeente
- type: button
label: >-
Opslaan van vloeistoffen in opslagtanks of in tankcontainers of
verpakkingen gebruikt als opslagtank - Aanvraag vergunning
sublabel: Rijk
asideButtons:
- type: link
modifier: link
label: Vorige stap
icon: chevron-left
buttons:
- type: submit
modifier: primary
label: Volgende stap
iconAfter: chevron-right