Skip to main content

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 unterstützt.

Es ist wichtig, dass in der Rahmenseite (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.

Properties

PropertyAttributeDescriptionTypeDefault
_ariaLabel_aria-label[DEPRECATED] use _label instead

Deprecated: Setzt die semantische Beschriftung der Komponente.
string | undefinedundefined
_icon_icon[DEPRECATED] Use _icons.

string | undefinedundefined
_icons_iconsDefines the icon classnames (e.g. _icons="fa-solid fa-user").string | undefinedundefined
_label_labelDefines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).string | undefinedundefined
_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 | undefinedundefined

Shadow Parts

PartDescription
"icon"Ermöglicht das Styling des inneren Icons.

Live-Editor

Beispiele