Zum Inhalt springen
GEDISA UI

Dokumentation

Komponenten

Tags

Kompakte, interaktive Kennzeichnungen für ausgewählte Werte, Filter und Personen.

Verwendung

Ein Tag stellt einen ausgewählten oder zugeordneten Wert dar. Anders als ein Badge kann ein Tag entfernt, gezählt oder per Checkbox ausgewählt werden.

Standard-Tag
Label
blade 
<gedisa:tag>Label</gedisa:tag>

Größen

Drei Größen passen das Tag an die Dichte der Oberfläche an. Der Standard ist md.

Small, Medium und Large
Small Medium Large
blade 
<gedisa:tag size="sm">Small</gedisa:tag>
<gedisa:tag>Medium</gedisa:tag>
<gedisa:tag size="lg">Large</gedisa:tag>

Führende Inhalte

Mit flag, avatar oder dot erhält das Tag einen führenden Inhalt. Pro Tag wird genau einer davon angezeigt.

Flagge
Australien Deutschland Österreich
blade 
<gedisa:tag size="sm" flag="AU">Australien</gedisa:tag>
<gedisa:tag flag="DE">Deutschland</gedisa:tag>
<gedisa:tag size="lg" flag="AT">Österreich</gedisa:tag>
Avatar
Olivia Rhye
Phoenix Baker
Lana Steiner
blade 
<gedisa:tag size="sm" avatar="https://i.pravatar.cc/64?img=47">Olivia Rhye</gedisa:tag>
<gedisa:tag avatar="https://i.pravatar.cc/64?img=12">Phoenix Baker</gedisa:tag>
<gedisa:tag size="lg" avatar="https://i.pravatar.cc/64?img=32">Lana Steiner</gedisa:tag>
Dot
Aktiv Aktiv Aktiv
blade 
<gedisa:tag size="sm" dot>Aktiv</gedisa:tag>
<gedisa:tag dot>Aktiv</gedisa:tag>
<gedisa:tag size="lg" dot>Aktiv</gedisa:tag>

Mit Close-Button

Füge dem Tag mit gedisa:tag.close einen Button zum Entfernen hinzu. Aktionen wie wire:click werden an den Button weitergereicht.

Entfernbare Tags
Label Label Label
blade 
<gedisa:tag size="sm">
    Label
    <gedisa:tag.close />
</gedisa:tag>
<gedisa:tag>
    Label
    <gedisa:tag.close />
</gedisa:tag>
<gedisa:tag size="lg">
    Label
    <gedisa:tag.close />
</gedisa:tag>

Zähler

Mit count zeigt das Tag eine Anzahl, zum Beispiel die Treffer eines Filters.

Tags mit Zähler
Label 5 Label 5 Label 5
blade 
<gedisa:tag size="sm" count="5">Label</gedisa:tag>
<gedisa:tag count="5">Label</gedisa:tag>
<gedisa:tag size="lg" count="5">Label</gedisa:tag>

Checkbox

Mit checkbox wird das Tag auswählbar. wire:model, name, value, checked und disabled werden an die Checkbox weitergereicht, ein Klick auf das Tag schaltet sie um.

Auswählbare Tags
 Label
Label
Label
blade 
<gedisa:tag size="sm" checkbox>Label</gedisa:tag>
<gedisa:tag checkbox checked>Label</gedisa:tag>
<gedisa:tag size="lg" checkbox>Label</gedisa:tag>

Kombinationen

Checkbox, führende Inhalte und Aktionen lassen sich kombinieren.

Checkbox mit Flagge, Avatar und Dot
 Australien
Olivia Rhye
Aktiv 5
blade 
<gedisa:tag checkbox flag="AU">
    Australien
    <gedisa:tag.close />
</gedisa:tag>
<gedisa:tag checkbox avatar="https://i.pravatar.cc/64?img=47">
    Olivia Rhye
    <gedisa:tag.close />
</gedisa:tag>
<gedisa:tag checkbox dot count="5">Aktiv</gedisa:tag>

Referenz

Diese Übersicht umfasst die oben gezeigten Attribute und die Close-Unterkomponente.

gedisa:tag

Eigenschaft
Werte
Default
size Tag-Größen sm, md, lg md
flag Ländercode für eine runde Flagge, z. B. AU
avatar Bild-URL für einen runden Avatar
dot Attribut für einen führenden Status-Dot
count Zahl, die als Zähler am Ende angezeigt wird
checkbox Attribut für ein auswählbares Tag mit Checkbox
wire:model, name, value, checked, disabled werden bei checkbox an die Checkbox weitergereicht

gedisa:tag.close

Eigenschaft
Werte
Default
label Zugänglicher Name des Buttons Entfernen
wire:click, x-on:click Aktion beim Entfernen des Tags