QSkeleton заглушки загрузки

QSkeleton — компонент библиотеки Quasar, предназначенный для создания визуальных заглушек, которые отображаются на месте контента во время его загрузки. Он позволяет улучшить восприятие интерфейса пользователем, создавая иллюзию динамической подгрузки данных. Заглушки могут быть линейными, круглыми, прямоугольными, а также принимать различные размеры и эффекты анимации.

Ключевые свойства:

  • type — тип заглушки (text, rect, avatar, image, icon).
  • width и height — размеры заглушки. Можно использовать фиксированные значения или проценты.
  • animated — включение анимации эффекта «пульсации» для более реалистичной подгрузки.
  • square — делает заглушку квадратной, применимо к аватарам или прямоугольникам.

Типы и визуальные варианты

1. Текстовая заглушка (text) Предназначена для имитации текста. Может отображать одну строку или несколько строк с разной шириной.

2. Прямоугольная заглушка (rect) Используется для блоков контента, например, карточек, изображений или контейнеров данных.

3. Круглая заглушка (avatar) Идеальна для аватаров пользователей, иконок профиля.

4. Иконки и изображения (icon, image) Позволяют заглушкам повторять форму и размер графических элементов интерфейса.

Настройка размеров и адаптивность

Размеры заглушек можно задавать в пикселях, процентах или через CSS-классы. Это обеспечивает гибкость при адаптивной верстке. Например:

Использование классов Quasar Grid System позволяет подстраивать заглушки под сетку и размеры различных устройств без необходимости ручной настройки пикселей.

Анимация заглушек

Свойство animated добавляет эффект мерцания или «пульсации». Это делает интерфейс более живым и информирует пользователя о том, что данные загружаются.

Дополнительно можно использовать CSS-переопределения для изменения скорости или стиля анимации:

.q-skeleton.animated {
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
}

Комплексные примеры использования

1. Список карточек с изображениями и текстом:

2. Профиль пользователя с аватаром и данными:

Комбинация с динамическими данными

QSkeleton часто используют вместе с условным рендерингом: заглушка показывается до завершения загрузки данных через API.

Настройка цвета и темы

Цвет заглушки можно изменять через классы Quasar или CSS-переменные, чтобы они соответствовали общей теме приложения:

Использование классов типа bg-grey-3, bg-primary, bg-accent позволяет быстро интегрировать заглушки в любую цветовую схему.

Применение в сложных интерфейсах

QSkeleton эффективно работает с таблицами, списками, карточками и панелями контента, минимизируя визуальное смещение элементов при загрузке. Для многострочных блоков можно использовать массив заглушек:

Такой подход обеспечивает единообразный интерфейс и плавное появление данных после загрузки.

Оглавление