DocsSlotsSection.razor

@namespace LumexUI.Docs.Client.Components

<DocsSection Title="@Title">
    <p>
        This component supports named slots that
        allow you to apply custom CSS to specific parts of the component.
    </p>
    <ul>
        @foreach( var slot in Slots )
        {
            <li>
                <strong class="text-orange-500 dark:text-orange-400">@slot.Name:</strong> @slot.Description
            </li>
        }
    </ul>
    <p>
        You can customize the component(s) by passing
        any Tailwind CSS classes to the following component parameters:
    </p>

    @ChildContent
</DocsSection>

@code {
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public string Title { get; set; } = "Custom Styles";
    [Parameter, EditorRequired] public Slot[] Slots { get; set; } = default!;
}