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" _icon="codicon codicon-home"></kol-icon>
Beispiel
Icon
Das Icon (_icon) kann entweder als String angegeben werden, oder als Objekt. Als String übergeben Sie die Iconklasse (z.B.: _icon="codicon codicon-home), das Icon wird links vom Text angezeigt. Das Objekt ist vom Typ KoliBriAllIcon, kann also einen oder mehrere der Schlüssel top, right, bottom und left besitzen. Diese sind dann entweder String (siehe oben) oder ein Objekt vom Typ KoliBriCustomIcon, welches aus icon (String, siehe oben) und style (optional, Styleobjekt) besteht.
Barrierefreiheit
Wichtig ist bei Kontext-relevanten Grafiken, dass sie beschriftet werden.
Aria-Label
Mittels der Auszeichnung aria-label muss ein Kontext-relevantes Icon beschriftet werden.
Links und Referenzen
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_ariaLabel | _aria-label | [DEPRECATED] use _label instead Deprecated: Setzt die semantische Beschriftung der Komponente. | string | undefined | undefined |
_icon (required) | _icon | Defines the icon classnames (e.g. _icon="fa-solid fa-user"). | string | undefined |
_label | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined | undefined |
_part | _part | [DEPRECATED] Das Styling sollte stets über CSS erfolgen. Deprecated: Gibt den Identifier für den CSS-Part an, um das Icon von Außen ändern zu können. (https://meowni.ca/posts/part-theme-explainer/) | string | undefined | undefined |
Shadow Parts
| Part | Description |
|---|---|
"icon" | Ermöglicht das Styling des inneren Icons. |
Dependencies
Used by
- kol-alert-wc
- kol-breadcrumb
- kol-details
- kol-icon-font-awesome
- kol-icon-icofont
- kol-input
- kol-input-checkbox
- kol-link-wc
- kol-span-wc