Справочник API

Вот полный контракт skeleton: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.

Входные свойства

Настройте skeleton с помощью 7 входных свойств. Привязывайте их, как любой @Input в Angular.

Имя	Тип	По умолчанию	Описание
`preset`	`string \| null`	`null`	Имя встроенного или зарегистрированного preset. Когда указано, компонент разрешает значения по умолчанию, варианты и композицию псевдонимов из реестра preset.
`template`	`string \| HubSkeletonTemplateDefinition \| null`	`null`	Строка DSL в стиле Emmet или объект определения шаблона с необязательными переопределениями адаптивных breakpoint.
`params`	`HubSkeletonParams`	`{}`	Сериализуемые параметры, интерполируемые в placeholder `{{param}}` перед разбором и расширением preset.
`variant`	`string \| null`	`null`	Необязательное имя варианта preset, например `compact`, используемое для переключения значений шаблона по умолчанию или переопределения базового шаблона preset.
`animated`	`boolean`	`true`	Включает или отключает анимацию shimmer, сохраняя тот же макет placeholder.
`appearance`	`'default' \| 'subtle' \| 'contrast'`	`'default'`	Изменяет визуальную интенсивность поверхностей skeleton без изменения разрешённого макета.
`ariaLabel`	`string`	`'Loading placeholder'`	Доступная метка, применяемая к элементу контейнера для вспомогательных технологий.

События

События пока не задокументированы.

Шаблоны

Сделайте его своим — 3 слотов шаблона позволяют проецировать собственную разметку.

Имя	Описание	Пример
`Bundled Presets`	Доступные имена preset в начальном каталоге: 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 и empty-state-skeleton.	`<hub-skeleton preset="table-row" [params]="{ columns: 4 }"></hub-skeleton>`
`Preset DSL`	Компактный строковый синтаксис, поддерживающий имена узлов, модификаторы, композицию соседних элементов через `+`, вложение дочерних элементов через `>` и повторение через `*N`.	`<hub-skeleton template="stack(gap:12)>circle(size:40)+stack(gap:8)>line(width:42%)+line(width:72%)"></hub-skeleton>`
`provideHubSkeletonPresets`	Регистрирует пользовательские preset во внедрении зависимостей Angular, чтобы любой компонент мог отрисовывать их по имени.	`providers: [provideHubSkeletonPresets([{ name: 'profile-card', template: 'stack(gap:16)>circle(size:72)+line(width:48%)' }])]`

CSS-переменные

Тематизируйте каждый пиксель с помощью 5 CSS-переменных. Переопределите их в :root или ограничьте их областью обёртки.

Визуальные tokens

Основные CSS-переменные, предоставляемые host-компонентом.

Переменная	По умолчанию	Тип	Описание
`--hub-skeleton-bg`	`rgba(148, 163, 184, 0.18)`	color	Базовый цвет placeholder, используемый для видимых поверхностей skeleton.
`--hub-skeleton-highlight`	`rgba(255, 255, 255, 0.52)`	color	Цвет подсветки, используемый градиентом shimmer.
`--hub-skeleton-radius`	`12px`	length	Радиус скругления по умолчанию для узлов block и line.
`--hub-skeleton-gap`	`12px`	length	Промежуток по умолчанию, используемый узлами stack и grid, когда не переопределён модификаторами.
`--hub-skeleton-animation-duration`	`1.35s`	transition	Длительность цикла анимации shimmer.

Стилизация и тематизация

Примеры стилизации пока не задокументированы. В этом разделе будут рецепты кастомизации и примеры тематизации.