Zum Hauptinhalt springen

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 _aria-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 _aria-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 (required)_aria-labelGibt das Aria-Label am Icon an.stringundefined
_icon (required)_iconSetzt die Iconklasse (z.B.: _icon="codicon codicon-home).stringundefined
_part_part[DEPRECATED] Das Styling sollte stets über CSS erfolgen.

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.

Dependencies​

Used by​

Graph​

Live-Editor​

Beispiele​