Tarjeta

Una tarjeta es una ficha de métrica: un título, un valor grande con su unidad, un icono y una variación con su tendencia. También puede mostrar el progreso hacia un objetivo, un minigráfico, una descripción, un pie y, en su cuerpo, cualquier otro componente. Debajo está la tarjeta real del cliente React de AWE. Cambia sus atributos y el XML de debajo se actualiza; cópialo en tu pantalla.

Vista previa en vivo

ClaroOscuro

Controles

Título

Subtítulo

Valor

Unidad

Icono

∅Sin iconouserstrending-upeuroshopping-cart

Tono del icono

Variación

Tendencia

AutomáticaSubeBajaEstable

Leyenda

Etiqueta de estado

Tono de la etiqueta

Objetivo

Estilo del progreso

BarraMedidor

Minigráfico

NingunoCrecienteDecreciente

Tipo de minigráfico

ÁreaLíneaBarras

Descripción

Pie

Botón en el cuerpo

XML

<card id="demo"
      title="Active customers"
      value="1284"
      icon="lucide:users"
      delta="4.2"
      caption="vs. last month" />

Atributos

Los controles de arriba escriben estos atributos. La referencia lista todos los atributos, con su tipo y valor por defecto. Atributos en la referencia XSD

Atributo	Control	Valores
title	Título	text
subtitle	Subtítulo	text
value	Valor	text
unit	Unidad	text
icon	Icono	lucide:userslucide:trending-uplucide:eurolucide:shopping-cart
icon-tone	Tono del icono	successwarningdangerinfoneutral
delta	Variación	text
trend	Tendencia	updownflat
caption	Leyenda	text
chip	Etiqueta de estado	text
chip-tone	Tono de la etiqueta	successwarningdangerinfoneutral
target	Objetivo	text
progress-style	Estilo del progreso	gauge
sparkline	Minigráfico	[8,12,10,16,14,22][22,18,19,12,14,8]
sparkline-type	Tipo de minigráfico	linebar
description	Descripción	text
footer	Pie	text
button	Botón en el cuerpo	true / false

Eventos y acciones

Acción (type)	Qué hace
filter	Recarga la tarjeta con la primera fila de su consulta.
reload	Recarga la tarjeta, como cualquier componente con initial-load.

Referencia completa

• Documentación completa de este componente
• Referencia XSD del elemento

Recetas

Los atributos de estas tarjetas son valores fijos. En una pantalla real, initial-load="query" rellena la tarjeta con la primera fila de una consulta, y los campos de la consulta (title, value, delta...) sustituyen a los atributos.

Cifra clave con su tendencia

Con un icon, la variación pasa al pie, junto a la caption. La flecha y el color siguen el signo de delta.

<card id="revenue" title="Ingresos del mes" value="84200" unit="€" icon="lucide:euro" icon-tone="success"
      delta="12.4" caption="frente al mes anterior" />

Progreso hacia un objetivo

target dibuja el progreso de value frente a él, como una barra o, con progress-style="gauge", como un semicírculo. Una chip indica el estado de un vistazo.

<card id="goal" title="Objetivo anual de ventas" value="412000" target="500000" unit="€"
      chip="En camino" chip-tone="success" progress-style="gauge" />

Minigráfico y una tendencia buena que baja

good-trend="down" pinta una variación a la baja como una buena noticia (menos incidencias es mejor). sparkline es un array JSON de números dibujado bajo el valor.

<card id="incidents" title="Incidencias abiertas" value="37" delta="-8" delta-unit="%" good-trend="down"
      sparkline="[52,49,47,44,45,41,37]" sparkline-type="line" caption="últimos 7 días" />

Eventos y acciones

Una tarjeta no tiene un evento propio. Se actualiza como cualquier componente con initial-load: las acciones filter y reload vuelven a cargar su consulta, autorefresh la recarga cada pocos segundos y las dependencias pueden mostrarla, ocultarla o cambiar sus atributos. Los botones colocados en su cuerpo lanzan sus propias acciones.

Más

• Documentación completa de la tarjeta: todos los atributos, la anatomía de la ficha y los campos de la consulta.
• Referencia XSD del elemento card.