There are no notes for this item.
<!-- Default -->
<div class="dso-label-group">
<span class="dso-label">
Label (standaard)
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label dso-label-success">
<span class="sr-only">Gelukt: </span>
Label (succes)
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label dso-label-primary">
Label (primair)
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label dso-label-info">
<span class="sr-only">Opmerking: </span>
Label (opmerking)
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label dso-label-warning">
<span class="sr-only">Waarschuwing: </span>
Label (waarschuwing)
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label dso-label-danger">
<span class="sr-only">Fout: </span>
Label (fout)
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label dso-label-bright">
Label (helder)
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label">
Label tekst 8
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label">
Label tekst 9
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label">
Label tekst 10
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label">
Label tekst 11
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label">
Label tekst 12
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
</div>
<!-- Align Right -->
<div class="dso-label-group dso-align-right">
<span class="dso-label">
Label (standaard)
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label dso-label-success">
<span class="sr-only">Gelukt: </span>
Label (succes)
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label dso-label-primary">
Label (primair)
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label dso-label-info">
<span class="sr-only">Opmerking: </span>
Label (opmerking)
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label dso-label-warning">
<span class="sr-only">Waarschuwing: </span>
Label (waarschuwing)
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label dso-label-danger">
<span class="sr-only">Fout: </span>
Label (fout)
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label dso-label-bright">
Label (helder)
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label">
Label tekst 8
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label">
Label tekst 9
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label">
Label tekst 10
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label">
Label tekst 11
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
<span class="dso-label">
Label tekst 12
<button type="button" title="Verwijder">
<dso-icon icon="times"></dso-icon>
</button>
</span>
</div>
<!-- Wc -->
<div class="dso-label-group">
<dso-label removable>Label (standaard)</dso-label>
<dso-label status="success" removable>Label (succes)</dso-label>
<dso-label status="primary" removable>Label (primair)</dso-label>
<dso-label status="info" removable>Label (opmerking)</dso-label>
<dso-label status="warning" removable>Label (waarschuwing)</dso-label>
<dso-label status="danger" removable>Label (fout)</dso-label>
<dso-label status="bright" removable>Label (helder)</dso-label>
<dso-label removable>Label tekst 8</dso-label>
<dso-label removable>Label tekst 9</dso-label>
<dso-label removable>Label tekst 10</dso-label>
<dso-label removable>Label tekst 11</dso-label>
<dso-label removable>Label tekst 12</dso-label>
</div>
<!-- Default -->
<div {{ className('dso-label-group', modifiers) }}>
{% for label in labels %}
{% render '@label-css', {label: label.label, removable: true, status: label.status} %}
{% endfor %}
</div>
<!-- Align Right -->
<div {{ className('dso-label-group', modifiers) }}>
{% for label in labels %}
{% render '@label-css', {label: label.label, removable: true, status: label.status} %}
{% endfor %}
</div>
<!-- Wc -->
<div {{ className('dso-label-group', modifiers) }}>
{% for label in labels %}
<dso-label {{ attributes([label.status, 'status', label.status]) }} removable>{{ label.label }}</dso-label>
{% endfor %}
</div>
/* Default */
__title: default
labels:
- label: Label (standaard)
- label: Label (succes)
status: success
- label: Label (primair)
status: primary
- label: Label (opmerking)
status: info
- label: Label (waarschuwing)
status: warning
- label: Label (fout)
status: danger
- label: Label (helder)
status: bright
- label: Label tekst 8
- label: Label tekst 9
- label: Label tekst 10
- label: Label tekst 11
- label: Label tekst 12
/* Align Right */
__title: Rechts uitlijnen
labels:
- label: Label (standaard)
- label: Label (succes)
status: success
- label: Label (primair)
status: primary
- label: Label (opmerking)
status: info
- label: Label (waarschuwing)
status: warning
- label: Label (fout)
status: danger
- label: Label (helder)
status: bright
- label: Label tekst 8
- label: Label tekst 9
- label: Label tekst 10
- label: Label tekst 11
- label: Label tekst 12
modifiers: dso-align-right
/* Wc */
__title: with Label Web Component
labels:
- label: Label (standaard)
- label: Label (succes)
status: success
- label: Label (primair)
status: primary
- label: Label (opmerking)
status: info
- label: Label (waarschuwing)
status: warning
- label: Label (fout)
status: danger
- label: Label (helder)
status: bright
- label: Label tekst 8
- label: Label tekst 9
- label: Label tekst 10
- label: Label tekst 11
- label: Label tekst 12