DSO Toolkit homepage

Group Search Bar

There are no notes for this item.

<!-- Default -->
<div class="form-group dso-filter">
    <div class="dso-label-container">
        <label for="search-bar" class="control-label">
            Activiteit
        </label>

    </div>
    <div class="dso-field-container">
        <div class="dso-search-bar">
            <div class="dso-search-bar-input">

                <span class="dso-search-icon" aria-hidden="true"></span><input type="text" id="search-bar" placeholder="Bv. boomkap" />

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

            </div>
            <button type="button" class="btn btn-default sr-only">
                Button
            </button>
        </div>

    </div>

</div>
<!-- Search Bar Infobutton -->
<div class="form-group dso-filter">
    <div class="dso-label-container">
        <label for="search-bar-infobutton" class="control-label">
            Activiteit
        </label>

        <button type="button" class="btn dso-info-button" aria-expanded="false">
            <span class="sr-only">
                Toelichting
            </span>
        </button>

    </div>
    <div class="dso-field-container">
        <div class="dso-search-bar">
            <div class="dso-search-bar-input">

                <span class="dso-search-icon" aria-hidden="true"></span><input type="text" id="search-bar-infobutton" placeholder="Bv. boomkap" />

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

            </div>
            <button type="button" class="btn btn-default sr-only">
                Button
            </button>
        </div>

    </div>

</div>
<!-- Search Bar Infobutton Expanded -->
<div class="form-group dso-filter">
    <div class="dso-label-container">
        <label for="search-bar-infobutton-expanded" class="control-label">
            Activiteit
        </label>

        <button type="button" class="btn dso-info-button dso-open" aria-expanded="true">
            <span class="sr-only">
                Toelichting
            </span>
        </button>

    </div>
    <div class="dso-field-container">
        <div class="dso-search-bar">
            <div class="dso-search-bar-input">

                <span class="dso-search-icon" aria-hidden="true"></span><input type="text" id="search-bar-infobutton-expanded" placeholder="Bv. boomkap" />

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

            </div>
            <button type="button" class="btn btn-default sr-only">
                Button
            </button>
        </div>

    </div>

    <div class="dso-info">
        <button type="button">
            <span class="sr-only">Sluiten</span>
        </button>
        <div class="dso-rich-content">
            <h4>Heading 4</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
                Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
                Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
            </p>

        </div>
    </div>

</div>
<!-- Search Bar Error -->
<div class="form-group dso-filter dso-invalid">
    <div class="dso-label-container">
        <label for="search-bar-error" class="control-label">
            Activiteit
        </label>

    </div>
    <div class="dso-field-container">
        <div class="dso-search-bar">
            <div class="dso-search-bar-input">

                <span class="dso-search-icon" aria-hidden="true"></span><input type="text" id="search-bar-error" placeholder="Bv. boomkap" />

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

            </div>
            <button type="button" class="btn btn-default sr-only">
                Button
            </button>
        </div>

        <p class="dso-message">Vul dit veld in.</p>

    </div>

</div>
<!-- Search Bar Help -->
<div class="form-group dso-filter">
    <div class="dso-label-container">
        <label for="search-bar-help" class="control-label">
            Activiteit
        </label>

    </div>
    <div class="dso-field-container">
        <div class="dso-search-bar">
            <div class="dso-search-bar-input">

                <span class="dso-search-icon" aria-hidden="true"></span><input type="text" id="search-bar-help" placeholder="Bv. boomkap" />

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

            </div>
            <button type="button" class="btn btn-default sr-only">
                Button
            </button>
        </div>

        <p class="dso-help-block" id="helpTextId_search-bar-help">Type en selecteer de activiteit</p>

    </div>

</div>
{% set localId = generateLocalId(prefix, id) %}

<div {{ className('form-group dso-filter', [type, 'dso-input-' + type], [inputIcon, 'has-feedback'], [state, 'dso-' + state], [required, 'dso-required']) }}>
  <div class="dso-label-container">
    <label for="{{ localId }}" class="control-label">
      {{ label }}
    </label>
    {% if infoText %}
      {% render '@info-button', {infoOpen: infoOpen} %}
    {% endif %}
  </div>
  <div class="dso-field-container">
    {% render '@search-bar', merge(searchBar, {id: generateLocalId(prefix, searchBar.id)}) %}
    {% if inputIcon %}
      <span class="form-control-feedback" aria-hidden="true">
        {%- render '@icon', {icon: inputIcon} -%}
      </span>
    {% endif %}
    {% if errorText %}
      {% render '@error-block', {errorText: errorText} %}
    {% endif %}
    {% if helpText %}
      {% render '@help-block', {helpText: helpText, id: localId} %}
    {% endif %}
  </div>
  {% if infoOpen %}
    {% render '@info', {infoText: infoText} %}
  {% endif %}
</div>
/* Default */
__title: default
id: search-bar
label: Activiteit
searchBar:
  id: search-bar
  type: text
  clearButton: true
  hideSearchButton: true
  icon: true
  placeholder: Bv. boomkap
/* Search Bar Infobutton */
__title: Infobutton ingeklapt
id: search-bar-infobutton
label: Activiteit
searchBar:
  id: search-bar-infobutton
  type: text
  clearButton: true
  hideSearchButton: true
  icon: true
  placeholder: Bv. boomkap
__explanation:
  - Toelichting ingeklapt
infoOpen: false
infoText: |
  Closed

/* Search Bar Infobutton Expanded */
__title: Infobutton uitgeklapt
id: search-bar-infobutton-expanded
label: Activiteit
searchBar:
  id: search-bar-infobutton-expanded
  type: text
  clearButton: true
  hideSearchButton: true
  icon: true
  placeholder: Bv. boomkap
__explanation:
  - Toelichting uitgeklapt
infoOpen: true
infoText: |
  <h4>Heading 4</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
    Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
    Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
  </p>

/* Search Bar Error */
__title: Foutmelding
id: search-bar-error
label: Activiteit
searchBar:
  id: search-bar-error
  type: text
  clearButton: true
  hideSearchButton: true
  icon: true
  placeholder: Bv. boomkap
__explanation:
  - >-
    Indien een input ongeldig is, dient er een <code>.dso-invalid</code> class
    gezet te worden op de div met de class <code>.dso-input</code>.
state: invalid
errorText: Vul dit veld in.
/* Search Bar Help */
__title: Help teskt
id: search-bar-help
label: Activiteit
searchBar:
  id: search-bar-help
  type: text
  clearButton: true
  hideSearchButton: true
  icon: true
  placeholder: Bv. boomkap
__explanation:
  - >-
    Indien een input ongeldig is, dient er een <code>.dso-invalid</code> class
    gezet te worden op de div met de class <code>.dso-input</code>.
helpText: Type en selecteer de activiteit