Создание обёрток над Carbon-компонентами

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

Импорт Carbon-компонентов

Первый шаг при создании обёртки — импорт исходного компонента из библиотеки carbon-components-svelte:

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

Важно сохранять согласованность с именованием компонентов и их типами. Это позволяет избежать конфликтов и правильно использовать все доступные пропсы.

Создание обёртки с дополнительными пропсами

Обёртка должна принимать пропсы, которые будут передаваться внутреннему Carbon-компоненту, а также собственные пропсы для расширенной функциональности:

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

  export let label = 'Click me';
  export let kind = 'primary';
  export let onCl ick = () => {};
</script>

<Button {kind} on:click={onClick}>
  {label}
</Button>

Здесь:

  • label управляет текстом кнопки,
  • kind позволяет выбирать тип кнопки (primary, secondary, danger),
  • onClick добавляет пользовательский обработчик событий.

Такой подход делает компонент универсальным и легко настраиваемым.

Управление событиями и реактивностью

Для более сложных сценариев необходимо перехватывать события Carbon-компонентов и обрабатывать их внутри обёртки. Svelte предоставляет удобный синтаксис для биндинга событий:

<script>
  import { TextInput } from 'carbon-components-svelte';
  
  export let value = '';
  export let placeholder = 'Введите текст';
  
  function handleInput(event) {
    value = event.detail.value;
    dispatch('update', value);
  }
  
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
</script>

<TextInput {value} {placeholder} on:input={handleInput} />
  • createEventDispatcher() позволяет обёртке испускать собственные события.
  • События Carbon-компонента можно модифицировать, добавлять логику валидации или форматирования данных.

Стилизация и CSS-переменные

Обёртки позволяют централизованно управлять стилями компонентов, не изменяя их исходный код. Carbon использует CSS-переменные и классы, что делает кастомизацию гибкой:

<style>
  .custom-button {
    --cds-button-background: #0052cc;
    --cds-button-color: #ffffff;
    border-radius: 8px;
    padding: 12px 24px;
  }
</style>

<Button class="custom-button" {kind} on:click={onClick}>
  {label}
</Button>

Использование классов и CSS-переменных позволяет легко интегрировать фирменный стиль приложения и обеспечивать единообразный дизайн.

Инкапсуляция сложной логики

Обёртки особенно полезны для объединения нескольких Carbon-компонентов в единый комплексный элемент:

<script>
  import { TextInput, Button } from 'carbon-components-svelte';
  
  export let inputValue = '';
  let internalValue = inputValue;
  
  function handleButtonClick() {
    console.log('Отправка:', internalValue);
  }
</script>

<div class="input-group">
  <TextInput bind:value={internalValue} placeholder="Введите текст"/>
  <Button kind="primary" on:click={handleButtonClick}>Отправить</Button>
</div>

<style>
  .input-group {
    display: flex;
    gap: 8px;
  }
</style>

Такой компонент объединяет ввод и кнопку, скрывая внутреннюю логику Carbon-компонентов от остальной части приложения.

Переиспользование и композиция обёрток

Созданные обёртки можно использовать как строительные блоки для более крупных интерфейсов. Они позволяют:

  • стандартизировать обработку событий,
  • централизовать стили,
  • инкапсулировать поведение.

Это упрощает поддержку и масштабирование проекта, уменьшая дублирование кода.

Практические рекомендации

  1. Минимизировать дублирование пропсов — передавать только необходимые.
  2. Использовать биндинг для реактивных данных — обеспечивает автоматическое обновление состояния.
  3. Выносить обработку событий в обёртку — это улучшает читаемость кода и упрощает тестирование.
  4. Стилизация через классы и переменные — безопаснее, чем прямое переопределение внутренних стилей Carbon.
  5. Составные компоненты — объединение нескольких Carbon-компонентов в обёртку повышает модульность и упрощает архитектуру.

Создание обёрток над Carbon-компонентами в Svelte превращает библиотеку в гибкий инструмент для построения интерфейсов, позволяя адаптировать готовые элементы под любые требования приложения, сохраняя при этом их функциональность и стиль.

Оглавление