DSO Component Library

Searchbar 

<!-- Default -->
<form class="dso-search">
    <div class="dso-searchbar dso-animate ">
        <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>


<!-- Searchbar Closed -->
<form class="dso-search">
    <div class="dso-searchbar dso-animate ">
        <input type="text" id="searchbarClosed" class="form-control" placeholder="Zoeken" />
        <span class="dso-searchbar-icon" aria-hidden="true"></span>
        <label for="searchbarClosed">Zoeken</label>
        <button type="button">Open zoeken</button>
    </div>
    <button type="submit">Zoeken</button>
</form>


<!-- Searchbar Opened -->
<form class="dso-search">
    <div class="dso-searchbar dso-animate  dso-open">
        <input type="text" id="searchbarOpened" class="form-control" placeholder="Zoeken" />
        <span class="dso-searchbar-icon" aria-hidden="true"></span>
        <label for="searchbarOpened">Zoeken</label>
        <button type="button">Open zoeken</button>
    </div>
    <button type="submit">Zoeken</button>
</form>


<form class="dso-search">
  <div class="dso-searchbar dso-animate {{#if open }} dso-open{{/if}}">
    <input type="text" id="{{ id }}" class="form-control" placeholder="{{ label }}" />
    <span class="dso-searchbar-icon" aria-hidden="true"></span>
    <label for="{{ id }}">{{ label }}</label>
    <button type="button">Open zoeken</button>
  </div>
  <button type="submit">{{ label }}</button>
</form>
 
/* Default */
__title: 'Example: Open/Close'
__explanation: >-
  Animatie demo. Animates moeten aangezet worden dmv.
  <code>.dso-searchbar.dso-animate</code>
__switches:
  - name: state
    label: Open/sluit
id: searchbar
label: Zoeken



/* Searchbar Closed */
__title: Zoekbalk gesloten
__explanation: >-
  De zoekbalk dient vanuit zichzelf de class <code>.dso-searchbar</code> te
  hebben en kan worden geopend met de modifier classes <code>.dso-open</code>.
  Het toevoegen/verwijderen van deze modifier classes start een animatie die de
  zoekbalk opent of sluit.
__switches: null
id: searchbarClosed
label: Zoeken



/* Searchbar Opened */
__title: Zoekbalk open
__explanation: >-
  Om een zoekbalk te openen dient de class <code>.dso-open</code> toegevoegd te
  worden. Sluiten gaat door de class weer te verwijderen
__switches: null
id: searchbarOpened
label: Zoeken
open: true

There are no notes for this item.