TransactionalModal для подтверждений

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

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

  • open (boolean) Управляет видимостью модального окна. При true модальное окно отображается, при false — скрыто. Часто связывается с реактивной переменной Svelte.

  • modalLabel (string) Верхний ярлык модального окна, обычно короткий текст, например, «Подтверждение удаления».

  • modalHeading (string) Заголовок модального окна. Отображается крупным шрифтом в верхней части окна и привлекает внимание к сути действия.

  • passiveModal (boolean) Определяет тип модального окна. В режиме true окно отображает информацию без кнопок подтверждения и отмены. В режиме false используется TransactionalModal с обязательной реакцией пользователя.

  • primaryButtonText (string) Текст кнопки подтверждения действия, например «Удалить», «Сохранить», «Отправить».

  • secondaryButtonText (string) Текст кнопки отмены или возврата. Обычно «Отмена» или «Назад».

  • danger (boolean) Определяет стиль модального окна как «опасное действие». При значении true кнопка подтверждения получает красную окраску, визуально сигнализируя о риске.

Структура использования

<script>
  import { TransactionalModal } from 'carbon-components-svelte';
  let isOpen = false;

  function confirmAction() {
    console.log("Действие подтверждено");
    isOpen = false;
  }

  function cancelAction() {
    console.log("Действие отменено");
    isOpen = false;
  }
</script>

<TransactionalModal
  open={isOpen}
  modalLabel="Подтверждение удаления"
  modalHeading="Вы уверены, что хотите удалить этот элемент?"
  primaryButtonText="Удалить"
  secondaryButtonText="Отмена"
  danger={true}
  on:secondaryButtonClick={cancelAction}
  on:primaryButtonClick={confirmAction}
/>

Важные особенности и советы

  1. События кнопок TransactionalModal поддерживает два основных события: primaryButtonClick и secondaryButtonClick. Они позволяют привязать пользовательскую логику к кнопкам «Подтвердить» и «Отмена». События всегда передаются как объекты событий Svelte (CustomEvent), поэтому можно использовать event.preventDefault() для предотвращения стандартного поведения.

  2. Реактивное управление видимостью Связывание свойства open с реактивной переменной обеспечивает полный контроль над показом и скрытием модального окна. Изменение переменной автоматически отобразит или закроет модальное окно без дополнительных вызовов методов.

  3. Опасные действия Использование danger={true} не только изменяет визуальный стиль кнопки, но и помогает пользователю осознанно подтвердить рискованное действие. Рекомендуется применять только для операций с необратимыми последствиями.

  4. Пользовательский контент TransactionalModal позволяет вставлять в тело модального окна произвольный контент через слот. Это могут быть списки деталей действия, предупреждающие сообщения или дополнительные инструкции.

<TransactionalModal open={isOpen} modalLabel="Удаление данных" modalHeading="Подтвердите удаление" primaryButtonText="Удалить" secondaryButtonText="Отмена" danger={true}>
  <p>Вы собираетесь удалить следующие элементы:</p>
  <ul>
    <li>Файл 1</li>
    <li>Файл 2</li>
    <li>Файл 3</li>
  </ul>
</TransactionalModal>

  1. Совместимость с формами TransactionalModal может использоваться внутри форм. Для этого достаточно поместить элементы формы внутрь слота модального окна и обработать подтверждение через primaryButtonClick, собирая значения полей формы.

  2. Анимация и UX Компонент поддерживает плавное появление и скрытие, что обеспечивает приятный пользовательский опыт. Рекомендуется использовать анимацию совместно с реактивной переменной open для создания предсказуемого поведения интерфейса.

Примеры продвинутого использования

  • Подтверждение с дополнительной информацией:
<TransactionalModal open={isOpen} modalLabel="Финансовая операция" modalHeading="Вы собираетесь отправить $500" primaryButtonText="Подтвердить" secondaryButtonText="Отмена">
  <p>Получатель: Иван Иванов</p>
  <p>Счёт: 40817810099910000001</p>
  <p>Дата: 21.03.2026</p>
</TransactionalModal>
  • Множественные действия через слоты:
<TransactionalModal open={isOpen} modalLabel="Выбор действия" modalHeading="Выберите вариант" primaryButtonText="Сохранить" secondaryButtonText="Отмена">
  <div>
    <button on:click={() => console.log('Сохранено локально')}>Сохранить локально</button>
    <button on:click={() => console.log('Отправлено на сервер')}>Отправить на сервер</button>
  </div>
</TransactionalModal>

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

Оглавление