Tarjetas y maquetación

Casi toda pantalla de Dinaup tiene la misma estructura: una tarjeta, una cabecera y un cuerpo debajo. La tarjeta la pone DnzCard, la cabecera DnzCardTitle y el cuerpo es tu rejilla, tu formulario o tu lista. El resto de la familia cubre casos concretos: tarjeta clave-valor, avatares, bloques con zoom y avisos a ancho completo.

Qué componente uso

Los contenedores y controles del motor de formularios de Flex (DnzContainer, DnzControl) los monta DnzFormView. Van al final de la página como referencia.

El patrón base

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

<DnzCard>
    <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())
    {
        <p class="text-muted p-3">Sin productos. Pulsa <strong>Agregar</strong> para crear el primero.</p>
    }
    else
    {
        <DnzCardBody>
            <RadzenDataGrid Data=@productos TItem="ProductoDTO" />
        </DnzCardBody>
    }
</DnzCard>

DnzCard

Tarjeta que conoce su nivel de anidamiento. RadzenCard muestra siempre la misma superficie elevada, así que una tarjeta dentro de otra acumula sombra sobre sombra. DnzCard pasa su profundidad a las hijas en cascada y alterna el aspecto: nivel 0 elevado, niveles impares con un velo neutro sin borde, niveles pares de vuelta al fondo de tarjeta separados por una línea fina.

<DnzCard>
    <DnzCardTitle Icon="receipt_long" Title="Factura 2026-0042" />
    <DnzCard>
        <DnzCardTitle Title="Líneas" Compact=true />
        <RadzenDataGrid Data=@lineas TItem="LineaDTO" />
    </DnzCard>
</DnzCard>

Depth es un [CascadingParameter] con nombre DnzCardDepth que aporta la tarjeta padre; no lo pasas tú. Cualquier otro atributo (class, title, data-*) va directo a la 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>

Los atributos extra se pasan al elemento raíz (el parámetro se llama Attributes).

El botón de ayuda (icono de interrogación a la derecha) solo aparece con HelpContent o HelpLink. Con HelpContent escribes el panel; con HelpLink el componente muestra el enlace Ver documentacion, que se abre en una pestaña nueva. Con los dos, prevalece HelpContent.

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

<DnzCardTitle Icon="settings" Title="Configuración" HelpLink="https://doc.dinaup.com/docs/cuenta/usuarios" />

DnzCardBody

Bloque que escapa del relleno de la tarjeta padre con margen negativo, para que una rejilla o una tabla llegue a ras de borde.

<DnzCard>
    <DnzCardTitle Icon="list" Title="Líneas del pedido" />
    <DnzCardBody>
        <RadzenDataGrid Data=@lineas TItem="LineaPedidoDTO" />
    </DnzCardBody>
</DnzCard>

DnzCardKV

Tarjeta clave-valor: icono coloreado a la izquierda, etiqueta encima y valor grande debajo. Para filas de métricas (disponibilidad, 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>

Acepta atributos extra que se pasan al elemento raíz.

DnzScalableBlock

Envuelve cualquier contenido con dos botones de zoom (más y menos) y recuerda la escala en localStorage. Para tablas anchas o vistas densas. Cada bloque necesita un Key único para no sobrescribir la escala de otro.

<DnzScalableBlock Key="grid-facturas-2026">
    <RadzenDataGrid Data=@facturas TItem="FacturaDTO" />
</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

Aviso a ancho completo con icono, título, contenido libre y botón opcional. Va en la parte superior 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="Operación completada" ButtonText="Ver detalles" DnzButtonrl="/facturas/123">
    <p>La factura se ha emitido y enviado al cliente.</p>
</DnzBanner>

DnzHealthSection

Muestra su contenido solo si la comprobación de estado llamada CheckName devuelve Healthy en HealthCheckService.CheckHealthAsync(). Si no, muestra el texto (Servicio no disponible en este momento.)

<DnzHealthSection CheckName="redis">
    <ColaDeTrabajosU />
</DnzHealthSection>

DnzFooterPoweredBy

Pie con el texto Powered by y el enlace a dinaup.com, en dos estilos.

<DnzFooterPoweredBy Style="DnzFooterPoweredBy.FooterStyleType.Compact" />

Motor de formularios de Flex

DnzFormView monta estos dos por cada pestaña de la ficha. Rara vez los instancias a mano; están aquí para reconocerlos al depurar un formulario. Detalle de DnzFormView en Entrada de datos y formularios.

DnzContainer

Posiciona una tarjeta con coordenadas absolutas y dentro muestra una lista de informe, una lista primaria o botones, según la definición del Container.

DnzControl

El campo individual de la ficha: elige el control correcto (texto, número, fecha, casilla, selector, editor HTML) según el Format del DataControl.

Un campo confidencial (DataControl.IsSensitive) o de contraseña (InputType password) lo muestra DnzControlSensible: el valor aparece como puntos, con un botón para verlo y otro para copiarlo sin mostrarlo.

Las fechas con hora se eligen en la hora de la empresa (ICultureService) y se guardan convertidas a UTC. Los botones Ahora, Hoy y Mañana toman esa misma hora, no el reloj del servidor.

Relacionado

• DinaZen
• Componentes
• Etiquetas y estados
• KPIs y métricas
• Datos tipados (Spans)
• Guías de estilo C# y Blazor