DSO Component Library

# Split Button Dropdown

WIP

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <!-- Default -->
    <div class="btn-group ">
        <button type="button" class="btn btn-default">Actie</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
        <ul class="dropdown-menu">
            <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>

    <!-- Buttongrouplarge -->
    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-default">Actie</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
        <ul class="dropdown-menu">
            <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>

    <!-- Buttongroupsmall -->
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-default">Actie</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
        <ul class="dropdown-menu">
            <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>

    <!-- Buttongroupextrasmall -->
    <div class="btn-group btn-group-xs">
        <button type="button" class="btn btn-default">Actie</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
        <ul class="dropdown-menu">
            <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="btn-group {{ sizing }}">
      <button type="button" class="btn {{ modifier }}">{{ button-label }}</button>
      <button type="button" class="btn {{ modifier }} dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">{{ dropdown-label }}</span>
      </button>
      <ul class="dropdown-menu">
        {{#each items }}
          {{#unless @first }}
            <li role="separator" class="divider"></li>
          {{/unless}}
          {{#each this }}
            <li>
              <a href="#">{{ this }}</a>
            </li>
          {{/each}}
        {{/each}}
      </ul>
    </div>

`
`

    /* Default */
    button-label: Actie
    modifier: btn-default
    dropdown-label: Toggle Dropdown
    items:
      - - Actie
        - Andere actie
        - Nog iets anders hier
      - - Gescheiden link

    /* Buttongrouplarge */
    button-label: Actie
    modifier: btn-default
    dropdown-label: Toggle Dropdown
    items:
      - - Actie
        - Andere actie
        - Nog iets anders hier
      - - Gescheiden link
    sizing: btn-group-lg

    /* Buttongroupsmall */
    button-label: Actie
    modifier: btn-default
    dropdown-label: Toggle Dropdown
    items:
      - - Actie
        - Andere actie
        - Nog iets anders hier
      - - Gescheiden link
    sizing: btn-group-sm

    /* Buttongroupextrasmall */
    button-label: Actie
    modifier: btn-default
    dropdown-label: Toggle Dropdown
    items:
      - - Actie
        - Andere actie
        - Nog iets anders hier
      - - Gescheiden link
    sizing: btn-group-xs

`

- Handle: @split-button-dropdown
- Variants (4): Default , Buttongrouplarge , Buttongroupsmall , Buttongroupextrasmall
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\03-forms\10-misc\split-button-dropdown\split-button-dropdown.hbs

There are no notes for this item.

### WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

`<button type="button" class="btn btn-default">Actie</button>`

### NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

`<title>Split Button Dropdown`

### NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81

Check that the link text combined with programmatically determined link context identifies the purpose of the link.

`<a href="#">Actie</a>`

### NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

`<button type="button" class="btn btn-default">Actie</button>`