Skeleton

<sf-skeleton> рисует серые фигуры на месте содержимого, которое ещё загружается: строки текста, аватар, изображение, карточку. Страница не прыгает, когда приходят данные, и читатель заранее видит раскладку. Элемент строится на классах компонента Скелетон. Для ожидания без известной раскладки берите Spinner, для известной доли выполненного — Progress Bar.

Пример

<div class="flex gap-3" aria-busy="true" aria-label="Карточка автора загружается">
  <sf-skeleton kind="circle" size="5" type="icon"></sf-skeleton>
  <div class="flex-1">
    <sf-skeleton count="3" width="100%,80%,60%"></sf-skeleton>
  </div>
</div>

Применение

Строки

count (от 1 до 20) задаёт число фигур одного элемента. size — высота каждой фигуры по шкале текста, от 1/7 до 7, по умолчанию 1: берите ступень текста, который появится на этом месте.

width и height принимают список через запятую; значения применяются к фигурам по очереди и повторяются по кругу. Так три строки разной длины описываются одним элементом: width="100%,80%,60%". Значение — процент, имя токена размера (a12, b4) или var(--sf-…); остальные значения игнорируются.

Форма

kind задаёт форму фигуры: text — строка со скруглением (по умолчанию), circle — круг, square — без скругления, rounded — скругление как у строки. type="icon" делает ширину равной высоте — вместе с kind="circle" получается место под аватар или иконку, как в примере.

Движение

animation выбирает движение: pulse — мягкое изменение прозрачности (по умолчанию), wave — блик по фигуре, none — без движения. При системной настройке уменьшения движения фигуры остаются статичными.

Замена на содержимое

Скелетон не знает, когда данные готовы. Приложение держит его на месте содержимого и заменяет, когда ответ пришёл.

const region = document.querySelector('#author');
region.setAttribute('aria-busy', 'true');
const author = await api.getAuthor(id);
region.replaceChildren(renderAuthor(author));
region.removeAttribute('aria-busy');

Доступность

• Фигуры скрыты от экранного диктора и не получают фокус: они ничего не сообщают.
• О загрузке сообщает область, в которой стоит скелетон: задайте ей aria-busy="true" и уберите атрибут, когда содержимое на месте.
• Если ожидание долгое, объявите его текстом с role="status" один раз, а не для каждой фигуры.
• Не используйте скелетон как сообщение об ошибке или пустом результате: когда данных нет, покажите текст.

Справочник API

Раздел собран из манифеста компонента выпуска ui-106d5901f8c3 и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест.

Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: search-placeholder — searchPlaceholder. Свойство атрибута template называется templateName.

Атрибуты

• size — string, по умолчанию 1, значения: 1/7, 1/6, 1/5, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7.
• width — string, по умолчанию 100%.
• height — string, по умолчанию пусто.
• count — number, по умолчанию 1, значения: от 1; до 20.
• animation — string, по умолчанию pulse, значения: pulse, wave, none.
• kind — string, по умолчанию text, значения: text, circle, square, rounded. Форма заглушки: строка текста, круг, квадрат или скруглённый блок.
• items — string, по умолчанию пусто.
• root-class — string, по умолчанию пусто.

Прежние имена:

Методы

• setState(nextState: object) — возвращает object. Записывает каждый ключ как атрибут в kebab-case: false, null, undefined или пустая строка удаляет его, true устанавливает пустым, всё остальное приводится к строке.

События

Своих событий нет; общие события базового элемента перечислены в главе Жизненный цикл → Этапы.

Доступность

• Роль: нет; сгенерированная геометрия заглушки имеет aria-hidden.
• Доступное имя: рекомендуется.
• Фокус: Скелетон не интерактивен и никогда не попадает в порядок табуляции. Область содержимого хоста отвечает за aria-busy и любое озвучиваемое состояние загрузки.

Минимальная разметка

<sf-skeleton></sf-skeleton>

Источник

• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/smart/skeleton
• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/rule/rule.json#name=cl-skeleton

См. также

• Скелетон — фигуры загрузки на классах.
• Spinner — ожидание без известной раскладки.