Skeleton

Skeleton — это компонент, предназначенный для отображения временных заготовок контента до того момента, пока реальные данные не загрузятся. Он помогает улучшить пользовательский опыт, создавая ощущение интерактивности и динамики интерфейса, предотвращая «пустые» экраны при асинхронной загрузке данных.

Основные свойства Skeleton

Компонент Skeleton в Naive UI обладает набором свойств, позволяющих гибко настраивать внешний вид и поведение.

  1. loading Тип: boolean Определяет, отображать ли скелетон или реальный контент.

    <n-skeleton :loading="isLoading">
  <template #default>
    <div>Контент загружен</div>
  </template>
</n-skeleton>

  2. animation Тип: 'none' | 'wave' | 'pulse' Позволяет задавать тип анимации скелетона.

    • none — без анимации
    • wave — волнообразная анимация
    • pulse — плавное мерцание
    <n-skeleton animation="wave" :loading="true" />

  3. round Тип: boolean Позволяет скруглить углы скелетона. Полезно для имитации аватаров или круглых карточек.

    <n-skeleton round :loading="true" style="width: 50px; height: 50px;" />

  4. repeat и rows

    • repeat — количество повторяющихся блоков.
    • rows — количество строк в одном блоке. Используется для имитации списков и таблиц.
    <n-skeleton :rows="3" :repeat="2" :loading="true" />

  5. width и height Позволяют задать размеры скелетона для точного соответствия будущему контенту.

    <n-skeleton style="width: 200px; height: 20px;" />

Слоты Skeleton

Naive UI поддерживает использование слотов для отображения реального контента, который заменяет скелетон после загрузки:

  • default — основной слот, в который помещается реальный контент.

    <n-skeleton :loading="loading">
  <template #default>
    <p>Данные загружены</p>
  </template>
</n-skeleton>

  • avatar — слот для отображения аватара или иконки с отдельным стилем.

    <n-skeleton :loading="true">
  <template #avatar>
    <n-avatar size="40" />
  </template>
</n-skeleton>

  • title — слот для заголовка, который может быть заменён на текст после загрузки.

Продвинутое использование

Скелетон для списков и таблиц Комбинируя repeat и rows, можно создавать заготовки для сложных компонентов:

<n-skeleton :loading="isLoading" :repeat="5" :rows="3">
  <template #default>
    <n-list :data="listData" :render-item="item => <n-list-item>{{ item.text }}</n-list-item>" />
  </template>
</n-skeleton>

Скелетон с кастомными стилями Можно использовать CSS для создания уникальных визуальных эффектов:

<n-skeleton :loading="true" style="background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%); border-radius: 8px;" />

Скелетон с условной подгрузкой Скелетон удобно сочетать с асинхронными методами, чтобы показывать заготовку только во время загрузки данных:

<script setup>
import { ref, onMounted } from 'vue'

const data = ref(null)
const loading = ref(true)

onMounted(async () => {
  const response = await fetch('/api/items')
  data.value = await response.json()
  loading.value = false
})
</script>

<n-skeleton :loading="loading">
  <template #default>
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
  </template>
</n-skeleton>

Практические советы

  • Использовать скелетон там, где загрузка данных занимает более 200–300 мс, чтобы избежать ненужной анимации.
  • Для списка или таблицы всегда использовать repeat, чтобы имитировать реальное количество элементов.
  • Комбинировать round и width/height для точного повторения формы контента (аватаров, кнопок, карточек).
  • Анимация wave подходит для контента с текстовыми блоками, pulse — для изображений или кнопок.
  • Стилизация через style или CSS-классы позволяет интегрировать скелетоны в любой дизайн системы.

Skeleton в Naive UI — мощный инструмент для создания плавного, отзывчивого интерфейса, который визуально сообщает пользователю о процессе загрузки данных, минимизируя ощущение пустоты и задержки.

Оглавление