Component Slots

Component Slots are structures used for placing dynamic content within components. Think of a slot as an empty space inside a component that can receive different content or sub-components. This allows you to customize the content while maintaining the component’s basic structure.

For instance, consider a tab component. When the tab content is transformed into a slot element, the contents of the tab can be easily modified and additional elements can be added.

In Kraft Builder, any element that can accept a child element can be transformed into a slot. To do this, select an element within the component, such as a div, go to the settings tab in the right panel, and activate the slot (nested node). Once this is done, append the component to a template. You will notice that the slot element is directly editable, and any element can be added.

The card component with a slot element, as you can see in the screenshot below.

The card component includes a slot element, as shown in the explorer panel.

Kraft Builder has been developed with such details in mind, emphasizing the importance of the DRY (Don’t Repeat Yourself) principle. Repeating elements can lead to a loss of control, so it’s advised to use this principle for efficient and effective component management.

Tips: A slot element can contain default elements; it doesn’t need to be empty.

Tips: It is recommended to give a name to elements where the slot feature is activated, to make them more understandable.