Label Group

Component preview

<!-- Default -->
<div class="dso-label-group">

    <span class="dso-label">

        Label tekst 1

        <button type="button" title="Verwijder">
            <dso-icon icon="times"></dso-icon>

        </button>

    </span>

    <span class="dso-label dso-label-success">

        <span class="sr-only">success: </span>

        Label tekst 2

        <button type="button" title="Verwijder">
            <dso-icon icon="times"></dso-icon>

        </button>

    </span>

    <span class="dso-label dso-label-primary">

        <span class="sr-only">primary: </span>

        Label tekst 3

        <button type="button" title="Verwijder">
            <dso-icon icon="times"></dso-icon>

        </button>

    </span>

    <span class="dso-label dso-label-info">

        <span class="sr-only">info: </span>

        Label tekst 4

        <button type="button" title="Verwijder">
            <dso-icon icon="times"></dso-icon>

        </button>

    </span>

    <span class="dso-label dso-label-warning">

        <span class="sr-only">warning: </span>

        Label tekst 5

        <button type="button" title="Verwijder">
            <dso-icon icon="times"></dso-icon>

        </button>

    </span>

    <span class="dso-label dso-label-danger">

        <span class="sr-only">danger: </span>

        Label tekst 6

        <button type="button" title="Verwijder">
            <dso-icon icon="times"></dso-icon>

        </button>

    </span>

    <span class="dso-label">

        Label tekst 7

        <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 tekst 1

        <button type="button" title="Verwijder">
            <dso-icon icon="times"></dso-icon>

        </button>

    </span>

    <span class="dso-label dso-label-success">

        <span class="sr-only">success: </span>

        Label tekst 2

        <button type="button" title="Verwijder">
            <dso-icon icon="times"></dso-icon>

        </button>

    </span>

    <span class="dso-label dso-label-primary">

        <span class="sr-only">primary: </span>

        Label tekst 3

        <button type="button" title="Verwijder">
            <dso-icon icon="times"></dso-icon>

        </button>

    </span>

    <span class="dso-label dso-label-info">

        <span class="sr-only">info: </span>

        Label tekst 4

        <button type="button" title="Verwijder">
            <dso-icon icon="times"></dso-icon>

        </button>

    </span>

    <span class="dso-label dso-label-warning">

        <span class="sr-only">warning: </span>

        Label tekst 5

        <button type="button" title="Verwijder">
            <dso-icon icon="times"></dso-icon>

        </button>

    </span>

    <span class="dso-label dso-label-danger">

        <span class="sr-only">danger: </span>

        Label tekst 6

        <button type="button" title="Verwijder">
            <dso-icon icon="times"></dso-icon>

        </button>

    </span>

    <span class="dso-label">

        Label tekst 7

        <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 tekst 1</dso-label>

    <dso-label status="success" removable>Label tekst 2</dso-label>

    <dso-label status="primary" removable>Label tekst 3</dso-label>

    <dso-label status="info" removable>Label tekst 4</dso-label>

    <dso-label status="warning" removable>Label tekst 5</dso-label>

    <dso-label status="danger" removable>Label tekst 6</dso-label>

    <dso-label removable>Label tekst 7</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 + ' ' + loop.index, 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 + ' ' + loop.index, 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 + ' ' + loop.index }}</dso-label>
  {% endfor %}
</div>

/* Default */
__title: default
labels:
  - label: Label tekst
  - label: Label tekst
    status: success
  - label: Label tekst
    status: primary
  - label: Label tekst
    status: info
  - label: Label tekst
    status: warning
  - label: Label tekst
    status: danger
  - label: Label tekst
  - label: Label tekst
  - label: Label tekst
  - label: Label tekst
  - label: Label tekst
  - label: Label tekst

/* Align Right */
__title: Rechts uitlijnen
labels:
  - label: Label tekst
  - label: Label tekst
    status: success
  - label: Label tekst
    status: primary
  - label: Label tekst
    status: info
  - label: Label tekst
    status: warning
  - label: Label tekst
    status: danger
  - label: Label tekst
  - label: Label tekst
  - label: Label tekst
  - label: Label tekst
  - label: Label tekst
  - label: Label tekst
modifiers: dso-align-right

/* Wc */
__title: with Label Web Component
labels:
  - label: Label tekst
  - label: Label tekst
    status: success
  - label: Label tekst
    status: primary
  - label: Label tekst
    status: info
  - label: Label tekst
    status: warning
  - label: Label tekst
    status: danger
  - label: Label tekst
  - label: Label tekst
  - label: Label tekst
  - label: Label tekst
  - label: Label tekst
  - label: Label tekst