Label Group

Component preview

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

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

                Label (standaard)

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

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

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

                Label (succes)

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

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

                Label (primair)

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

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

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

                Label (opmerking)

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

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

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

                Label (waarschuwing)

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

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

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

                Label (fout)

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

        <li><span class="dso-label dso-label-bright">

                Label (helder)

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

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

                Label tekst 8

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

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

                Label tekst 9

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

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

                Label tekst 10

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

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

                Label tekst 11

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

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

                Label tekst 12

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

    </ul>
</div>

<!-- Align Right -->
<div class="dso-label-group dso-align-right">
    <ul>

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

                Label (standaard)

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

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

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

                Label (succes)

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

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

                Label (primair)

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

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

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

                Label (opmerking)

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

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

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

                Label (waarschuwing)

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

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

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

                Label (fout)

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

        <li><span class="dso-label dso-label-bright">

                Label (helder)

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

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

                Label tekst 8

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

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

                Label tekst 9

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

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

                Label tekst 10

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

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

                Label tekst 11

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

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

                Label tekst 12

                <button type="button">
                    <span class="sr-only">Verwijder</span>
                    <dso-icon icon="times"></dso-icon>

                </button>

            </span>
        </li>

    </ul>
</div>

<!-- Wc -->
<div class="dso-label-group">
    <ul>

        <li>
            <dso-label removable>Label (standaard)</dso-label>
        </li>

        <li>
            <dso-label status="success" removable>Label (succes)</dso-label>
        </li>

        <li>
            <dso-label status="primary" removable>Label (primair)</dso-label>
        </li>

        <li>
            <dso-label status="info" removable>Label (opmerking)</dso-label>
        </li>

        <li>
            <dso-label status="warning" removable>Label (waarschuwing)</dso-label>
        </li>

        <li>
            <dso-label status="danger" removable>Label (fout)</dso-label>
        </li>

        <li>
            <dso-label status="bright" removable>Label (helder)</dso-label>
        </li>

        <li>
            <dso-label removable>Label tekst 8</dso-label>
        </li>

        <li>
            <dso-label removable>Label tekst 9</dso-label>
        </li>

        <li>
            <dso-label removable>Label tekst 10</dso-label>
        </li>

        <li>
            <dso-label removable>Label tekst 11</dso-label>
        </li>

        <li>
            <dso-label removable>Label tekst 12</dso-label>
        </li>

    </ul>
</div>

<!-- Default -->
<div {{ className('dso-label-group', modifiers) }}>
  <ul>
    {% for label in labels %}
      <li>{% render '@label-css', {label: label.label, removable: true, status: label.status} %}</li>
    {% endfor %}
  </ul>
</div>

<!-- Align Right -->
<div {{ className('dso-label-group', modifiers) }}>
  <ul>
    {% for label in labels %}
      <li>{% render '@label-css', {label: label.label, removable: true, status: label.status} %}</li>
    {% endfor %}
  </ul>
</div>

<!-- Wc -->
<div {{ className('dso-label-group', modifiers) }}>
  <ul>
    {% for label in labels %}
      <li><dso-label {{ attributes([label.status, 'status', label.status]) }} removable>{{ label.label }}</dso-label></li>
    {% endfor %}
  </ul>
</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