Zum Hauptinhalt springen

Span

Die Span-Komponente wird innerhalb von KoliBri verwendet und ist nicht dafür vorgesehen in der Anwendungsentwicklung direkt verwendet zu werden. Denn der Span ist nur dann wirklich barrierefrei, wenn es in Kombination mit dem Tooltip verwendet wird.

Die Span-Komponente dient dazu innerhalb zahlreicher KoliBri-Komponenten die Text-Icon-Kombination und das Expert-Slot-Konzept einheitlich umzusetzen.

Konstruktion

Code

<kol-span _icon="codicon codicon-home" _label="Text inside the span."></kol-span>

Beispiel

Properties

PropertyAttributeDescriptionTypeDefault
_hideLabel_hide-labelHides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.boolean | undefinedfalse
_icon_icon[DEPRECATED] Use _icons.

KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefinedundefined
_iconOnly_icon-only[DEPRECATED] use _hide-label

Deprecated: Hides the label and shows the description in a Tooltip instead.
boolean | undefinedundefined
_icons_iconsDefines the icon classnames (e.g. _icons="fa-solid fa-user").KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefinedundefined
_label (required)_labelDefines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to false to enable the expert slot.stringundefined