Dinaup DocsBadges y estados
Etiquetas de estado con color coherente: pasa el texto y DinaZen deduce el color semántico sin que mapees nada.
Pintas un estado (Pagado, Vencido, Pendiente) y quieres que salga del color que toca sin sentarte a elegir hex ni mantener un diccionario. Le pasas el texto a DnzBadgetAutoColor y deduce el color: verde lo bueno, rojo lo malo, cyan lo pendiente. La familia completa la cierran banderas de país, deltas con flecha de tendencia, etiquetas de producto (PRO, Beta, IA) y un punto pulsante para estados en vivo.
Si mañana cambias Pagada por Cobrada, sigue saliendo verde sin tocar nada: el color sale del texto, no de un mapeo tuyo.
Qué componente uso
| Quieres... | Componente |
|---|---|
| Una etiqueta de estado que se colorea sola por el texto | DnzBadgetAutoColor |
| Marcar una función como PRO, Beta, Nuevo, IA o Premium | DnzSpecialBadges |
| Mostrar una bandera de país junto a su código ISO | DnzCountryBadge |
| Una variación con flecha y color (sube bien / baja mal) | DnzDeltaBadge |
| Un punto de estado que late (online, alerta, caído) | DnzPulseDotAnimation |
| Resumir cuántas filas hay en cada estado de un informe | DnzStatusSummary |
DnzBadgetAutoColor
Le pasas el texto del estado en Value y elige el color por ti.
<DnzBadgetAutoColor Value="Pagada" />
<DnzBadgetAutoColor Value="Vencido" />
<DnzBadgetAutoColor Value="Pendiente de pago" />Cómo decide el color: 3 prioridades
El componente resuelve el color en este orden, y se queda con la primera que aplique:
Color explícito por enum
Si pasas Color con un valor distinto de Indefinido, manda eso y se acabó. Es el override total: ignora el texto.
<DnzBadgetAutoColor Value="Lo que sea" Color="EnumTextoEstiloE.Verde" />Estilo por diccionario
Si no fuerzas Color pero pasas un BadgetStyle (un Dictionary<string, int> que mapea texto exacto a un índice de estilo), busca el Value ahí. Sirve para colorear estados propios de tu dominio que el mapeo automático no conoce.
<DnzBadgetAutoColor Value="@estado" BadgetStyle="@coloresPorEstado" />Mapeo automático por palabra
Si no hay ni Color ni acierto en el diccionario, normaliza el texto (lo pasa a minúsculas y recorta) y lo busca en sus categorías semánticas internas. Aquí es donde Pagado se vuelve verde solo.
Qué palabras disparan cada color
El mapeo automático reconoce decenas de palabras en español e inglés, agrupadas por categoría. Una muestra representativa de cada grupo:
| Color | Categoría | Ejemplos de texto que la disparan |
|---|---|---|
| Verde (success) | Estados positivos / completados | pagado, cobrada, activo, conciliado, aprobado, enviado, paid, done, confirmed |
| Rojo (danger) | Estados negativos / error | cancelado, vencido, rechazado, impagado, bloqueado, error, expired, failed, overdue |
| Cyan (pending) | Pendientes / en espera | pendiente, abierto, por cobrar, borrador, pending, open, draft, awaiting payment |
| Azul sky (en proceso) | En curso | en proceso, procesando, en revisión, facturando, in progress, processing, under review |
| Amarillo (warning) | Advertencia | atención, próximo a vencer, incidencia, retrasado, warning, expiring soon, delayed |
Más allá de estados, también clasifica por temporalidad (hoy/today verde, ayer/yesterday rojo), tipo de operación (venta verde outline, compra naranja, transferencia azul), tipo de factura, periodicidad (mensual, anual, único), contabilidad y prioridad (urgente rojo, media naranja, baja verde). Y hace coincidencia parcial para frases como pago parcial o sin factura.
El mapeo automático es por coincidencia de texto: si tu estado no está entre las palabras reconocidas, sale con el color por defecto (gris). Para estados propios de tu dominio, usa BadgetStyle o fuerza Color. No es magia, es un diccionario amplio.
Si el Value viene vacío o solo espacios, el componente no pinta nada.
Parametros
| Parametro | Tipo | Por defecto | Que hace |
|---|---|---|---|
Value | string | Texto del estado a mostrar. Es lo que se pinta y lo que se mapea a color. Si está vacío, no renderiza. | |
Color | EnumTextoEstiloE | Indefinido | Color explícito (prioridad 1). Con cualquier valor distinto de Indefinido ignora el texto y manda este. |
BadgetStyle | Dictionary<string, int> | null | Diccionario texto exacto a índice de estilo (prioridad 2). Para colorear estados propios. |
Visible | bool | true | Si es false, el componente no se pinta. |
Style | string | null | CSS inline extra para el <span>. |
Click | EventCallback | Callback al pulsar la etiqueta. Si lo asignas, el badge muestra el cursor de mano. |
DnzSpecialBadges
Etiqueta de producto con degradado e icono: marca una función como PRO, Beta, Nuevo, IA o Premium. Texto e icono ya vienen fijados por tipo, tú solo eliges cuál.
<DnzSpecialBadges Type="DnzSpecialBadges.BadgeType.Pro" />
<DnzSpecialBadges Type="DnzSpecialBadges.BadgeType.IA" />Parametros
| Parametro | Tipo | Por defecto | Que hace |
|---|---|---|---|
Type | BadgeType | Pro | Qué etiqueta pintar. Valores del enum: Pro, Beta, New, IA, Premium. Cada uno trae su texto, icono y degradado. |
DnzCountryBadge
Bandera de país más su código ISO en una etiqueta clara. Le pasas el código alpha-2 y resuelve la imagen de la bandera desde el CDN de Dinaup.
<DnzCountryBadge CountryCode="ES" />
<DnzCountryBadge CountryCode="MX" Size=28 />CountryCode es obligatorio (EditorRequired). Espera ISO 3166-1 alpha-2: ES, US, MX, FR... Si la bandera no carga, la imagen se oculta sola y queda solo el código.
Parametros
| Parametro | Tipo | Por defecto | Que hace |
|---|---|---|---|
CountryCode | string | "" | Código de país ISO 3166-1 alpha-2. Obligatorio (EditorRequired). Si viene vacío, no pinta nada. |
Size | int | 22 | Tamaño de la bandera en píxeles (alto y ancho). |
FlagUrlTemplate | string | https://dinaupcdn.com/public/flags/{0}.svg | Plantilla de URL de la bandera. Debe contener {0}, que se reemplaza por el código en minúsculas. |
DnzDeltaBadge
Una variación numérica con color y flecha: verde y flecha arriba si sube, rojo y flecha abajo si baja, gris y raya si es cero. Pensado para "+12% vs mes anterior" y similares.
<DnzDeltaBadge Value=@variacionPct Tooltip="Frente al mes anterior" />Cuando un número que sube es malo (gastos, devoluciones, churn), invierte los colores:
<DnzDeltaBadge Value=@churnPct InvertColors=true Tooltip="Bajas del periodo" />Para valores absolutos en vez de porcentaje, apaga IsPercent:
<DnzDeltaBadge Value=@nuevosClientes IsPercent=false Size="DnzDeltaBadge.SizeType.Small" />El signo y la flecha salen del signo del Value: positivo sube, negativo baja, cero queda neutro. No tienes que pasar el signo ni el icono, los calcula el componente. Si Value es null, no pinta nada.
Parametros
| Parametro | Tipo | Por defecto | Que hace |
|---|---|---|---|
Value | decimal? | null | La variacion a mostrar. Su signo decide color, flecha y signo del texto. Si es null, no renderiza. |
IsPercent | bool | true | Si true, formatea como porcentaje (%); si false, como numero entero con separador de miles. |
InvertColors | bool | false | Invierte la lectura de color: subir pasa a rojo y bajar a verde. Para metricas donde crecer es malo. |
Size | SizeType | Normal | Tamano de la etiqueta. Valores: Small, Normal. |
Tooltip | string | "" | Texto del title al pasar el raton. |
DnzPulseDotAnimation
Un punto de estado que late: online, alerta o caido en dashboards en tiempo real. Color por enum y el latido se puede apagar.
<DnzPulseDotAnimation Color="DnzPulseDotAnimation.PulseColor.Green" Title="Conectado" />Estatico (sin animacion) y mas grande:
<DnzPulseDotAnimation Color="DnzPulseDotAnimation.PulseColor.Red" Pulse=false Size=18 Title="Servicio caido" />Respeta prefers-reduced-motion: si el usuario pide menos animaciones en su sistema, el punto deja de latir solo. No tienes que gestionarlo tu.
Parametros
| Parametro | Tipo | Por defecto | Que hace |
|---|---|---|---|
Color | PulseColor | Color del punto. Obligatorio (EditorRequired). Valores: Green, Yellow, Red, Gray. | |
Pulse | bool | true | Si true, el punto emite el anillo pulsante; si false, queda fijo. |
Size | int | 14 | Diametro del punto en pixeles. |
RingPadding | int | 6 | Espacio (px) entre el punto y el borde del anillo pulsante. |
RingThickness | int | 2 | Grosor (px) del anillo pulsante. |
Title | string | null | Texto del title (tooltip y accesibilidad). |
DnzStatusSummary
Resumen de estados de un informe Flex: agrupa las filas por su columna de estado y pinta cuantas hay en cada uno, con su badge de color y una barra de proporcion. No le pasas datos a mano, lee el ReportContext de la cascada.
<CascadingValue Value=@reportContext>
<DnzStatusSummary OnStatusClick=@FiltrarPorEstado />
</CascadingValue>Solo aparece si el informe trae filas y la columna de estado permite agrupacion tipo Kanban. Si el informe esta vacio no pinta nada, asi que no tienes que esconderlo. Reutiliza DnzBadgetAutoColor por dentro, asi que cada estado sale del color que le toca. Mas sobre informes en Informes (Flex).
Parametros
| Parametro | Tipo | Por defecto | Que hace |
|---|---|---|---|
Context | ReportContext | Llega por [CascadingParameter]. No se pasa como atributo: lo provees con <CascadingValue>. | |
OnStatusClick | EventCallback<string> | Se dispara al pulsar un estado, con su texto. Util para filtrar el informe por ese estado. |
Ver tambien: Componentes DinaZen · KPIs y metricas · Tablas e informes · Intro DinaZen · Informes (Flex) · Guias de estilo C#/Blazor