CSS: drawer-layout ​

.instui-drawer-layout — Układ dzielony z zwijanym panelem bocznym i głównym przewijanym panelem zawartości.

-placement-end i domyślny (start) używają właściwości logicznych flex-direction/inset-inline-*, a nie left/right, więc strona tacki podąża automatycznie za direction/dir="rtl" — nie są potrzebne osobne reguły dla RTL.

Source: drawer-layout.css

Dostępność ​

Gdy tacka pełni rolę nawigacji, oznacz ją dostępnym nagłówkiem lub aria-label. Nadaj .content role="region" (konwencja DrawerLayout InstUI) i nazwij ją za pomocą aria-label/aria-labelledby, gdy sam kontekst nie identyfikuje jej wystarczająco.

Użycie ​

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

Przykłady ​

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

Struktura ​

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;

Modyfikatory ​

ModyfikatorOpis
.-openPokaż tackę nawet gdy atrybut open jest nieobecny.
.-placement-endZakotwicz tackę po stronie inline-end.
.-placement-startZakotwicz tackę po stronie inline-start (domyślnie; ustawia to jawnie).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Części ​

CzęśćOpis
.contentGłówny panel.
.trayPanel boczny.

Własne właściwości ​

WłaściwośćTypDomyślnyOpis
--pantoken-bp-md——Próg szerokości dla trybu nakładki (30em, stylowany za pomocą narzędzi responsywnych).

Wsparcie przeglądarek ​

  • Członkowie drawer-layout.tray/drawer-layout.content przełączają się automatycznie w tryb nakładki za pomocą zapytania @container gdy rozmiar inline tego elementu spadnie poniżej szerokości tacki + --pantoken-bp-md. Zachowanie @pantoken/interactions dodatkowo przełącza [should-overlay-tray]/.-should-overlay-tray (ręczne nadpisanie) i emituje overlaytraychange dla aplikacji, które potrzebują tej zmiany jako zdarzenia.

Subkomponenty ​

Powiązane ​

  • tray — Samodzielna nakładka przy krawędzi; ten układ utrzymuje tackę i zawartość w tym samym przepływie.
  • context-view — Mniejsza, osadzona powierzchnia dla kontekstowych akcji i szczegółów.