Skeleton es un marcador decorativo de carga, no un medidor de progreso. variant selecciona text, circle o rect; width y height son cadenas con longitudes CSS. Utiliza dimensiones iguales para un círculo. borderRadius sustituye el radio de la variante cuando no está vacío. La aplicación controla el estado de carga y sustituye los marcadores por contenido real cuando está listo.
La aplicación proporciona los Inputs y controla la interacción del entorno. Este componente no tiene modelos ni Outputs. La proyección de contenido y los templates de iconos se documentan por separado cuando existen.
Skeleton tiene aria-hidden y no contiene controles interactivos. Marca la región contenedora con aria-busy durante la carga y proporciona un mensaje breve de estado fuera de esa región. No expongas texto ficticio a los lectores de pantalla. El movimiento reducido elimina el brillo animado y conserva el marcador.
Tecla
Acción
—
Sin interacción de teclado propia; los botones y enlaces proyectados conservan su comportamiento de teclado.
Todos los Inputs públicos se extraen del paquete Core fijado. Los tipos con nombre enlazan con sus definiciones. Solo se enumeran las zonas de proyección y los templates públicos reales.
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
borderRadius
string
''
[borderRadius]
Radio CSS opcional que sustituye al de la variante.
height
string
'16px'
[height]
Longitud CSS del alto; iguala el ancho para un círculo.
variant
"text" | "circle" | "rect"
'rect'
[variant]
Geometría text, circle o rect.
width
string
'100%'
[width]
Longitud CSS del ancho, como 100%, 48px o 3rem.
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.
Este componente no expone proyección de contenido ni templates públicos de personalización.
Los tokens de superficie definen el brillo y los de radio la forma. Elige dimensiones cercanas al contenido cargado para reducir los saltos del diseño. Utiliza porcentajes o longitudes CSS acotadas para diseños adaptables, en lugar de anchos fijos grandes.
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-radius
Radio de las esquinas del control
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
8px
--neu-surface-2
Superficies secundarias y filas alternas
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
#f1f5f9
--neu-surface-3
Superficies de controles destacados y al pasar el puntero
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
#e2e8f0
--neu-radius-full
Radio de esquina
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
9999px
--neu-radius-sm
Radio de esquina
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
6px
--neu-space-2
Separación entre contenido y controles
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
