Dinaup DocsEtiquetas y estados
Etiquetas de estado con color deducido del texto, etiquetas de producto, banderas, variaciones con flecha y puntos de estado en vivo.
DnzBadgetAutoColor muestra un estado (Pagado, Vencido, Pendiente) con el color que deduce del texto, sin elegir un hexadecimal ni mantener un diccionario. Los estados positivos se muestran en verde, los negativos en rojo y los pendientes en cian. La familia incluye también banderas de país, variaciones con flecha de tendencia, etiquetas de producto (PRO, Beta, IA) y un punto pulsante para estados en vivo.
Si cambias Pagada por Cobrada, el color sigue siendo verde: sale del texto, no de un diccionario propio.
Qué componente uso
| Necesitas | 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 |
| 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 (en línea, alerta, caído) | DnzPulseDotAnimation |
| Cuántas filas hay en cada estado de un informe | DnzStatusSummary |
| Un aviso a ancho completo | DnzBanner, en Tarjetas y maquetación |
DnzBadgetAutoColor
Recibe el texto del estado en Value y elige el color.
<DnzBadgetAutoColor Value="Pagada" />
<DnzBadgetAutoColor Value="Vencido" />
<DnzBadgetAutoColor Value="Pendiente de pago" />Cómo decide el color
El componente resuelve el color en este orden y se queda con la primera regla que aplique.
Estilo explícito por enum
Si pasas Color con un valor distinto de Indefinido, se aplica ese estilo y se ignora el texto. EnumTextoEstiloE viene de DemoUp.MyDinaup y tiene los valores Indefinido y Estilo1 a Estilo20; cada uno corresponde a la clase CSS e1 a e20 de DinaZen.
<DnzBadgetAutoColor Value="Lo que sea" Color="EnumTextoEstiloE.Estilo11" />Estilo por diccionario
Sin Color, si pasas BadgetStyle (un Dictionary<string, int> que asocia cada texto exacto a un índice de estilo), busca ahí el Value recortado. Sirve para estados propios de tu dominio que la asignación automática no reconoce. Es el mismo diccionario que trae cada columna de estado de un informe (BadgetsStyle).
<DnzBadgetAutoColor Value=@estado BadgetStyle=@coloresPorEstado />Asignación automática por palabra
Sin Color ni acierto en el diccionario, normaliza el texto (minúsculas, sin espacios sobrantes) y lo busca en sus categorías internas. En este paso Pagado pasa a verde.
Qué palabras disparan cada color
La asignación automática reconoce decenas de palabras en español e inglés, agrupadas por categoría. Una muestra de cada grupo:
| Color | Categoría | Ejemplos de texto |
|---|---|---|
| Verde | Estados positivos o completados | pagado, cobrada, activo, conciliado, aprobado, enviado, paid, done, confirmed |
| Rojo | Estados negativos o error | cancelado, vencido, rechazado, impagado, bloqueado, error, expired, failed, overdue |
| Cian | Pendientes o en espera | pendiente, abierto, por cobrar, borrador, pending, open, draft |
| Azul | En curso | en proceso, procesando, en curso, in progress, processing |
| Amarillo | Advertencia | atención, advertencia, aviso, próximo a vencer, warning, delayed |
Clasifica también por temporalidad (hoy, today, ahora), tipo de operación (venta, ingreso, compra), periodicidad y prioridad (urgente, crítico, alta). Si no hay acierto exacto, prueba coincidencia parcial para frases como pago parcial.
Si tu estado no está entre las palabras reconocidas, se muestra con el color por defecto (gris). Para estados propios de tu dominio, usa BadgetStyle o fuerza Color.
Si Value viene vacío o solo con espacios, el componente no muestra nada.
Parámetros
| Parámetro | Tipo | Por defecto | Qué hace |
|---|---|---|---|
Value | string | Texto del estado. Es el texto que se muestra y del que se deduce el color. Vacío no se muestra. | |
Color | EnumTextoEstiloE | Indefinido | Estilo explícito (prioridad 1). Cualquier valor distinto de Indefinido ignora el texto. |
BadgetStyle | Dictionary<string, int> | null | Diccionario texto exacto a índice de estilo (prioridad 2). |
Visible | bool | true | Con false, el componente no se muestra. |
Style | string | null | CSS en línea adicional para el <span>. |
Click | EventCallback | Se dispara al pulsar la etiqueta. Con delegado, la etiqueta 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 vienen fijados por tipo.
<DnzSpecialBadges Type="DnzSpecialBadges.BadgeType.Pro" />
<DnzSpecialBadges Type="DnzSpecialBadges.BadgeType.IA" />Parámetros
| Parámetro | Tipo | Por defecto | Qué hace |
|---|---|---|---|
Type | BadgeType | Pro | Qué etiqueta mostrar: Pro, Beta, New, IA, Premium. Cada uno trae su texto, icono y degradado. |
DnzCardTitle acepta el mismo enum en BadgeType para colocar la etiqueta junto al título.
DnzCountryBadge
Bandera de país más su código ISO en una etiqueta. Recibe 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 y queda solo el código.
Parámetros
| Parámetro | Tipo | Por defecto | Qué hace |
|---|---|---|---|
CountryCode | string | "" | Código de país ISO 3166-1 alpha-2. Obligatorio. Vacío no muestra 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. {0} se sustituye por el código en minúsculas. |
DnzDeltaBadge
Una variación numérica con color y flecha: verde y flecha ascendente si sube, rojo y flecha descendente si baja, gris y raya si es cero. Para "+12% frente al mes anterior" y similares.
<DnzDeltaBadge Value=@variacionPct Tooltip="Frente al mes anterior" />Cuando subir es malo (gastos, devoluciones, bajas), invierte los colores:
<DnzDeltaBadge Value=@churnPct InvertColors=true Tooltip="Bajas del periodo" />Para valores absolutos en vez de porcentaje, desactiva 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. Si Value es null, no muestra nada.
Parámetros
| Parámetro | Tipo | Por defecto | Qué hace |
|---|---|---|---|
Value | decimal? | null | La variación. Su signo decide color, flecha y signo del texto. null no se muestra. |
IsPercent | bool | true | Con true, formato 0.# y sufijo %; con false, entero con separador de miles (N0). |
InvertColors | bool | false | Subir pasa a rojo y bajar a verde. Para métricas donde crecer es malo. |
Size | SizeType | Normal | Tamaño de la etiqueta: Small, Normal. |
Tooltip | string | "" | Texto del title al pasar el ratón. |
DnzPulseDotAnimation
Un punto de estado que late: en línea, alerta o caído, en cuadros de mando en tiempo real. Color por enum; el latido se desactiva con Pulse=false.
<DnzPulseDotAnimation Color="DnzPulseDotAnimation.PulseColor.Green" Title="Conectado" />Estático y más grande:
<DnzPulseDotAnimation Color="DnzPulseDotAnimation.PulseColor.Red" Pulse=false Size=18 Title="Servicio caído" />Respeta prefers-reduced-motion: si el usuario pide menos animaciones en su sistema, el punto deja de latir.
Parámetros
| Parámetro | Tipo | Por defecto | Qué hace |
|---|---|---|---|
Color | PulseColor | Color del punto. Obligatorio (EditorRequired): Green, Yellow, Red, Gray. | |
Pulse | bool | true | Con true emite el anillo pulsante; con false queda fijo. |
Size | int | 14 | Diámetro del punto en píxeles. |
RingPadding | int | 6 | Espacio (px) entre el punto y el borde del anillo. |
RingThickness | int | 2 | Grosor (px) del anillo. |
Title | string | null | Texto del title (texto emergente y accesibilidad). |
DnzStatusSummary
Resumen de estados de un informe de Flex: agrupa las filas por su columna de estado y muestra cuántas hay en cada uno, con su etiqueta de color y una barra de proporción. Lee el ReportContext en cascada que publica DnzReportProvider.
<DnzReportProvider Client=@Client ReportId="7c1d4e90-2f5a-41b8-bc63-9e0a1b2c3d4f">
<DnzStatusSummary OnStatusClick=@FiltrarPorEstado />
</DnzReportProvider>Solo aparece si el informe trae filas y su columna de estado admite agrupación (Mapping.CanKanban). Con el informe vacío no muestra nada. Usa DnzBadgetAutoColor por dentro con el BadgetsStyle de la columna, así que cada estado se muestra con el color que tiene en Dinaup. Detalle en Tablas e informes.
Parámetros
| Parámetro | Tipo | Por defecto | Qué hace |
|---|---|---|---|
Context | ReportContext | Llega por [CascadingParameter] desde DnzReportProvider. No se pasa como atributo. | |
OnStatusClick | EventCallback<string> | Se dispara al pulsar un estado, con su texto. Sirve para filtrar el informe. |