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

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

Основные типы слотов

  1. Default slot Основной слот, в который помещается контент по умолчанию. Если компонент имеет <slot></slot>, любой контент, переданный внутрь компонента при его использовании, будет размещён в этом месте.

    <!-- Button.svelte -->
<button class="bx--btn">
    <slot></slot>
</button>

<!-- Использование -->
<Button>Нажми меня</Button>

    Здесь текст Нажми меня окажется внутри кнопки благодаря default слоту.

  2. Named slots (именованные слоты) Позволяют вставлять контент в определённые области компонента, используя атрибут name. Именованные слоты критически важны для компонентов с несколькими областями, как, например, модальные окна или карточки.

    <!-- Modal.svelte -->
<div class="bx--modal">
    <header>
        <slot name="header"></slot>
    </header>
    <main>
        <slot></slot>
    </main>
    <footer>
        <slot name="footer"></slot>
    </footer>
</div>

<!-- Использование -->
<Modal>
    <h2 slot="header">Заголовок модального окна</h2>
    <p>Основное содержимое</p>
    <button slot="footer">Закрыть</button>
</Modal>

    Именованные слоты обеспечивают чёткое разделение контента по функциональным областям.

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

Композиция — ключевой подход при построении сложных интерфейсов, позволяющий комбинировать простые компоненты в более крупные, сохраняя при этом переиспользуемость и модульность.

  1. Вложенные компоненты В Svelte можно создавать компоненты, содержащие другие компоненты, передавая слоты внутрь дочерних элементов.

    <Card>
    <CardHeader slot="header">Заголовок карточки</CardHeader>
    <CardBody>Содержимое карточки</CardBody>
    <CardFooter slot="footer">Подпись</CardFooter>
</Card>

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

  2. Переиспользуемые шаблоны с контентом Carbon Components Svelte поддерживает передачу произвольного контента через слоты, что позволяет создавать универсальные шаблоны. Например, список с кастомными элементами:

    <List>
    <ListItem>
        <strong>Элемент 1:</strong> описание
    </ListItem>
    <ListItem>
        <strong>Элемент 2:</strong> описание
    </ListItem>
</List>

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

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

<Dropdown>
    {#each items as item}
        <DropdownItem>{item.label}</DropdownItem>
    {/each}
</Dropdown>

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

Использование слотов для передачи функций и событий

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

<Modal>
    <Form slot="content" on:submit={handleSubmit} />
</Modal>

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

Особенности Carbon Components Svelte

  • Слоты соответствуют дизайн-системе IBM Carbon: компоненты сохраняют визуальное и функциональное соответствие стандартам Carbon.
  • Поддержка accessibility: использование слотов не нарушает правила доступности, так как семантика компонентов сохраняется.
  • Комбинация именованных и default слотов позволяет строить сложные интерфейсы без дублирования кода.

Практические советы

  • Использовать именованные слоты для компонентов с несколькими зонами контента (например, карточки, модальные окна, панели инструментов).
  • Для динамических списков и меню применять циклы и передачу контента через default slot.
  • При передаче функциональных компонентов (кнопки, формы) через слоты обязательно проксировать события вверх, если родитель должен реагировать.

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

Оглавление