Создание собственных компонентов в стиле Carbon

Carbon Components Svelte предоставляет возможность создавать собственные компоненты, полностью интегрированные с системой дизайна IBM Carbon. Важной особенностью является соблюдение единого визуального языка и поведения, что обеспечивает консистентность интерфейса.

Структура компонента

Любой компонент в Svelte состоит из трёх основных частей: script, style и markup. Для соответствия Carbon рекомендуется:

  1. Script – управление состоянием, обработчики событий, импорт утилит Carbon.
  2. Style – использование Sass-переменных и миксинов Carbon для соблюдения цветовой палитры, типографики и отступов.
  3. Markup – разметка с применением классов Carbon и атрибутов для доступности.

Пример базовой структуры собственного компонента:

<script>
  import { Button } from 'carbon-components-svelte';
  export let label = "Нажми меня";
  let clicked = false;

  function handleClick() {
    clicked = !clicked;
    console.log(`Кнопка ${clicked ? 'активирована' : 'деактивирована'}`);
  }
</script>

<div class="my-component">
  <Button on:click={handleClick}>{label}</Button>
  {#if clicked}
    <p>Состояние кнопки: активное</p>
  {/if}
</div>

<style>
  .my-component {
    margin: 1rem;
  }
</style>

Использование классов Carbon

Все стилизованные элементы должны использовать классы bx-- из Carbon. Для создания новых компонентов следует:

  • Определять собственные префиксы или расширять существующие классы.
  • Использовать миксины и переменные из carbon-components-svelte/css для цветовой схемы и отступов.
  • Придерживаться единых паттернов: кнопки, карточки, формы, таблицы.
<style>
  .my-component__header {
    @include bx--type-heading-03;
    color: $bx--text-heading;
  }
</style>

Работа с состояниями

Carbon активно использует состояния: hover, focus, disabled, selected. В Svelte их можно управлять через реактивные переменные и биндинги:

<script>
  let isDisabled = false;
</script>

<Button disabled={isDisabled}>Отправить</Button>
<input type="checkbox" bind:checked={isDisabled}> Отключить кнопку

Важно: визуальные состояния компонентов должны соответствовать стандартам Carbon, поэтому рекомендуется использовать встроенные классы состояния (bx--btn--disabled, bx--list-box--expanded и т.д.), а не создавать новые.

Слоты и композиция

Для повторного использования компонентов Carbon в собственных компонентах применяются слоты. Слоты позволяют динамически вставлять контент в заранее определённые участки компонента.

<script>
  export let title = "Заголовок";
</script>

<div class="card">
  <div class="card-header">
    <slot name="header">{title}</slot>
  </div>
  <div class="card-content">
    <slot>Основное содержимое карточки</slot>
  </div>
</div>

Слоты особенно полезны для создания обёрток над компонентами Carbon, например, карточек с кнопками, модальных окон или кастомных форм.

Интеграция с системными утилитами

Carbon предоставляет набор утилит для работы с событиями, анимациями, формами и доступностью. При разработке собственных компонентов важно:

  • Использовать утилиты FocusTrap, FloatingMenu для управления модальными окнами и всплывающими списками.
  • Подключать FormItem, Checkbox, RadioButton для консистентных форм.
  • Применять carbon-icons-svelte для добавления иконок в кнопки и элементы управления.
<script>
  import { Close20 } from 'carbon-icons-svelte';
</script>

<Button>
  <Close20 slot="icon"/> Закрыть
</Button>

Настраиваемая тема

Carbon поддерживает кастомизацию темы через Sass-переменные и CSS-переменные. Для собственных компонентов:

  • Определяются собственные переменные, наследующие значения Carbon, например, $my-component-background: $bx--interactive-01;.
  • Стили компонентов могут изменяться динамически с помощью CSS-переменных, что особенно удобно для темной/светлой темы.
<style>
  .my-component {
    background-color: var(--my-component-bg, $bx--interactive-01);
  }
</style>

Лучшая практика

  1. Сохранять совместимость с существующими компонентами Carbon.
  2. Минимизировать создание собственных классов без строгой необходимости.
  3. Использовать слоты для расширяемости и повторного использования.
  4. Применять реактивные переменные для управления состояниями.
  5. Проверять компоненты на соответствие стандартам доступности (WCAG).

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

Оглавление