Скелетон

Показывает placeholder-изображения, пока контент ещё не загрузился. Блоки-заглушки скрыты от скринридеров через aria-hidden, а контейнер уведомляет об изменении состояния загрузки через aria-busy и aria-live; анимация переливания уважает prefers-reduced-motion.

Базовое использование

Базовое использование

<script setup lang="ts">
import { ref } from 'vue'

const skeletonLoading = ref(true)
</script>

<template>
  <!-- Базовое использование -->
  <LhSkeleton :rows="3" :loading="skeletonLoading">
    <p>Контент загружен: все птицы взлетели высоко в небо, лишь одинокое облако медленно уплывает прочь.</p>
  </LhSkeleton>
  <!-- Переключение состояния загрузки -->
  <LhButton size="small" @click="skeletonLoading = !skeletonLoading">
    {{ skeletonLoading ? 'Показать контент' : 'Показать скелетон' }}
  </LhButton>
</template>

<script>
export default {
  data() {
    return { skeletonLoading: true }
  },
}
</script>

<template>
  <!-- Базовое использование -->
  <LhSkeleton :rows="3" :loading="skeletonLoading">
    <p>Контент загружен: все птицы взлетели высоко в небо, лишь одинокое облако медленно уплывает прочь.</p>
  </LhSkeleton>
  <!-- Переключение состояния загрузки -->
  <LhButton size="small" @click="skeletonLoading = !skeletonLoading">
    {{ skeletonLoading ? 'Показать контент' : 'Показать скелетон' }}
  </LhButton>
</template>

Комбинация с аватаром

Комбинация с аватаром

<script setup lang="ts">
</script>

<template>
  <LhSkeleton avatar :rows="2" />
</template>

<script>
export default {}
</script>

<template>
  <LhSkeleton avatar :rows="2" />
</template>

Отключение анимации

Статичный скелетон

<script setup lang="ts">
</script>

<template>
  <LhSkeleton :rows="3" :animated="false" />
</template>

<script>
export default {}
</script>

<template>
  <LhSkeleton :rows="3" :animated="false" />
</template>

SkeletonItem — отдельный блок-заглушка

SkeletonItem

<script setup lang="ts">
</script>

<template>
  <LhSkeletonItem variant="circle" />
  <LhSkeletonItem variant="rect" style="width: 120px; height: 60px" />
</template>

<script>
export default {}
</script>

<template>
  <LhSkeletonItem variant="circle" />
  <LhSkeletonItem variant="rect" style="width: 120px; height: 60px" />
</template>

Skeleton API

Props

Свойство	Описание	Тип	По умолчанию
loading	Состояние загрузки (при false рендерится слот default)	boolean	true
rows	Количество строк текста	number	3
avatar	Добавлять ли круглую заглушку аватара	boolean	false
animated	Включить ли анимацию	boolean	true
sx	Свойство sx для быстрой вёрстки	LhSxProps	—

Слоты

Слот	Описание
default	Реальный контент, который рендерится, когда loading равно false

SkeletonItem API

Props

Свойство	Описание	Тип	По умолчанию
variant	Форма блока-заглушки	'text' | 'rect' | 'circle'	'text'
animated	Включить ли анимацию	boolean	true
sx	Свойство sx для быстрой вёрстки	LhSxProps	—

Переменные темы

Переменная	Описание	По умолчанию
--lh-skeleton-bg	Базовый цвет блока-заглушки	Цвет туши (text-regular), смешанный с прозрачностью 10%
--lh-skeleton-highlight	Цвет блика переливания	Базовый цвет, осветлённый на 45% в сторону белого
--lh-skeleton-radius	Базовый радиус скругления	--lh-border-radius-small

Доступность

• Блоки-заглушки помечены aria-hidden="true" и не попадают в скринридер
• Контейнер помечен aria-busy="true" + aria-live="polite", после загрузки контент автоматически объявляется
• При prefers-reduced-motion: reduce анимация переливания отключается автоматически

Определения типов

Компонент экспортирует следующие структуры TypeScript (автоматически извлечено из исходников packages/components/skeleton/src/types.ts и @lh-ui/share/core/*; раскройте каждый пункт, чтобы увидеть полное определение; описания свойств — в таблице Props выше):

LhSkeletonProps

export interface LhSkeletonProps {
  /** Состояние загрузки (при false рендерится реальный контент слота default) */
  loading?: boolean
  /** Количество строк текста */
  rows?: number
  /** Добавлять ли круглую заглушку аватара */
  avatar?: boolean
  /** Включить ли анимацию */
  animated?: boolean
  /** Свойство sx для быстрой вёрстки */
  sx?: LhSxProps
}

LhSkeletonItemProps

export interface LhSkeletonItemProps {
  /** Форма блока-заглушки */
  variant?: LhSkeletonVariant
  /** Включить ли анимацию */
  animated?: boolean
  /** Свойство sx для быстрой вёрстки */
  sx?: LhSxProps
}

LhSkeletonVariant _{(из @lh-ui/share/core/skeleton)}

/** Форма блока-заглушки скелетона */
export type LhSkeletonVariant = 'text' | 'rect' | 'circle'