TableSkeleton для загрузки

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

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

Свойство Тип Описание
rowCount number Количество строк, которые должны отображаться в скелетоне. По умолчанию — 5.
columnCount number Количество колонок скелетона. По умолчанию определяется автоматически на основе columns.
compact boolean Включает компактный режим таблицы с уменьшенной высотой строк.
headers Array<string> Список заголовков колонок. Позволяет задать видимые заголовки даже для скелетона.
border boolean Если true, отображает границы таблицы.

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

Подключение и базовое использование

Импорт компонента осуществляется стандартным способом:

<script>
  import { TableSkeleton } from 'carbon-components-svelte';
</script>

<TableSkeleton rowCount={10} columnCount={5} compact={true} />

В этом примере создается скелетон таблицы с 10 строками и 5 колонками в компактном виде.

Настройка заголовков

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

<script>
  import { TableSkeleton } from 'carbon-components-svelte';

  const headers = ['Имя', 'Возраст', 'Профессия', 'Город', 'Статус'];
</script>

<TableSkeleton rowCount={8} headers={headers} border={true} />

Использование свойства headers позволяет визуально подготовить пользователя к структуре таблицы, улучшая восприятие данных после загрузки.

Компактный режим

Скелетон таблицы поддерживает компактный режим для интерфейсов, где требуется экономия места.

<TableSkeleton rowCount={6} columnCount={4} compact={true} />

В компактном режиме строки становятся ниже, уменьшается пространство между ячейками, что особенно полезно для таблиц с большим количеством колонок на экране.

Стилизация и кастомизация

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

  • Граница таблицы: свойство border добавляет стандартную границу таблицы.
  • Классы CSS: можно использовать классы для дополнительной кастомизации, например, менять цвет фона строк или анимацию скелетона.

Пример с кастомным классом:

<TableSkeleton class="custom-skeleton" rowCount={5} columnCount={3} />
.custom-skeleton .bx--skeleton-row {
  background-color: #e0e0e0;
}

Динамическая генерация скелетона

Для интерфейсов, где количество колонок или заголовков зависит от данных, можно создавать TableSkeleton динамически:

<script>
  import { TableSkeleton } from 'carbon-components-svelte';

  let dataColumns = ['ID', 'Название', 'Категория', 'Цена'];
  let rowCount = 12;
</script>

<TableSkeleton rowCount={rowCount} headers={dataColumns} />

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

Советы по использованию

  • Использовать скелетон только во время загрузки данных, чтобы не перегружать DOM лишними элементами.
  • Совместить с индикатором прогресса, если загрузка данных длительная, чтобы дать пользователю ощущение динамики.
  • Согласованность стилей: таблицы со скелетоном и с реальными данными должны выглядеть идентично по высоте строк и ширине колонок.

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

Оглавление