InlineNotification для встроенных уведомлений

InlineNotification — это компонент библиотеки Carbon Components Svelte, предназначенный для отображения встроенных уведомлений в интерфейсе. В отличие от глобальных уведомлений (ToastNotification), InlineNotification используется для информирования пользователя прямо в контексте текущего элемента страницы или формы, сохраняя структуру документа и не перекрывая другие элементы интерфейса.

Основные свойства компонента

  • kind (string) — определяет тип уведомления. Возможные значения:

    • error — уведомление об ошибке;
    • info — информационное сообщение;
    • success — успешное выполнение действия;
    • warning — предупреждение.

  • title (string) — заголовок уведомления, который отображается жирным шрифтом. Обычно отражает суть сообщения, например: “Ошибка сохранения” или “Данные обновлены”.

  • subtitle (string, необязательный) — дополнительная текстовая информация под заголовком. Позволяет подробно описать причину или действие пользователя.

  • caption (string, необязательный) — короткая подпись, например дата или источник уведомления.

  • hideCloseButton (boolean, по умолчанию false) — определяет наличие кнопки закрытия. Если значение true, кнопка не отображается.

  • on:close (event) — событие, срабатывающее при закрытии уведомления. Позволяет выполнять дополнительную логику, например удалять уведомление из списка.

<script>
  import { InlineNotification } from 'carbon-components-svelte';

  let showNotification = true;

  function handleClose() {
    showNotification = false;
    console.log('Уведомление закрыто');
  }
</script>

{#if showNotification}
  <InlineNotification
    kind="error"
    title="Ошибка сохранения"
    subtitle="Пожалуйста, проверьте введённые данные"
    on:close={handleClose} />
{/if}

Варианты использования

1. Уведомления в формах InlineNotification часто используется рядом с формами для отображения ошибок валидации. Важно, чтобы уведомление не перекрывало поля ввода и было логически связано с формой.

<form on:submit|preventDefault={submitForm}>
  <input type="text" bind:value={name} placeholder="Имя" />
  {#if nameError}
    <InlineNotification
      kind="warning"
      title="Некорректное имя"
      subtitle="Имя должно содержать только буквы" />
  {/if}
  <button type="submit">Отправить</button>
</form>

2. Уведомления на панели инструментов или внутри блоков контента Для интерфейсов с множеством блоков информации InlineNotification позволяет локализовать сообщение, не мешая остальному содержимому страницы.

<div class="panel">
  <h2>Сводка отчёта</h2>
  {#if reportError}
    <InlineNotification
      kind="error"
      title="Ошибка загрузки отчёта"
      subtitle="Попробуйте обновить страницу или повторить позже" />
  {/if}
</div>

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

Компонент автоматически применяет стили Carbon, включая цвета и отступы, но допускает кастомизацию через CSS-классы и проп class.

<InlineNotification
  kind="info"
  title="Обновление доступно"
  class="custom-notification" />
.custom-notification {
  border-left-width: 4px;
  border-left-color: #0f62fe;
  background-color: #f0f4ff;
}

Доступность и взаимодействие

  • Кнопка закрытия уведомления всегда доступна для клавиатурного управления.
  • При закрытии срабатывает событие on:close, что позволяет интегрировать уведомления с глобальной системой управления состоянием.
  • Заголовок (title) имеет семантический тег <strong>, что повышает читаемость для скринридеров.

Рекомендации по использованию

  • Использовать InlineNotification только для сообщений, которые относятся к конкретной области интерфейса.
  • Не перегружать интерфейс большим количеством уведомлений одновременно — это снижает эффективность восприятия.
  • При необходимости отображения глобальных уведомлений использовать ToastNotification.

Полный пример с динамическим списком уведомлений

<script>
  import { InlineNotification } from 'carbon-components-svelte';

  let notifications = [
    { id: 1, kind: 'info', title: 'Системное обновление', subtitle: 'Перезагрузка не требуется' },
    { id: 2, kind: 'error', title: 'Ошибка загрузки данных', subtitle: 'Сервер недоступен' }
  ];

  function removeNotification(id) {
    notifications = notifications.filter(n => n.id !== id);
  }
</script>

{#each notifications as notif (notif.id)}
  <InlineNotification
    kind={notif.kind}
    title={notif.title}
    subtitle={notif.subtitle}
    on:close={() => removeNotification(notif.id)} />
{/each}

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

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

Оглавление