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 components include slots as properties. This allows to specify the projected content in multiple manners, depending on the framework.
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 nodeTo illustrate the basic usage, let's see in action how we can use a simple slot in the Bootstrap flavour of the Alert component:
Sample not found, make sure to fill the samples.ts file.Slots have access to a context, which for most cases is the component 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 component.
AgnosUI provides utilities to manage slots for each framework, as frameworks have differences in their implementations of slots / templates / snippets.
To learn more about the specificies of each framework, go here:
You can check out the following example, re-writing the Bootstrap flavour of the Rating component as readonly:
Sample not found, make sure to fill the samples.ts file.