DSO Component Library

Dropdown Button 

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="actie" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Actie
    <span class="caret"></span>
  </button>
    <ul class="dropdown-menu" aria-labelledby="actie">
        <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>
 
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="{{ id }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    {{ label }}
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="{{ id }}">
    {{#each items }}
      {{#unless @first }}
        <li role="separator" class="divider"></li>
      {{/unless}}
      {{#each this }}
        <li>
          <a href="#">{{ this }}</a>
        </li>
      {{/each}}
    {{/each}}
  </ul>
</div>
 
id: actie
label: Actie
items:
  - - Actie
    - Andere actie
    - Nog iets anders hier
  - - Gescheiden link
  • Handle: @dropdown-button
  • Preview:
  • Filesystem Path: components\03-forms\10-misc\dropdown-button\dropdown-button.hbs

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