Skip to main content

Expert-slot

Motivation

KoliBri

provides self-contained and accessible components and allows the “filling” of the components, usually only via the properties of the components. All incoming property values are validated and mapped to the internal state.

Through this, we retain control over the components and their semantic construction.

However, to further improve the reusability of

KoliBri

, we will extend the flexibility with a so-called expert mode. The expert mode defines the point where the expert gets more design space within the component and in return takes responsibility for accessibility.

"Expert"-slot

The “Expert” slot can be used to “overwrite” the internal construction of some components. If necessary, it is necessary to set the regular required property values of the component to empty.

Component list

ComponentAvailable fromSlot nameWithout slot name
Badge-expert
Button1.1.10expert
ButtonLink1.1.15expert
ButtonToggle-expert
InputCheckbox-expert | *
InputDate-expert | *
InputEmail-expert | *
InputNumber-expert | *
InputPassword-expert | *
InputRange-expert | *
InputRadio-expert | *
InputText-expert | *
Select-expert | *
Textarea-expert | *
Link1.1.16expert | *
LinkButton1.1.16expert | *
Span1.1.10expert
Tooltip-expert

* The blank slot name is only supported due to backwards compatibility up to major release 2.

Beispiel

A button is regularly used as follows:



<KolButton _label="I am a button"></KolButton>

With the Expert slot, the button can now be used in this way:

I am more than just a button

<KolButton _label="">
<span slot="expert">I am more than just a button</span>
</KolButton>

The property slot="expert" enables a traceable handover point and clearly defines the context change.