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>

  
  {% if open %}
    
    
      {% for group in groups %}
        {% if loop.index0 != 0 %}
          
        {% endif %}
        {% if group.label %}
          
  • {{ group.label }}
    • 
        {% endif %}
        {% for item in group.items %}
          
  • 
            {{ item.label }}
          
    • 
        {% endfor %}
      {% endfor %}
    

  {% endif %}

      /* 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