Dropdown Button

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

<!-- 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><span class="dso-group-label">Acties</span></li>

        <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 {{ className('dropdown', [open, 'open']) }}>
  <button type="button" class="btn btn-default dropdown-toggle" id="{{ id }}" aria-haspopup="true" aria-expanded="{% if open %}true{% else %}false{% endif %}">{{ label }}</button>
  {% if open %}
    <ul {{ className('dropdown-menu', modifiers) }} aria-labelledby="{{ id }}">
      {% for group in groups %}
        {% if loop.index0 != 0 %}
          <li role="separator" class="divider"></li>
        {% endif %}
        {% if group.label %}
          <li><span class="dso-group-label">{{ group.label }}</span></li>
        {% endif %}
        {% for item in group.items %}
          <li {{ className([item.checked, 'dso-checked']) }}>
            <a href="#">{{ item.label }}</a>
          </li>
        {% endfor %}
      {% endfor %}
    </ul>
  {% endif %}
</div>
/* Dropdown */
id: actie
open: false
label: Actie
/* Dropdown Open */
id: actie_open
open: true
label: Actie
groups:
  - label: Acties
    items:
      - label: Actie
      - label: Andere actie
      - label: Nog iets anders hier
  - items:
      - label: Gescheiden link
/* Dropdown Open Check */
id: actie_open_checkable
open: true
label: Actie
modifiers: dso-checkable
groups:
  - items:
      - label: Actie
        checked: true
      - label: Andere actie
      - label: Nog iets anders hier
  - items:
      - label: Gescheiden link