Filteren

List Button

There are no notes for this item.

<!-- Default -->
<button type="button" class="btn dso-list-button">

    <span>Milieubelastende activiteit - Melding</span>

</button>

<!-- Button Selected -->
<button type="button" class="btn dso-list-button dso-selected">

    <span>Milieubelastende activiteit - Melding</span>
    <svg class="di di-check">
        <use href="../../dso-icons.svg#check" />
    </svg>

    <span class="sr-only">geselecteerd</span>

</button>

<!-- Button Multiple Selected -->
<button type="button" class="btn dso-list-button dso-selected">

    <span>Milieubelastende activiteit - Melding</span>

    <span class="dso-count">99x</span>
    <span class="sr-only">geselecteerd</span>

</button>

<!-- Button Disabled -->
<button type="button" class="btn dso-list-button" disabled>

    <span>Milieubelastende activiteit - Melding</span>

</button>

<!-- Button Met Optionele Tekst -->
<button type="button" class="btn dso-list-button">

    <span>Milieubelastende activiteit - Melding</span>

    <span class="dso-sublabel">Gemeente Delft</span>
</button>

<!-- Button Met Optionele Tekst Selected -->
<button type="button" class="btn dso-list-button dso-selected">

    <span>Milieubelastende activiteit - Melding</span>
    <svg class="di di-check">
        <use href="../../dso-icons.svg#check" />
    </svg>

    <span class="sr-only">geselecteerd</span>
    <span class="dso-sublabel">Gemeente Delft</span>
</button>

<!-- Button Met Optionele Tekst Multiple Selected -->
<button type="button" class="btn dso-list-button dso-selected">

    <span>Milieubelastende activiteit - Melding</span>

    <span class="dso-count">99x</span>
    <span class="sr-only">geselecteerd</span>
    <span class="dso-sublabel">Gemeente Delft</span>
</button>

<!-- Button Met Optionele Tekst Disabled -->
<button type="button" class="btn dso-list-button" disabled>

    <span>Milieubelastende activiteit - Melding</span>

    <span class="dso-sublabel">Gemeente Delft</span>
</button>

<button type="{{ type }}" {{ className('btn', 'dso-list-button', [count > 0, 'dso-selected']) }} {% if disabled %} disabled{% endif %}>

  <span>{{ label }}</span>
  {% if (count == 1) %}{% render '@icon', {icon: 'check'} %}{% endif %}
  {% if (count > 1) %}<span class="dso-count">{{ count }}x</span>{% endif %}
  {% if (count > 0) %}<span class="sr-only">geselecteerd</span>{% endif %}
  {% if sublabel %}<span class="dso-sublabel">{{ sublabel }}</span>{% endif %}
</button>

/* Default */
__title: default
type: button
label: Milieubelastende activiteit - Melding

/* Button Selected */
__title: button selected
type: button
label: Milieubelastende activiteit - Melding
count: 1

/* Button Multiple Selected */
__title: button multiple selected
type: button
label: Milieubelastende activiteit - Melding
count: 99

/* Button Disabled */
__title: button disabled
type: button
label: Milieubelastende activiteit - Melding
disabled: true

/* Button Met Optionele Tekst */
__title: button met optionele tekst
type: button
label: Milieubelastende activiteit - Melding
sublabel: Gemeente Delft

/* Button Met Optionele Tekst Selected */
__title: button met optionele tekst selected
type: button
label: Milieubelastende activiteit - Melding
count: 1
sublabel: Gemeente Delft

/* Button Met Optionele Tekst Multiple Selected */
__title: button met optionele tekst multiple selected
type: button
label: Milieubelastende activiteit - Melding
count: 99
sublabel: Gemeente Delft

/* Button Met Optionele Tekst Disabled */
__title: button met optionele tekst disabled
type: button
label: Milieubelastende activiteit - Melding
disabled: true
sublabel: Gemeente Delft