Работа с SvelteKit

Для интеграции Carbon Components Svelte в проект на SvelteKit необходимо сначала установить пакет через npm или yarn:

npm install carbon-components-svelte carbon-components

Или с использованием yarn:

yarn add carbon-components-svelte carbon-components

После установки рекомендуется импортировать CSS стили Carbon в главный файл приложения, обычно это src/app.css или src/app.html через глобальный импорт:

@import 'carbon-components/css/carbon-components.min.css';

Для динамических проектов с SvelteKit можно также подключать стили через src/routes/+layout.svelte:

Это гарантирует корректное отображение компонентов во всех маршрутах.

Использование базовых компонентов

Carbon Components Svelte предоставляет обширный набор UI-компонентов. Рассмотрим несколько основных примеров с их особенностями.

Кнопки

Ключевые моменты:

  • kind определяет стиль кнопки: primary, secondary, danger, tertiary.
  • События Svelte (on:click) можно использовать для реактивного поведения.
  • Компоненты полностью совместимы с системой стилей Carbon, включая размеры (size="field", size="small").

Формы и элементы ввода

Особенности:

  • Связывание значений через bind:value и bind:checked.
  • Поддержка валидаторов и кастомной логики с помощью стандартных Svelte реактивных конструкций.
  • Компоненты имеют встроенные accessibility-атрибуты (aria-*), соответствующие рекомендациям WCAG.

Карточки и структурированные контейнеры




  
  
    Содержимое карточки, включая текст и элементы интерфейса.

Преимущества использования:

  • Компоненты полностью адаптивны.
  • Поддержка вложенных структур, что удобно для построения панелей и dashboard.
  • Легко комбинируются с другими элементами Carbon, такими как кнопки и таблицы.

Интеграция с SvelteKit: маршруты и состояния

Carbon Components Svelte прекрасно работает с маршрутизатором SvelteKit. Для управления состоянием компонентов рекомендуется использовать реактивные переменные и сторы.

Пример использования состояния для модального окна:






  
Содержимое модального окна

Особенности:

  • bind:open позволяет полностью контролировать видимость модального окна через стор.
  • Использование реактивных переменных обеспечивает синхронизацию состояния между компонентами.
  • Можно интегрировать сложную бизнес-логику с минимальной обвязкой.

Работа с таблицами и списками

Carbon Components Svelte включает таблицы с поддержкой сортировки, фильтрации и пагинации.




  
      
        {#each headers as { header }}
          {header}
        {/each}
      
    
      {#each rows as row}
        
          {row.name}
          {row.age}
        
      {/each}

Ключевые возможности:

  • Легко интегрировать с динамическими данными.
  • Поддержка Svelte-реактивности при изменении данных.
  • Возможность добавления пользовательской логики сортировки и фильтрации.

Темизация и кастомизация стилей

Carbon позволяет изменять темы и цвета компонентов через CSS переменные:

:root {
  --cds-background: #f4f4f4;
  --cds-ui-01: #0f62fe;
}

Для SvelteKit можно импортировать свой кастомный CSS после стилей Carbon, чтобы переопределять переменные и адаптировать интерфейс под корпоративный стиль.

Оптимизация производительности

  • Импортировать только необходимые компоненты, чтобы уменьшить бандл.
  • Использовать svelte:component для динамических компонентов.
  • Минимизировать использование больших таблиц через пагинацию и виртуализацию.

Доступность и международная поддержка

Carbon Components Svelte учитывает WCAG и ARIA-стандарты. Компоненты поддерживают:

  • Клавиатурную навигацию.
  • Локализацию через props translate или кастомные строки.
  • Контрастность и фокусные состояния для улучшенной доступности.
Оглавление