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.
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
Component | Available from | Slot name | Without slot name |
---|---|---|---|
Badge | - | expert | |
Button | 1.1.10 | expert | |
ButtonLink | 1.1.15 | expert | |
ButtonToggle | - | expert | |
InputCheckbox | - | expert |
| * |
InputDate | - | expert |
| * |
InputEmail | - | expert |
| * |
InputNumber | - | expert |
| * |
InputPassword | - | expert |
| * |
InputRange | - | expert |
| * |
InputRadio | - | expert |
| * |
InputText | - | expert |
| * |
Select | - | expert |
| * |
Textarea | - | expert |
| * |
Link | 1.1.16 | expert |
| * |
LinkButton | 1.1.16 | expert |
| * |
Span | 1.1.10 | expert | |
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:
<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.