Componente con plantilla

Ejemplo sencillo de como crear componentes con plantilla, esto es, componentes que aceptan como parámetro su contenido

@using System.Diagnostics.CodeAnalysis
@if (ModalHeader != null)
{
    <div class="modal-header">
        @ModalHeader
    </div>
}
<div class="modal-body">
    @ModalBody
</div>
@if (ModalFooter != null)
{
    <div class="modal-footer">
        @ModalFooter
    </div>
}
@code {
    [Parameter, AllowNull]
    public RenderFragment? ModalHeader { get; set; }
    [Parameter]
    public RenderFragment ModalBody { get; set; } = null!;
    [Parameter, AllowNull]
    public RenderFragment? ModalFooter { get; set; }

  }

La forma de usar este componente sería algo así:

<Modal>
    <ModalHeader>
        <h4>Hola</h4>
    </ModalHeader>
    <ModalBody>
        <form>
            <input />
        </form>
    </ModalBody>
</Modal>

Muy interesante el uso avanzado, puede ponerse como componente genérico y que cada fragmento acepte un parámetro. El ejemplo de la página oficial de Microsoft es muy explicativo:

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/templated-components?view=aspnetcore-6.0

Anuncio publicitario