Документация компонентов

В SvelteKit компоненты являются строительными блоками интерфейса. Каждый компонент инкапсулирует структуру (HTML), логику (JS/TS) и стили (CSS/SCSS), что обеспечивает модульность и повторное использование. В UI библиотеках SvelteKit компоненты часто поставляются с расширенным API, позволяющим легко управлять состоянием, событиями и взаимодействием с другими элементами.

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

Типичная структура компонента в SvelteKit UI lib включает три части:

<script lang="ts">
  export let title: string;
  let isOpen = false;

  function toggle() {
    isOpen = !isOpen;
  }
</script>

<style>
  .modal { background: white; padding: 1rem; border-radius: 8px; }
  .hidden { display: none; }
</style>

<div class="modal" class:hidden={!isOpen}>
  <h2>{title}</h2>
  <button on:click={toggle}>Закрыть</button>
</div>
  • <script> — содержит логику компонента, экспортируемые свойства (props), локальное состояние и функции-обработчики событий.
  • <style> — описывает стили компонента. Можно использовать scoped CSS или интеграцию с CSS-in-JS библиотеками, поддерживаемыми UI lib.
  • HTML-разметка — визуальная часть компонента, где динамические данные и состояния связываются через реактивные выражения {}.

Props и реактивность

SvelteKit UI libs активно используют props для передачи данных в компоненты. Пример передачи данных:

<MyButton color="primary" size="large" on:click={handleClick} />
  • color и size — настраиваемые свойства, влияющие на стили.
  • on:click — синтаксис добавления обработчиков событий.

Реактивность обеспечивается с помощью $:, позволяющей автоматически обновлять DOM при изменении состояния:

<script>
  let count = 0;
  $: doubled = count * 2;
</script>
<p>{doubled}</p>
<button on:click={() => count += 1}>Увеличить</button>

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

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

<Modal>
  <h1 slot="header">Заголовок модалки</h1>
  <p>Содержимое модалки</p>
  <button slot="footer">Закрыть</button>
</Modal>
  • slot="header" и slot="footer" — именованные слоты для точного размещения контента.
  • Если слот не передан, компонент может отображать default content, предусмотренный библиотекой.

События и взаимодействие

Компоненты UI libs могут эмитировать кастомные события, которые обрабатываются через on:event:

<Dropdown on:select={handleSelect} />

Внутри компонента событие создаётся с помощью createEventDispatcher:

<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();

  function selectItem(item) {
    dispatch('sel ect', item);
  }
</script>

Это позволяет отделять логическую часть от внешнего взаимодействия.

Стили и темы

Современные UI библиотеки для SvelteKit поддерживают темизацию и варианты стилей через props или CSS-переменные:

<Button variant="outline" color="secondary">Кнопка</Button>
  • variant — определяет базовый стиль (filled, outline, ghost).
  • color — управляет основной цветовой схемой.

Большинство библиотек позволяют переопределять глобальные CSS-переменные для создания собственной темы без изменения исходного кода компонента.

Компоненты высшего порядка и композиция

SvelteKit UI libs активно используют композицию компонентов:

<Card>
  <CardHeader>Заголовок</CardHeader>
  <CardBody>Основное содержимое</CardBody>
  <CardFooter>Подвал</CardFooter>
</Card>
  • Компоненты высшего порядка (Card) предоставляют контейнер с общей структурой.
  • Дочерние компоненты (CardHeader, CardBody, CardFooter) отвечают за семантическое разделение контента.

Это повышает гибкость и снижает дублирование кода.

Управление состоянием

Для UI компонентов важно централизованное управление состоянием. В SvelteKit UI libs используются stores:

<script>
  import { writable } fr om 'svelte/store';
  export const modalOpen = writable(false);
</script>

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

<script>
  import { modalOpen } from './store.js';
</script>

{#if $modalOpen}
  <Modal>Содержимое модалки</Modal>
{/if}
  • $modalOpen — реактивное значение из store.
  • Это позволяет синхронизировать состояние между несколькими компонентами без передачи props через цепочку компонентов.

Анимации и переходы

SvelteKit UI libs часто включают встроенные анимации и переходы. Пример использования transition:

<script>
  import { fade } from 'svelte/transition';
  let visible = true;
</script>

<button on:click={() => visible = !visible}>Toggle</button>
{#if visible}
  <div transition:fade>Появляющийся блок</div>
{/if}
  • Поддерживаются стандартные эффекты: fade, slide, fly, а также пользовательские кастомные функции.
  • Переходы интегрируются напрямую с состоянием, что упрощает визуальные эффекты.

Доступность (Accessibility, a11y)

Компоненты UI libs обычно соответствуют стандартам WCAG и включают ARIA-атрибуты:

<Modal aria-label="Диалоговое окно" role="dialog" />
  • ARIA-атрибуты помогают пользователям с ограниченными возможностями взаимодействовать с интерфейсом.
  • Компоненты с правильной семантикой позволяют экранным читателям корректно интерпретировать контент.

Итоговые принципы работы с компонентами UI libs

  • Модульность: каждый компонент инкапсулирует логику, разметку и стили.
  • Повторное использование: props, слоты и события обеспечивают гибкость.
  • Композиция и иерархия: объединение простых компонентов в сложные структуры.
  • Реактивность и store: состояние синхронизируется между компонентами автоматически.
  • Темизация и кастомизация: изменение внешнего вида через props и CSS-переменные.
  • Доступность и анимации: встроенные переходы и поддержка ARIA-атрибутов делают интерфейс интерактивным и доступным.

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

Оглавление