Proporciona title y value ya formateado. change es texto de presentación, no un porcentaje calculado. trend añade un indicador ascendente, descendente o neutro. label aporta contexto y el contenido proyectado aparece en el pie. icon resuelve un icono de la aplicación. Explica con palabras si una subida o bajada de la métrica resulta favorable.
La aplicación formatea los valores y calcula los cambios. StatsCard no tiene Outputs, modelos ni API de formato numérico. Los botones del contenido proyectado gestionan sus propios eventos.
Da a cada métrica un título visible y explica el periodo de comparación. Los iconos de tendencia son decorativos; change y el contexto comunican el resultado. La tarjeta no es un botón. Proyecta un enlace o botón real para consultar detalles.
Tecla
Acción
—
Da a cada métrica un título visible y explica el periodo de comparación. Los iconos de tendencia son decorativos; change y el contexto comunican el resultado. La tarjeta no es un botón. Proyecta un enlace o botón real para consultar detalles.
Los Inputs y Outputs se extraen del paquete fijado. Los tipos con nombre enlazan a sus definiciones; Templates enumera solo las zonas de proyección disponibles.
Inputs
Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.
Nombre
Tipo
Por defecto
Uso en el template
Descripción
change
string
''
[change]
Texto de comparación ya formateado; no realiza cálculos.
icon
string | null
null
[icon]
Clave opcional de un icono resuelto por la aplicación.
label
string
''
[label]
Contexto adicional, como el periodo de comparación.
Dirección up, down o neutral; explica su significado con texto.
value
string
''
[value]
Valor ya formateado que se muestra como texto.
Templates
ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.
Utiliza los Inputs públicos y los tokens de superficie, texto, espaciado y color semántico de Core. Mantén el contenido adaptable y comprueba ambos temas.
Tokens específicos
Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.
Tokens compartidos utilizados
Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.
Token
Efecto aquí
Otros efectos
Valor / alternativa
--neu-border
Bordes normales de controles y celdas
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
rgba(15, 23, 42, 0.08)
--neu-error-bg
Fondo de estados de error o peligro
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
#fee2e2
--neu-error-text
Texto de error y de Button danger outline/ghost en ambos temas
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
#991b1b
--neu-primary
Color de marca en controles activos y énfasis
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
#007aff
--neu-primary-50
Superficie tenue de marca para estados de puntero y foco
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
#eff6ff
--neu-radius
Radio de las esquinas del control
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
8px
--neu-surface
Superficie principal del campo, cabecera o control
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
#ffffff
--neu-surface-2
Superficies secundarias y filas alternas
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
