Tarjetas y layout

Casi toda pantalla de Dinaup es lo mismo: una RadzenCard, una cabecera arriba y un cuerpo debajo. La cabecera la pones con DnzCardTitle y el cuerpo con el contenido que toque. Con estas piezas montas vistas con la estructura visual de Play.

RadzenCard envuelve, DnzCardTitle titula, y dentro va tu grid, tu formulario o tu lista. El resto de la familia son atajos para casos concretos (KPIs, fichas clicables, avatares, bloques con zoom).

El patrón base

Toda subpage parte del mismo esqueleto. Cabecera con icono y título, acciones a la derecha, cuerpo debajo.

<RadzenCard>
    <DnzCardTitle Icon="inventory_2" Title="Productos">
        <Actions>
            <RadzenButton Text="Agregar" Icon="add" ButtonStyle="ButtonStyle.Primary" Size="ButtonSize.Small" Click=@OnAdd />
            <RadzenButton Icon="refresh" Click=@RefreshDataAsync IsBusy=@cargando Variant="Variant.Text" Size="ButtonSize.Small" />
        </Actions>
    </DnzCardTitle>

    @if (productos.IsEmpty())
    {
        <EmptyListAddButtomCardU Title="Sin productos" Description="Agrega tu primer producto." ButtonText="Agregar producto" AddClick=@OnAdd />
    }
    else
    {
        <RadzenDataGrid Data=@productos TItem="ProductoDTO">...</RadzenDataGrid>
    }
</RadzenCard>

DnzCardTitle

Cabecera de tarjeta con icono, título, subtítulo opcional, botones de acción y panel de ayuda desplegable.

<DnzCardTitle Icon="receipt_long" Title="Facturas emitidas" Subtitle="Ejercicio 2026">
    <Actions>
        <RadzenButton Text="Nueva factura" Icon="add" ButtonStyle="ButtonStyle.Primary" Size="ButtonSize.Small" Click=@CrearFactura />
        <RadzenButton Icon="refresh" Click=@RecargarAsync IsBusy=@cargando Variant="Variant.Text" Size="ButtonSize.Small" />
    </Actions>
</DnzCardTitle>

El botón de ayuda (icono de interrogación a la derecha) solo aparece si pones HelpContent o HelpLink. Con HelpContent escribes el panel a mano; con HelpLink el componente pinta un enlace "Ver documentación" que abre en pestaña nueva. Si pones los dos, manda HelpContent.

<DnzCardTitle Icon="percent" Title="Tipos de IVA">
    <HelpContent>
        Configura los tipos impositivos que se ofrecen al crear lineas de factura. El marcado como predeterminado se aplica a productos nuevos.
    </HelpContent>
</DnzCardTitle>

<DnzCardTitle Icon="settings" Title="Configuracion" HelpLink="https://doc.dinaup.com/configuracion" />

Además de los parámetros de arriba, DnzCardTitle acepta atributos extra que pasan al elemento raíz ([Parameter(CaptureUnmatchedValues = true)]): útil para colar un id, un data-* o una clase suelta sin tocar el componente.

DnzCardBody

Bloque que escapa del padding de la RadzenCard padre con margen negativo, para que un grid o una tabla llegue a ras de borde dentro de la tarjeta.

<RadzenCard>
    <DnzCardTitle Icon="list" Title="Lineas del pedido" />
    <DnzCardBody>
        <RadzenDataGrid Data=@lineas TItem="LineaPedidoDTO">...</RadzenDataGrid>
    </DnzCardBody>
</RadzenCard>

DnzCardKV

Tarjeta clave-valor para KPIs: icono coloreado a la izquierda, etiqueta arriba y valor grande debajo. Pensada para filas de metricas (uptime, total facturado, stock).

<div class="d-flex gap-2">
    <DnzCardKV Icon="payments" IconColor=@Colors.Success Title="Facturado mes" Value=@($"{totalMes.RoundMoney(2)} €") Variant="Variant.Outlined" />
    <DnzCardKV Icon="inventory" IconColor=@Colors.Warning Title="Stock bajo" Value=@productosBajoStock.STR() Variant="Variant.Outlined" />
    <DnzCardKV Icon="people" IconColor=@Colors.Info Title="Clientes activos" Value=@clientesActivos.STR() Variant="Variant.Outlined" />
</div>

DnzCardList

Renderiza el resultado de un informe Flex como lista de fichas clicables, con imagen, título y hasta 4 campos. Se alimenta del ReportContext cascada, no le pasas los datos a mano. Al pulsar una ficha abre el registro o dispara tu callback.

<DnzReportView Client=@Client ReportId=@reportId>
    <DnzCardList MaxFields="3" OnItemSelect=@AbrirFicha />
</DnzReportView>

DnzContainer

Contenedor de formularios virtuales (Flex). Posiciona una RadzenCard con coordenadas absolutas y dentro pinta una lista de informe, una lista primaria o botones, según la definición del Container. Es infraestructura del motor de formularios: rara vez lo instancias a mano, lo coloca el renderizador de formularios.

<DnzContainer Client=@Client Container=@container OnTabChanged=@HandleTabChanged />

DnzControl

El campo individual de un formulario virtual (Flex): elige el input correcto (texto, número, fecha, checkbox, selector, editor HTML) según el FieldFormatE del DataControl. Como DnzContainer, es motor de formularios; lo pinta el renderizador, no tu código de pantalla.

<DnzControl Client=@Client DataControl=@control OnDataControlChanged=@HandleControlChanged />

DnzScalableBlock

Envuelve cualquier contenido con dos botones de zoom (más/menos) y recuerda la escala en localStorage. Útil para tablas anchas o vistas densas que el usuario quiere agrandar. Cada bloque necesita un Key único para no pisar la escala de otro.

<DnzScalableBlock Key="grid-facturas-2026">
    <RadzenDataGrid Data=@facturas TItem="FacturaDTO">...</RadzenDataGrid>
</DnzScalableBlock>

DnzAvatarInitial

Avatar circular con la inicial del nombre y un color de fondo derivado de esa letra (siempre el mismo color para la misma inicial). Para listas de usuarios, clientes o empleados sin foto.

<div class="d-flex align-items-center gap-2">
    <DnzAvatarInitial Data=@cliente.Nombre Size="32px" />
    <span>@cliente.Nombre</span>
</div>

DnzBanner

Banner destacado de ancho completo con icono, título, contenido libre y botón opcional. Como pieza de layout va arriba de una pantalla, para avisos de versión, ofertas, mantenimiento o errores a página completa.

<DnzBanner Style="DnzBanner.DnzBannerStyle.Success" Icon="check_circle" Title="Operacion completada" ButtonText="Ver detalles" DnzButtonrl="/facturas/123">
    <p>La factura se ha emitido y enviado al cliente <strong>correctamente</strong>.</p>
</DnzBanner>

Relacionado: Intro a DinaZen · Índice de componentes · Badges y estados · Datos tipados (Spans) · Informes Flex · Guías de estilo C#/Blazor