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>

    <div class="dropdown-menu">

        <h2 class="dso-group-label">Versies</h2>

        <ul aria-labelledby="actie_open">

            <li>
                <a href="#">10.6.0</a>
            </li>

            <li>
                <a href="#">10.5.0</a>
            </li>

            <li>
                <a href="#">10.4.0</a>
            </li>

        </ul>

        <ul aria-labelledby="actie_open">

            <li>
                <a href="#">master</a>
            </li>

        </ul>

        <h2 class="dso-group-label">Branch releases</h2>

        <ul aria-labelledby="actie_open">

            <li>
                <a href="#">#500-Margins-Testbuilds</a>
            </li>

            <li>
                <a href="#">#611-Pager-component-uitbreiden</a>
            </li>

            <li>
                <a href="#">#663-Dropdown-button-toegankelijk-maken</a>
            </li>

        </ul>

    </div>

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

    <div class="dropdown-menu dso-checkable">

        <h2 class="dso-group-label">Versies</h2>

        <ul aria-labelledby="actie_open_checkable">

            <li class="dso-checked">
                <a href="#">10.6.0</a>
            </li>

            <li>
                <a href="#">10.5.0</a>
            </li>

            <li>
                <a href="#">10.4.0</a>
            </li>

        </ul>

        <ul aria-labelledby="actie_open_checkable">

            <li>
                <a href="#">master</a>
            </li>

        </ul>

        <h2 class="dso-group-label">Branch releases</h2>

        <ul aria-labelledby="actie_open_checkable">

            <li>
                <a href="#">#500-Margins-Testbuilds</a>
            </li>

            <li>
                <a href="#">#611-Pager-component-uitbreiden</a>
            </li>

            <li>
                <a href="#">#663-Dropdown-button-toegankelijk-maken</a>
            </li>

        </ul>

    </div>

</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 %}
    <div {{ className('dropdown-menu', modifiers) }}>
      {% for group in groups %}
        {% if group.label %}
          <h2 class="dso-group-label">{{ group.label }}</h2>
        {% endif %}
        <ul aria-labelledby="{{ id }}">
          {% for item in group.items %}
            <li {{ className([item.checked, 'dso-checked']) }}>
              <a href="#">{{ item.label }}</a>
            </li>
          {% endfor %}
        </ul>
      {% endfor %}
    </div>
  {% endif %}
</div>

/* Dropdown */
id: actie
open: false
label: Actie

/* Dropdown Open */
id: actie_open
open: true
label: Actie
groups:
  - label: Versies
    items:
      - label: 10.6.0
      - label: 10.5.0
      - label: 10.4.0
  - items:
      - label: master
  - label: Branch releases
    items:
      - label: '#500-Margins-Testbuilds'
      - label: '#611-Pager-component-uitbreiden'
      - label: '#663-Dropdown-button-toegankelijk-maken'

/* Dropdown Open Check */
id: actie_open_checkable
open: true
label: Actie
modifiers: dso-checkable
groups:
  - label: Versies
    items:
      - label: 10.6.0
        checked: true
      - label: 10.5.0
      - label: 10.4.0
  - items:
      - label: master
  - label: Branch releases
    items:
      - label: '#500-Margins-Testbuilds'
      - label: '#611-Pager-component-uitbreiden'
      - label: '#663-Dropdown-button-toegankelijk-maken'