Info Button

Component preview opent in nieuw tabblad

De class .dso-info-open (bij getoonde toelichting) maakt de button groen.

<!-- Default -->
<button type="button" class="btn dso-info-button" aria-expanded="false">
    <span class="sr-only">Toelichting bij optie</span>
</button>
<!-- Toggle Info Active -->
<button type="button" class="btn dso-info-button dso-open" aria-expanded="true">
    <span class="sr-only">Toelichting bij optie</span>
</button>
<button type="button"
  {{ className('btn dso-info-button', [infoOpen, 'dso-open']) }}
  {{ attributes([infoOpen, 'aria-expanded', not(not(infoOpen)), true]) }}
>
  <span class="sr-only">
    {%- if infoButtonLabel -%}
      {{ infoButtonLabel }}
    {%- else -%}
      Toelichting bij deze optie
    {%- endif -%}
  </span>
</button>
/* Default */
__title: default
infoOpen: false
infoButtonLabel: Toelichting bij optie
/* Toggle Info Active */
__title: open
infoOpen: true
infoButtonLabel: Toelichting bij optie