Disclosure

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

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

В SvelteKit UI Disclosure обычно состоит из двух ключевых частей:

  1. Trigger – кнопка или элемент, который управляет состоянием раскрытия.
  2. Panel – содержимое, которое отображается при раскрытии.

Пример базовой структуры:

<Disclosure>
  <DisclosureTrigger>
    Показать детали
  </DisclosureTrigger>
  <DisclosurePanel>
    Скрытый контент, который раскрывается по клику.
  </DisclosurePanel>
</Disclosure>
  • DisclosureTrigger автоматически привязан к состоянию компонента и управляет показом/скрытием панели.
  • DisclosurePanel рендерится только когда состояние открыто, что оптимизирует производительность.

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

Состояние раскрытия может быть контролируемым или неконтролируемым:

  • Неконтролируемый Disclosure управляется внутренним состоянием:
<Disclosure>
  <DisclosureTrigger>Подробнее</DisclosureTrigger>
  <DisclosurePanel>Контент раскрывается автоматически</DisclosurePanel>
</Disclosure>
  • Контролируемый Disclosure позволяет явно задавать состояние через пропсы:
<script>
  import { writable } from 'svelte/store';
  import { Disclosure, DisclosureTrigger, DisclosurePanel } from 'sveltekit-ui';

  let open = writable(false);
</script>

<Disclosure bind:open={$open}>
  <DisclosureTrigger>Открыть/Закрыть</DisclosureTrigger>
  <DisclosurePanel>Контент раскрытия</DisclosurePanel>
</Disclosure>

Использование bind:open позволяет управлять состоянием из внешнего компонента, синхронизировать его с другими элементами интерфейса или сохранять между сессиями.

Анимация раскрытия

Для плавного появления и скрытия панели можно использовать встроенные анимации Svelte или анимационные пропсы библиотеки:

<Disclosure let:open>
  <DisclosureTrigger>Показать описание</DisclosureTrigger>
  <DisclosurePanel transition:slide>
    Контент с анимацией появления.
  </DisclosurePanel>
</Disclosure>
  • transition:slide — стандартная анимация скольжения.
  • Также поддерживаются fade, scale, fly и пользовательские анимации.

Использование анимаций улучшает UX, делая интерфейс более отзывчивым и визуально понятным.

Комбинация с другими компонентами

Disclosure легко интегрируется с другими UI-элементами:

  • Accordion – несколько Disclosure могут работать вместе как аккордеон с ограничением на одновременное открытие.
  • Form – раскрывающиеся поля ввода для дополнительных настроек.
  • Sidebar/Filter Panel – динамические панели фильтров, которые можно скрывать для экономии места.

Пример использования Disclosure внутри аккордеона:

<Accordion>
  <Disclosure>
    <DisclosureTrigger>Раздел 1</DisclosureTrigger>
    <DisclosurePanel>Контент раздела 1</DisclosurePanel>
  </Disclosure>
  <Disclosure>
    <DisclosureTrigger>Раздел 2</DisclosureTrigger>
    <DisclosurePanel>Контент раздела 2</DisclosurePanel>
  </Disclosure>
</Accordion>
  • В таком случае библиотека автоматически управляет состоянием раскрытия, предотвращая одновременное открытие нескольких разделов (если это предусмотрено логикой Accordion).

Настройка стилей

SvelteKit UI позволяет настраивать визуальное оформление DisclosureTrigger и DisclosurePanel через классы или пропсы:

<Disclosure>
  <DisclosureTrigger class="bg-blue-500 text-white px-4 py-2 rounded">
    Подробнее
  </DisclosureTrigger>
  <DisclosurePanel class="p-4 border border-gray-300 rounded mt-2">
    Содержимое панели с кастомными стилями
  </DisclosurePanel>
</Disclosure>
  • Классы TailwindCSS часто применяются для быстрого прототипирования.
  • Пропсы class и style полностью поддерживаются и позволяют интегрировать Disclosure в любой дизайн-системы.

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

Disclosure поддерживает встроенную ARIA-разметку:

  • aria-expanded на триггере автоматически обновляется при открытии/закрытии.
  • aria-controls связывает триггер с панелью.
  • Поддерживается клавиатурная навигация: открытие с помощью Enter или Space, возможность навигации между несколькими Disclosure через Tab.

Пример с явной проверкой ARIA:

<Disclosure>
  <DisclosureTrigger aria-label="Показать детали" >
    Подробнее
  </DisclosureTrigger>
  <DisclosurePanel>
    Контент с поддержкой ARIA
  </DisclosurePanel>
</Disclosure>
  • Такая реализация делает компонент готовым для использования в продуктах с высокими требованиями доступности.

Продвинутые возможности

  • Lazy Rendering – панель рендерится только при первом раскрытии, экономя ресурсы.
  • Nested Disclosure – можно вкладывать один Disclosure в другой для многоуровневого интерфейса.
  • Custom Icons/Indicators – триггер может содержать иконку, которая вращается или меняется в зависимости от состояния.
<Disclosure let:open>
  <DisclosureTrigger>
    Опции
    <span class="ml-2 transform" class:rotate-90={open}>▶</span>
  </DisclosureTrigger>
  <DisclosurePanel>
    Дополнительные настройки
  </DisclosurePanel>
</Disclosure>
  • Динамическая иконка визуально сигнализирует пользователю о состоянии панели.

Итог

Компонент Disclosure в SvelteKit UI является универсальным инструментом для организации интерактивного, компактного и доступного контента. Его функциональность охватывает:

  • управление состоянием (контролируемое/неконтролируемое),
  • анимации,
  • интеграцию с другими компонентами интерфейса,
  • гибкую стилизацию и поддержку доступности.

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

Оглавление