Referencia API

Aquí tienes el contrato completo de skeleton: todo lo que puedes enlazar, escuchar, proyectar y personalizar, reunido en un solo sitio. Enlaza lo que necesites y dale el estilo que quieras — es standalone y reactivo con signals.

Inputs

Ajusta skeleton a tu gusto con 7 inputs. Se enlazan como cualquier @Input de Angular.

Nombre	Tipo	Por defecto	Descripción
`preset`	`string \| null`	`null`	Nombre de un preset incluido o registrado. Cuando se proporciona, el componente resuelve los valores por defecto, las variantes y la composición de alias desde el registro de presets.
`template`	`string \| HubSkeletonTemplateDefinition \| null`	`null`	Cadena DSL inline de tipo Emmet u objeto de definición de plantilla con anulaciones opcionales de breakpoint responsivo.
`params`	`HubSkeletonParams`	`{}`	Parámetros serializables interpolados en los marcadores `{{param}}` antes del parseo y la expansión del preset.
`variant`	`string \| null`	`null`	Nombre opcional de variante de preset, como `compact`, usado para cambiar los valores por defecto de la plantilla o sobrescribir la plantilla base del preset.
`animated`	`boolean`	`true`	Habilita o deshabilita la animación de shimmer manteniendo el mismo diseño de placeholder.
`appearance`	`'default' \| 'subtle' \| 'contrast'`	`'default'`	Cambia la intensidad visual de las superficies del skeleton sin cambiar el diseño resuelto.
`ariaLabel`	`string`	`'Loading placeholder'`	Etiqueta accesible aplicada al elemento contenedor para tecnologías de asistencia.

Outputs

Todavía no hay outputs documentados.

Templates

Hazlo tuyo — 3 plantillas para proyectar tu propio marcado.

Nombre	Descripción	Ejemplo
`Bundled Presets`	Nombres de preset disponibles en el catálogo inicial: card, list-item, table-row, detail-view, form-section, dashboard-widget, stat-card, chart-panel, profile-summary, master-detail, kanban-card, feed-item, search-result, table-toolbar, filter-bar y empty-state-skeleton.	`<hub-skeleton preset="table-row" [params]="{ columns: 4 }"></hub-skeleton>`
`Preset DSL`	Sintaxis de cadena compacta que admite nombres de nodo, modificadores, composición de hermanos con `+`, anidamiento de hijos con `>` y repetición con `*N`.	`<hub-skeleton template="stack(gap:12)>circle(size:40)+stack(gap:8)>line(width:42%)+line(width:72%)"></hub-skeleton>`
`provideHubSkeletonPresets`	Registra presets personalizados en la inyección de dependencias de Angular para que cualquier componente pueda renderizarlos por nombre.	`providers: [provideHubSkeletonPresets([{ name: 'profile-card', template: 'stack(gap:16)>circle(size:72)+line(width:48%)' }])]`

Variables CSS

Personaliza cada detalle con 5 variables CSS. Sobrescríbelas en :root o acótalas a un contenedor.

tokens visuales

Propiedades CSS personalizadas principales expuestas por el componente host.

Variable	Por defecto	Tipo	Descripción
`--hub-skeleton-bg`	`rgba(148, 163, 184, 0.18)`	color	Color base del placeholder usado para las superficies visibles del skeleton.
`--hub-skeleton-highlight`	`rgba(255, 255, 255, 0.52)`	color	Color de resalte usado por el gradiente de shimmer.
`--hub-skeleton-radius`	`12px`	length	Radio del borde por defecto para los nodos block y line.
`--hub-skeleton-gap`	`12px`	length	Espacio por defecto usado por los nodos stack y grid cuando no se sobrescribe mediante modificadores.
`--hub-skeleton-animation-duration`	`1.35s`	transition	Duración del ciclo de animación de shimmer.

Estilos y theming

Todavía no hay ejemplos de estilos documentados. Esta sección incluirá recetas de personalización y ejemplos de theming.