DSO Toolkit homepage

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>

    <dso-icon icon="check"></dso-icon>

    <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>
    <span class="dso-sublabel">Gemeente Delft</span>
    <dso-icon icon="check"></dso-icon>

    <span class="sr-only">geselecteerd</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-sublabel">Gemeente Delft</span>

    <span class="dso-count">99x</span>
    <span class="sr-only">geselecteerd</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 sublabel %}<span class="dso-sublabel">{{ sublabel }}</span>{% endif %}
  {% if (count == 1) -%}
    <dso-icon icon="check"></dso-icon>
  {%- endif %}
  {% if (count > 1) %}<span class="dso-count">{{ count }}x</span>{% endif %}
  {% if (count > 0) %}<span class="sr-only">geselecteerd</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