DSO Toolkit | Component Library

Dropdown Button 

<!-- Dropdown -->
<div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" id="actie" aria-haspopup="true" aria-expanded="false">Actie</button>
</div>


<!-- Dropdown Open -->
<div class="dropdown open">
    <button type="button" class="btn btn-default dropdown-toggle" id="actie_open" aria-haspopup="true" aria-expanded="true">Actie</button>
    <ul class="dropdown-menu" aria-labelledby="actie_open">
        <li>
            <a href="#">Actie</a>
        </li>
        <li>
            <a href="#">Andere actie</a>
        </li>
        <li>
            <a href="#">Nog iets anders hier</a>
        </li>
        <li role="separator" class="divider"></li>
        <li>
            <a href="#">Gescheiden link</a>
        </li>
    </ul>
</div>


<!-- Dropdown Open Check -->
<div class="dropdown open">
    <button type="button" class="btn btn-default dropdown-toggle" id="actie_open_checkable" aria-haspopup="true" aria-expanded="true">Actie</button>
    <ul class="dropdown-menu dso-checkable" aria-labelledby="actie_open_checkable">
        <li class="dso-checked">
            <a href="#">Actie</a>
        </li>
        <li>
            <a href="#">Andere actie</a>
        </li>
        <li>
            <a href="#">Nog iets anders hier</a>
        </li>
        <li role="separator" class="divider"></li>
        <li>
            <a href="#">Gescheiden link</a>
        </li>
    </ul>
</div>


<div class="dropdown{{#if open }} open{{/if}}">
  <button type="button" class="btn btn-default dropdown-toggle" id="{{ id }}" aria-haspopup="true" aria-expanded="{{#if open }}true{{else}}false{{/if}}">{{ label }}</button>
  {{#if open }}
    <ul class="dropdown-menu{{#if modifiers}} {{ modifiers }}{{/if}}" aria-labelledby="{{ id }}">
      {{#each items }}
        {{#unless @first }}
          <li role="separator" class="divider"></li>
        {{/unless}}
        {{#each this }}
          <li{{#if checked}} class="dso-checked"{{/if}}>
            <a href="#">{{ this.label }}</a>
          </li>
        {{/each}}
      {{/each}}
    </ul>
  {{/if}}
</div>
 
/* Dropdown */
id: actie
open: null
label: Actie



/* Dropdown Open */
id: actie_open
open: true
label: Actie
items:
  - - label: Actie
    - label: Andere actie
    - label: Nog iets anders hier
  - - label: Gescheiden link



/* Dropdown Open Check */
id: actie_open_checkable
open: true
label: Actie
modifiers: dso-checkable
items:
  - - label: Actie
      checked: true
    - label: Andere actie
    - label: Nog iets anders hier
  - - label: Gescheiden link

Toont een dropdown met daarin een gevulde uitklapper. Gebaseerd op de Bootstrap “Dropdowns” component