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

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

Установка и базовая конфигурация

Для использования компонентов необходимо установить пакет через npm:

npm install carbon-components-svelte carbon-components
  • carbon-components-svelte — набор Svelte-компонентов.
  • carbon-components — CSS и JavaScript стили, обеспечивающие правильное отображение компонентов.

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

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

Здесь g10.css — это одна из цветовых тем Carbon. Доступны также g90.css и g100.css.

Импорт отдельных компонентов

Svelte поддерживает импорт компонентов напрямую из npm-пакета. Например, для использования кнопки:

import { Button } from 'carbon-components-svelte';

Важные моменты при импорте:

  • Компоненты импортируются строго по именам, как они экспортированы библиотекой.
  • Возможен именованный импорт нескольких компонентов в одной строке:
import { Button, TextInput, Checkbox } from 'carbon-components-svelte';

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

После импорта компонент можно использовать как любой другой Svelte-компонент:

Особенности синтаксиса Carbon Components Svelte:

  • Атрибут kind у Button определяет стиль кнопки (primary, secondary, danger и др.).
  • Двусторонняя привязка bind:value и bind:checked используется для реактивного управления состоянием.
  • Компоненты Svelte поддерживают стандартные события через on:event.

Динамический импорт компонентов

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



{#if Button}
  
{:else}
  
Загрузка компонента...

{/if}

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

Импорт и настройка тем

Carbon Components поддерживает несколько тем оформления (g10, g90, g100). Для переключения темы достаточно подключить соответствующий CSS-файл:

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

Темы можно менять динамически с помощью Svelte-реактивности, комбинируя с динамическим импортом CSS:

Совместимость с TypeScript

Carbon Components Svelte поставляется с TypeScript-типами. Импорт компонентов в .ts или .svelte с TypeScript выглядит аналогично:

import type { ButtonProps } fr om 'carbon-components-svelte';
import { Button } from 'carbon-components-svelte';

let btnProps: ButtonProps = { kind: 'primary' };

Использование типов позволяет проверять передаваемые параметры и предотвращает ошибки при сборке.

Импорт вспомогательных утилит

Библиотека предоставляет не только визуальные компоненты, но и вспомогательные функции и константы:

import { prefix } from 'carbon-components-svelte';
console.log(prefix); // "bx" — префикс классов CSS

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

Структура рекомендуемого импорта

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

// src/lib/carbon-components.js
export { Button, TextInput, Checkbox, Modal } from 'carbon-components-svelte';

В других частях приложения можно импортировать только из этого файла:

import { Button, Modal } from '$lib/carbon-components';

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

Оглавление