Добавление новой функциональности

Для работы с Carbon Components Svelte необходимо убедиться, что проект использует Svelte и поддерживает пакетный менеджер npm или yarn. Установка осуществляется командой:

npm install carbon-components-svelte carbon-components

или

yarn add carbon-components-svelte carbon-components

После установки необходимо подключить стили Carbon в основной файл приложения, например, main.js или App.svelte:

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

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

Компоненты импортируются индивидуально для повышения производительности и уменьшения размера сборки:

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

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

Кнопки

Компонент Button поддерживает несколько вариаций и состояния:

<Button kind="primary" on:click={handleClick}>Сохранить</Button>
<Button kind="secondary">Отмена</Button>
<Button kind="danger">Удалить</Button>
  • kind — определяет визуальный стиль кнопки (primary, secondary, danger).
  • disabled — делает кнопку неактивной.
  • size — опционально поддерживает размеры sm, md, lg.

Поля ввода

Компонент TextInput используется для ввода текста с поддержкой ошибок и подсказок:

<TextInput
  labelText="Имя пользователя"
  placeholder="Введите имя"
  bind:value={username}
  invalid={username.length === 0}
/>
  • labelText — текст метки поля.
  • placeholder — подсказка внутри поля.
  • bind:value — двусторонняя привязка данных.
  • invalid — состояние ошибки.

Создание расширенной функциональности

Комбинация компонентов

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

<form on:submit|preventDefault={submitForm}>
  <TextInput labelText="Email" bind:value={email} invalid={!validateEmail(email)} />
  <Button type="submit" kind="primary">Отправить</Button>
</form>

<DataTable {rows} {headers} />

Расширение поведения через события

Carbon Components Svelte предоставляет поддержку событий компонентов, что позволяет реализовать сложное поведение:

<Button on:click={() => console.log('Кнопка нажата')} kind="primary">
  Подтвердить
</Button>

В таблицах и выпадающих списках можно подписываться на события on:change, on:select для отслеживания действий пользователя.

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

Темизация

Carbon поддерживает стандартные темы и позволяет создавать пользовательские:

import 'carbon-components/scss/globals/scss/styles.scss';

С помощью SCSS можно переопределять переменные, такие как цвета, размеры шрифтов и отступы:

$carbon--theme: $carbon--theme--g10;
$interactive-01: #0f62fe;

Кастомные классы

Для добавления уникального визуального поведения можно использовать атрибут class:

<Button class="my-custom-button" kind="primary">Нажать</Button>

И в CSS:

.my-custom-button {
  border-radius: 12px;
  font-weight: bold;
}

Интеграция с состоянием приложения

Carbon Components Svelte полностью совместим с реактивными переменными Svelte. Это позволяет создавать динамические интерфейсы:

<script>
  import { Checkbox } from 'carbon-components-svelte';
  let accepted = false;
</script>

<Checkbox bind:checked={accepted} labelText="Я принимаю условия" />

<Button disabled={!accepted} kind="primary">Продолжить</Button>

Реактивная привязка bind:checked автоматически обновляет состояние кнопки.

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

Для более сложной функциональности можно создавать обертки над компонентами:

<script>
  import { TextInput, Button } from 'carbon-components-svelte';
  export let value = '';
  export let onSub mit = () => {};
</script>

<div class="custom-form">
  <TextInput bind:value={value} labelText="Введите текст" />
  <Button kind="primary" on:click={() => onSubmit(value)}>Отправить</Button>
</div>

Такой подход позволяет стандартизировать повторяющиеся элементы интерфейса и легко масштабировать проект.

Работа с таблицами и данными

Компонент DataTable поддерживает сортировку, пагинацию и фильтрацию:

<DataTable {rows} {headers} sortable={true} pageSize={5} />
  • rows — массив объектов с данными.
  • headers — описание колонок.
  • sortable — включение сортировки.
  • pageSize — количество строк на странице.

Для обработки выбора строк используется событие on:rowSelected:

<DataTable {rows} {headers} on:rowSelected={handleRowSelection} />

Логика добавления новой функциональности

  1. Определение цели компонента — выбрать, какие элементы Carbon использовать.
  2. Композиция — объединить базовые компоненты для сложного интерфейса.
  3. События и реактивность — добавить обработчики действий и привязку состояния.
  4. Кастомизация — изменить стили через SCSS или классы.
  5. Повторное использование — оформить как отдельный компонент для масштабирования.

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

Оглавление