Icon
Mit Hilfe der Icon-Komponente können Icons aus eingebundenen Icon-Fonts an beliebigen Positionen dargestellt werden. Die Ausgabe des Icon kann über das Attribut _icon gesteuert werden und erfolgt durch das Attribut _label barrierefrei. Die Ausgabe erfolgt standardmäßig als inline-Element.
Aktuell werden die Icons von
index.html) die CSS-Dateie(n) der Icon-Font(s) eingebunden ist/sind.Konstruktion
Die Komponente Icon wird über das HTML-Tag kol-icon erzeugt.
Code
<kol-icon _label="Zu Hause" _icons="codicon codicon-home"></kol-icon>
Beispiel
Icons
Die Property _icons erwartet einen String mit den Klassennamen der zu zeigenden Icons (z.B.: _icons="codicon codicon-home).
Barrierefreiheit
Wichtig ist bei Kontext-relevanten Grafiken, dass sie beschriftet werden.
Label
Mittels der Property _label muss ein Kontext-relevantes Icon beschriftet werden.
Links und Referenzen
Mit Hilfe der Icon-Komponente können Icons aus eingebundenen Icon-Fonts an beliebigen Positionen dargestellt werden. Die Ausgabe des Icon kann über das Attribut _icon gesteuert werden und erfolgt durch das Attribut _label barrierefrei. Die Ausgabe erfolgt standardmäßig als inline-Element.
Aktuell werden die Icons von
index.html) die CSS-Dateie(n) der Icon-Font(s) eingebunden ist/sind.Konstruktion
Die Komponente Icon wird über das HTML-Tag kol-icon erzeugt.
Code
<kol-icon _label="Zu Hause" _icons="codicon codicon-home"></kol-icon>
Beispiel
Icons
Die Property _icons erwartet einen String mit den Klassennamen der zu zeigenden Icons (z.B.: _icons="codicon codicon-home).
Barrierefreiheit
Wichtig ist bei Kontext-relevanten Grafiken, dass sie beschriftet werden.
Label
Mittels der Property _label muss ein Kontext-relevantes Icon beschriftet werden.
Links und Referenzen
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_icons (required) | _icons | Defines the icon classnames (e.g. _icons="fa-solid fa-user"). | string | undefined |
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined |
Shadow Parts
| Part | Description |
|---|---|
"icon" | Ermöglicht das Styling des inneren Icons. |