SwSkeleton
Компонент SwSkeleton используется для анимации загрузки данных, выступая оболочкой компонента SwSkeletonItem
или пользовательского компонента при использовании слота #skeleton, по умолчанию в слот #skeleton добавлен 1 SwSkeletonItem с базовыми настройками
Свойства / Properties
| Имя | Тип | По умолчанию | Значения/Описание |
|---|---|---|---|
class | String | sw-skeleton | Добавляет пользовательский CSS-класс к компоненту. |
visual | Boolean | false | Тригер на переключение. |
Слоты / Slots
Default - Содержимое #skeleton - слот для skeleton
Пример использования / Example Usage
<script setup>
import { ref } from 'vue'
const skeletonReady = ref(false)
</script>
<sw-button size="small" @click="skeletonReady = !skeletonReady">
{{ skeletonReady ? 'Показать скелетон' : 'Показать контент' }}
</sw-button>
<sw-skeleton :visual="skeletonReady">
<p>Загруженный контент.</p>
<template #skeleton>
<sw-skeleton-item animate width="80" />
<sw-skeleton-item animate size="small" width="60" />
<sw-skeleton-item animate width="40" />
</template>
</sw-skeleton>