/
npmgit

Ghost

Вспомогательный атрибут для создания плейсхолдера контента во время загрузки. A special attribute for creating a content placeholder during loading.

Import

css
@import 'proxima-vue/styles/ghost.css';

Concept

Обычно для создания плейсхолдера используют отдельные компоненты скелетоны, но это усложняет разметку и дублирует структуру. Мне больше нравится идея использовать обычные компоненты, превращая их в скелетон только во время загрузки. Usually, separate skeleton components are used to create a placeholder, but this complicates the layout and duplicates the structure. I prefer the idea of using regular components and turning them into skeletons only during loading.

Use

Для создания плейсхолдера необходимо использовать специальные атрибуты: To create a content placeholder you must use special attributes:

  • data-ghost="true"атрибут состоянияstate attribute
  • data-ghost-itemмаркер блоковitem marker
  • data-ghost-textмаркер текстаtext marker

Example

Допустим у нас есть массив юзеров, сначала мы создаем фейк список: Let's say we have an array of users, first we create a fake list:

user name
user name
user name
user name
user name
html
<div :data-ghost="isPending" :inert="isPending">
  <div v-for="(user, i) in users" :key="`user-${i}`">
    <b v-text="user.name" data-ghost-text />
  </div>
</div>

<button type="button" @click="isPending = !isPending">
  Toggle pending
</button>
js
import { ref } from 'vue';

const placeholderUsers = Array.from(Array(5)).map(() => ({
  name: 'user name',
}));

const users = ref(placeholderUsers);
const isPending = ref(true);

Затем можно загрузить реальные данные и заменить массив, при этом разметка у нас одна и не требуется использовать компоненты скелетоны. Then you can load real data and replace the array. In this case, we have the same markup and do not need to use skeleton components.

CSS

Вы можете cтилизовать ghost элементы через кастомные свойства: You can style the ghost elements through custom properties:

css
:root {
  --ghost-item-color: rgba(107, 107, 107, 0.1);
  --ghost-text-color: rgba(107, 107, 107, 0.2);
  --ghost-text-thickness: 1em;

  --ghost-animation: ProximaGhostAnimation 1s ease both infinite;
  --ghost-animation-opacity-from: 0.75;
  --ghost-animation-opacity-to: 1;
}

Accessibility

Используйте атрибут inert, чтобы вспомогательные технологии игнорировали содержимое во время загрузки: Use the inert attribute to instruct assistive technologies to ignore the content while loading:

html
<div data-ghost="true" inert>
  ... ghost items
</div>
View source on GitHub