Dinaup DocsDinaZen
Componentes Blazor sobre Radzen para construir apps .NET con el aspecto de Play Dinaup: tarjetas, tablas, formularios, diálogos y vistas.
DinaZen es la librería de componentes Blazor de Dinaup, construida sobre Radzen. Te da las piezas para montar aplicaciones .NET con el aspecto y el comportamiento de Play Dinaup: tarjetas, cabeceras, badges, formularios, tablas y vistas avanzadas.
Está pensada para desarrolladores que construyen apps Blazor sobre el SDK .NET. El SDK te da los datos (conexión, informes, escritura); DinaZen te da la capa visual para mostrarlos y editarlos sin reinventar la UI.
DinaZen es la capa de presentación. Para conectarte a Dinaup, consultar informes y guardar datos, usa el Cliente Dinaup.
Qué incluye
DinaZen agrupa componentes por la función que cumplen en pantalla. A alto nivel:
| Categoría | Para qué sirve |
|---|---|
| Presentación | Tarjetas, cabeceras de sección, badges y estados que dan a tu app el aspecto de Play. |
| Layout | Estructura de páginas y vistas: organiza el contenido con la misma jerarquía visual que Dinaup. |
| Formularios e inputs | Campos de entrada coherentes para capturar y editar datos. |
| Tablas | Listados con paginación, filtros y selección, alineados con los informes del SDK. |
| Vistas | Vista Gantt para planificación, y vistas de informe (tarjetas, gráfico, Top-N) para presentar datos con el aspecto de Play. |
| Utilidades | Indicadores de carga, diálogos y helpers que resuelven los patrones de UI repetitivos. |
DinaZen no sustituye a Radzen: lo extiende. Puedes seguir usando los componentes de Radzen directamente cuando lo necesites; DinaZen aporta los que dan el look & feel de Dinaup.
Referencia y patrones
Esta sección tiene dos puertas de entrada:
- Patrones de uso — el recetario. Cinco recetas de extremo a extremo (informe → tabla, datos tipados, elegir selector, esqueleto de diálogo y estados de carga). Empieza aquí si lo que quieres es hacer algo.
- Componentes — la referencia, agrupada por familias. Entra por la que necesites:
| Familia | Para qué |
|---|---|
| Datos tipados (Spans) | Pintar un importe, fecha, duración o peso con el formato de Dinaup. |
| Tarjetas y layout | Cabeceras, tarjetas y contenedores con la jerarquía visual de Play. |
| Badges y estados | Etiquetas de estado con color automático según el texto. |
| KPIs y métricas | Tarjetas y filas de indicadores para dashboards. |
| Selectores | Desplegables y selección de fichas (la regla de los 3 segundos). |
| Tablas e informes | Pintar un informe del SDK como tabla, tarjetas o gráfica. |
| Inputs y formularios | Capturar y editar datos: búsqueda, ficheros, texto rico, etiquetas. |
| Carga y rendimiento | Loader, skeleton y contenido diferido. |
| Vistas avanzadas | Gantt, código resaltado y selectores de rango de fechas. |
| Diálogos | El esqueleto de diálogo y los diálogos listos (confirmar, elegir ficha). |
Instalación y configuración
DinaZen se distribuye como paquete NuGet. Una vez referenciado, configura el proyecto y los imports.
Añade el paquete
dotnet add package DinaZenConfigura el .csproj
Trata los avisos de componentes como errores, para no romper la UI por descuido. Importa de forma estática las extensiones de Dinaup: así tienes .STR(), .INT(), .IsEmpty() y demás en todos los .razor.
<PropertyGroup>
<WarningsAsErrors>RZ10012</WarningsAsErrors>
</PropertyGroup>
<ItemGroup>
<Using Include="Dinaup.extensions">
<Static>True</Static>
</Using>
</ItemGroup>Importa los componentes
En tu _Imports.razor:
@using DinaZen.ComponentsA partir de aquí, los componentes de DinaZen están disponibles en cualquier página o componente del proyecto.
Convenciones de uso
DinaZen sigue los mismos criterios que el resto del ecosistema Blazor de Dinaup. Respétalos para que tu app se comporte como Play.
Referencia campos con nameof, no con strings
Cuando un componente necesita el nombre de una propiedad, nunca lo escribas como string literal. Usa nameof para que el compilador valide el nombre y los renombrados no rompan en silencio.
Property=@nameof(Modelo.Number)Property="Number"Estados de carga
Distingue entre "estoy procesando una acción" y "estoy cargando la interfaz por primera vez". Cada caso tiene su componente.
Una operación en curso (guardar, calcular, llamar a la API):
<Loader />La interfaz aún no está lista y quieres mostrar un esqueleto en su lugar:
<RadzenSkeleton />El estado de carga es parte de la experiencia. Una operación larga sin indicador hace pensar al usuario que algo se ha roto.
Diálogos
Los diálogos de DinaZen comparten una estructura fija de pie de página: el botón de cancelar a la izquierda en estilo discreto, el de confirmar a la derecha y destacado.
<FooterContent>
<div class="d-flex gap-2 justify-content-end">
<RadzenButton Text="Cancelar" Variant="Variant.Text" ButtonStyle="ButtonStyle.Danger" Click=@CancelarAsync />
<RadzenButton Text="Aceptar" ButtonStyle="ButtonStyle.Success" Click=@AceptarAsync IsBusy=@AceptandoIsBusy />
</div>
</FooterContent>| Botón | Estilo | Variante |
|---|---|---|
| Cancelar | Danger | Text (discreto) |
| Aceptar | Success | sólido + IsBusy mientras procesa |
Marca el botón de confirmar con IsBusy durante la operación: el propio botón muestra el indicador de carga y bloquea doble clic.
Cómo encaja con el SDK
DinaZen y el SDK .NET se reparten el trabajo: tú conectas y traes los datos con el cliente, y los presentas y editas con DinaZen.
Conecta y lee con el SDK
Usa el Cliente Dinaup para conectarte y ejecutar informes, que te devuelven filas tipadas listas para mostrar.
Presenta con DinaZen
Pinta esas filas en tablas, tarjetas o vistas Kanban/Gantt, con el aspecto de Play y sin escribir CSS a mano.
Edita y guarda
Captura cambios con los formularios e inputs de DinaZen y persístelos con las WriteOperations del cliente.
→ SDK .NET · Cliente Dinaup · Guías de estilo C# y Blazor · Dinaup Flex