Slots are essentially placeholders within a component that can be filled with custom content.
They provide a way to dynamically inject content into a component without affecting its original template.
This makes it possible to create components that can be easily adapted to different scenarios without having to duplicate code or create a new component from scratch.
Slots facilitate the creation of more versatile and reusable components.
They allow developers to design components with predefined structures while leaving room for variation in content.
This separation of structure and content enhances code reusability and promotes a cleaner, more modular codebase.
AgnosUI core widgets include slots as properties prefixed by slot in their states.
This allows to specifiy the projected content in multiple manners, like simple string, context-aware functions, standard slots or even fully-fledged components.
To illustrate the basic usage, let's see in action how we can use a simple slot in the Bootstrap flavour of the Alert component:
Slots have access to a context, which for most cases is the widget state.
It is possible however to extend the context, which enables powerful customization. Here is an example with the Bootstrap flavour of the Pagination component:
As explained above, AgnosUI slots are inherently properties, thus benefit from the Configuration.
For instance, we may configure the slotStructure of the Alert to use a custom component, allowing to fully customize the widget.
React manages slots using the children specific property, as documented here.
We support this behavior, while going further.
The AgnosUI React slots can be set using:
string (props: Props) => string (props: Props) => React.ReactNode returning a React node You can check out the following example, re-writing the Bootstrap flavour of the Rating component as readonly: