Saltar al contenido principal

DinaZen

Biblioteca de componentes Blazor para el ecosistema Dinaup. Proporciona componentes UI reutilizables, gestion de ventanas flotantes, formularios y utilidades CSS.

Instalacion​

1. Proyecto (.csproj)​

<PropertyGroup>
  <WarningsAsErrors>RZ10012</WarningsAsErrors>
</PropertyGroup>
<ItemGroup>
  <Using Include="Dinaup.extensions">
    <Static>True</Static>
  </Using>
</ItemGroup>

2. Program.cs​

// Radzen (requerido por DinaZen, registrar por separado)
builder.Services.AddRadzenComponents();

// DinaZen (registra HttpContextAccessor, HttpClient, CultureService, DnzWindowManagerService)
builder.Services.AddDinaZen();
aviso

AddDinaZen() no incluye Radzen. Siempre registrar AddRadzenComponents() por separado.

3. _Imports.razor​

@using DinaZen.Components

4. _Host.cshtml (headers y scripts)​

@using DinaZen.Components.Installation

<head>
    <!-- DinaZen CSS (cache-busting automatico por version del assembly) -->
    <component type="typeof(DnzHead)" render-mode="ServerPrerendered" />

    <!-- Radzen Theme -->
    <component type="typeof(RadzenTheme)" render-mode="ServerPrerendered" param-Theme="@("material")" />
</head>
<body>
    <script src="_framework/blazor.server.js"></script>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>

    <!-- DinaZen JS (incluye highlight.js; desactivar con IncludeHighlight="false") -->
    <component type="typeof(DnzScripts)" render-mode="ServerPrerendered" />
</body>

Componentes clave​

Loaders​

<!-- Procesando (spinner) -->
<Loader />

<!-- Cargando UI (esqueleto) -->
<RadzenSkeleton />
<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=@AceptandoIsbussy />
    </div>
</FooterContent>

Ventanas flotantes​

Si el proyecto necesita ventanas flotantes, agregar en el layout:

<RadzenComponents />
<DinaZen.Components.WindowManager.DnzWindowHost />

Reglas de uso​

Propiedades con nameof​

Siempre usar nameof en lugar de strings literales para propiedades de modelo:

<!-- Correcto -->
<RadzenTextBox @bind-Value=@model.Number Property=@nameof(model.Number) />

<!-- Incorrecto -->
<RadzenTextBox @bind-Value=@model.Number Property="Number" />

CSS: clase autofade​

DinaZen incluye la clase .autofade para transiciones suaves de aparicion (fade + slide-up, 0.25s):

<div class="autofade">
    <!-- contenido que aparece con transicion -->
</div>
info

DinaZen incluye automaticamente los CSS: dinazen.css, dinazen-forms.css, highlight.min.css y dinazen-windows.css.