ModalHeader, ModalBody, ModalFooter

Библиотека Carbon Components Svelte предоставляет набор компонентов для построения интерфейсов в стиле IBM Carbon Design System. Среди ключевых элементов модальных окон выделяются ModalHeader, ModalBody и ModalFooter, которые обеспечивают структурированное и семантически корректное оформление диалогов.

ModalHeader

Компонент ModalHeader отвечает за верхнюю часть модального окна, где обычно располагается заголовок и кнопка закрытия.

Основные свойства:

  • title (string) — текст заголовка модального окна. Обязательное поле для обеспечения доступности.
  • label (string) — дополнительная метка, которая может использоваться для уточнения контекста модального окна.
  • closeable (boolean, по умолчанию true) — определяет наличие кнопки закрытия.
  • on:close — событие, которое срабатывает при нажатии на кнопку закрытия.

Пример использования:

<ModalHeader 
  title="Редактирование профиля" 
  label="Пользовательские данные"
  on:close={() => console.log('Модальное окно закрыто')} />

Особенности:

  • Заголовок автоматически получает семантический тег <h2>, что важно для доступности.
  • Можно использовать слоты, чтобы вставить кастомные элементы вместо стандартной кнопки закрытия:
<ModalHeader title="Настройки">
  <button slot="close" on:click={handleClose}>Закрыть</button>
</ModalHeader>

ModalBody

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

Основные свойства и слоты:

  • scrollable (boolean, по умолчанию true) — позволяет прокручивать содержимое, если оно превышает высоту окна.
  • Слот default — вставка произвольного контента.

Пример использования с формой:

<ModalBody scrollable={true}>
  <form>
    <label>
      Имя:
      <input type="text" name="name" />
    </label>
    <label>
      Email:
      <input type="email" name="email" />
    </label>
  </form>
</ModalBody>

Особенности:

  • Автоматическая адаптация высоты для корректного отображения длинного контента.
  • Поддержка внутренней прокрутки при необходимости, что предотвращает «выбегание» содержимого за границы модального окна.
  • Стилизация через CSS-переменные Carbon позволяет легко менять внешний вид блока без изменения логики компонента.

ModalFooter

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

Основные свойства:

  • primaryButtonText (string) — текст основной кнопки действия.
  • secondaryButtonText (string) — текст вторичной кнопки, например, «Отмена».
  • on:primary — событие для обработки клика по основной кнопке.
  • on:secondary — событие для обработки клика по вторичной кнопке.

Пример использования:

<ModalFooter 
  primaryButtonText="Сохранить" 
  secondaryButtonText="Отмена"
  on:primary={() => saveData()}
  on:secondary={() => cancelEditing()} />

Особенности:

  • Кнопки автоматически наследуют стили Carbon, включая визуальные состояния (hover, focus, disabled).
  • Возможность полностью кастомизировать содержимое через слот default:
<ModalFooter>
  <button class="custom-primary" on:click={saveData}>Сохранить</button>
  <button class="custom-secondary" on:click={cancelEditing}>Отмена</button>
</ModalFooter>
  • Использование ModalFooter совместно с ModalHeader и ModalBody обеспечивает логически завершённую структуру модального окна.

Взаимодействие компонентов

Комбинация ModalHeader, ModalBody и ModalFooter создаёт полностью структурированное модальное окно. Типичная структура:

<Modal open={true} on:close={handleClose}>
  <ModalHeader title="Информация" label="Подробности"/>
  <ModalBody scrollable={true}>
    <p>Здесь размещается основной контент модального окна.</p>
  </ModalBody>
  <ModalFooter 
    primaryButtonText="Применить"
    secondaryButtonText="Закрыть"
    on:primary={applyChanges}
    on:secondary={handleClose} />
</Modal>

Особенности взаимодействия:

  • События on:close, on:primary и on:secondary обеспечивают простое управление состоянием модального окна.
  • Прокрутка контента в ModalBody не влияет на расположение заголовка и футера, что поддерживает пользовательский фокус.
  • Совместимость с адаптивными сетками Carbon позволяет корректно отображать окна на разных разрешениях экрана.

Доступность и семантика

  • Заголовок ModalHeader автоматически создаёт семантический <h2> и подключает атрибут aria-labelledby.
  • Кнопка закрытия использует aria-label, что важно для пользователей экранных читалок.
  • Модальное окно в целом поддерживает role="dialog" и правильное управление фокусом при открытии и закрытии.

Эти компоненты обеспечивают модульность, повторное использование и строгую соответствие стандартам Carbon Design System, что позволяет создавать удобные, доступные и структурно корректные интерфейсы.

Оглавление