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 автоматично переходять у режим накладання через запит @container, як тільки внутрішній розмір цього елемента (inline-size) стає меншим за ширину панелі + --pantoken-bp-md. Поведінка @pantoken/interactions додатково переключає [should-overlay-tray]/.-should-overlay-tray (ручне примусове керування) і генерує overlaytraychange для додатків, яким потрібна ця зміна як подія.

Підкомпоненти ​

Пов'язані ​

  • tray — Автономне накладне краєве вікно; цей макет тримає панель і вміст в одному потоці.
  • context-view — Менша прикріплена поверхня для контекстних дій і деталей.