Search Bar

Pas bij een waarde toont de reset-knop, initieel is deze knop er niet.

<!-- Default -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">

        <label for="search-bar--default">Label</label>
        <span class="dso-search-icon" aria-hidden="true"></span>

        <input type="text" id="search-bar--default" placeholder="Placeholder" />

    </div>
    <button type="button" class="btn btn-default">
        Button
    </button>
</div>
<!-- Label No Icon -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">

        <label for="search-bar--label-no-icon">Label</label>

        <input type="text" id="search-bar--label-no-icon" placeholder="Placeholder" />

    </div>
    <button type="button" class="btn btn-default">
        Button
    </button>
</div>
<!-- Hidden Label Icon -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">

        <label for="search-bar--hidden-label-icon" class="dso-search-icon">Label</label>

        <input type="text" id="search-bar--hidden-label-icon" placeholder="Placeholder" />

    </div>
    <button type="button" class="btn btn-default">
        Button
    </button>
</div>
<!-- Hidden Label No Icon -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">

        <label for="search-bar--hidden-label-no-icon" class="sr-only">Label</label>

        <input type="text" id="search-bar--hidden-label-no-icon" placeholder="Placeholder" />

    </div>
    <button type="button" class="btn btn-default">
        Button
    </button>
</div>
<!-- No Label Icon -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">

        <span class="dso-search-icon" aria-hidden="true"></span><input type="text" placeholder="Placeholder" />

    </div>
    <button type="button" class="btn btn-default">
        Button
    </button>
</div>
<!-- No Label No Icon -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">

        <input type="text" placeholder="Placeholder" />

    </div>
    <button type="button" class="btn btn-default">
        Button
    </button>
</div>
<!-- With Value -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">

        <label for="search-bar--with-value">Label</label>
        <span class="dso-search-icon" aria-hidden="true"></span>

        <input type="text" id="search-bar--with-value" placeholder="Placeholder" value="Waarde" />

        <button type="button">
            Zoekopdracht legen
        </button>

    </div>
    <button type="button" class="btn btn-default">
        Button
    </button>
</div>
<!-- Hidden Button -->
<div class="dso-search-bar">
    <div class="dso-search-bar-input">

        <label for="search-bar--hidden-button">Label</label>
        <span class="dso-search-icon" aria-hidden="true"></span>

        <input type="text" id="search-bar--hidden-button" placeholder="Placeholder" />

    </div>
    <button type="button" class="btn btn-default sr-only">
        Button
    </button>
</div>
<div class="dso-search-bar">
  <div class="dso-search-bar-input">
    {# zichtbaar label met icon #}
    {% if label and icon and not hiddenLabel -%}
      <label for="{{ _self.handle }}">
        {{- label -}}
      </label>
      <span class="dso-search-icon" aria-hidden="true"></span>
    {# zichtbaar label zonder icon #}
    {% elif label and not icon and not hiddenLabel -%}
      <label for="{{ _self.handle }}">
        {{- label -}}
      </label>
    {# verborgen label met icon #}
    {% elif label and hiddenLabel and icon -%}
      <label for="{{ _self.handle }}" {{ className('dso-search-icon') }}>
        {{- label -}}
      </label>
    {# verborgen label zonder icon #}
    {% elif label and hiddenLabel and not icon -%}
      <label for="{{ _self.handle }}" {{ className([hiddenLabel, 'sr-only']) }}>
        {{- label -}}
      </label>
    {# geen label met icon #}
    {% elif not label and not hiddenLabel and icon -%}
      <span class="dso-search-icon" aria-hidden="true"></span>
    {%- endif -%}
    <input type="text" {% if label %} id="{{ _self.handle }}"{% endif %} {% if placeholder %} placeholder="{{ placeholder }}"{% endif %} {% if value %} value="{{ value }}"{% endif %} />
    {% if clearButton %}
      <button type="button">
        Zoekopdracht legen
      </button>
    {% endif %}
  </div>
  <button type="button" {{ className('btn btn-default', [hideSearchButton, 'sr-only']) }}>
    Button
  </button>
</div>
/* Default */
__title: Zichtbaar label met icoon
placeholder: Placeholder
icon: true
label: Label
/* Label No Icon */
__title: 'Zichtbaar label, geen icon'
placeholder: Placeholder
icon: false
label: Label
/* Hidden Label Icon */
__title: Verborgen label met icon
placeholder: Placeholder
icon: true
label: Label
hiddenLabel: true
/* Hidden Label No Icon */
__title: 'verborgen label, geen icon'
placeholder: Placeholder
icon: false
label: Label
hiddenLabel: true
/* No Label Icon */
__title: 'Geen label, wel icon'
placeholder: Placeholder
icon: true
label: ''
/* No Label No Icon */
__title: 'Geen label, geen icon'
placeholder: Placeholder
icon: false
label: false
/* With Value */
__title: Met waarde
placeholder: Placeholder
icon: true
label: Label
value: Waarde
clearButton: true
/* Hidden Button */
__title: Verborgen knop
placeholder: Placeholder
icon: true
label: Label
hideSearchButton: true