Label Group

Component preview opent in nieuw tabblad

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