CSS: drawer-layout ​

.instui-drawer-layout — Макет с разделённой компоновкой: сворачиваемая боковая панель и основная прокручиваемая область содержимого.

-placement-end и значение по умолчанию (start) используют логические свойства flex-direction/inset-inline-*, а не left/right, поэтому сторона расположения панели автоматически следует direction/dir="rtl" — отдельные правила для RTL не требуются.

Source: drawer-layout.css

Доступность ​

Когда панель служит навигацией, пометьте её доступным заголовком или aria-label. Дайте .content role="region" (конвенция InstUI для DrawerLayout) и именуйте её с помощью aria-label/aria-labelledby, если контекст сам по себе не идентифицирует её.

Использование ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/drawer-layout.css";

Примеры ​

html
<div class="instui-drawer-layout" id="drawer" open>
  <aside class="tray">Navigation</aside>
  <main class="content" role="region">Main content</main>
</div>

Структура ​

text
.instui-drawer-layout
  drawer-layout.tray (component)
  drawer-layout.content (component)
flowchart TD n0[".instui-drawer-layout"]:::cssdoc-root n1(["drawer-layout.tray"]):::cssdoc-component n2(["drawer-layout.content"]):::cssdoc-component n0 --> n1 n0 --> n2 click n1 "/api/css/drawer-layout.tray.md" click n2 "/api/css/drawer-layout.content.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Модификаторы ​

МодификаторОписание
.-openПоказывать панель даже при отсутствии атрибута open.
.-placement-endПрикрепить панель к inline-end стороне.
.-placement-startПрикрепить панель к inline-start стороне (по умолчанию; устанавливает это явно).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Части ​

ЧастьОписание
.contentОсновная панель.
.trayБоковая панель.

Пользовательские свойства ​

СвойствоТипПо умолчаниюОписание
--pantoken-bp-md——Порог ширины для режима накладываемой панели (30em, темизируется через утилиты адаптивности).

Поддержка браузеров ​

  • Члены drawer-layout.tray/drawer-layout.content автоматически переключаются в режим overlay через медиа‑запрос @container, когда inline-size этого элемента становится меньше ширины панели + --pantoken-bp-md. Поведение @pantoken/interactions дополнительно переключает [should-overlay-tray]/.-should-overlay-tray (ручной переопределяющий флаг) и испускает overlaytraychange для приложений, которым нужно получать это изменение как событие.

Подкомпоненты ​

Связанные ​

  • tray — Независимая крайняя накладываемая панель; этот макет держит панель и содержимое в одном потоке.
  • context-view — Меньшая закреплённая поверхность для контекстных действий и деталей.