CSS: drawer-layout ​

.instui-drawer-layout — Susun atur berpecah dengan dulang sisi boleh-kembang dan panel kandungan utama boleh tatal.

-placement-end dan lalai (start) kedua-duanya menggunakan sifat logik flex-direction/inset-inline-*, bukan left/right, jadi sisi dulang mengikuti direction/dir="rtl" secara automatik — tiada peraturan RTL berasingan diperlukan.

Source: drawer-layout.css

Aksesibiliti ​

Apabila dulang berfungsi sebagai navigasi, labelkan ia dengan pengepala boleh-akses atau aria-label. Beri .content role="region" (konvensyen InstUI's DrawerLayout) dan namakan ia dengan aria-label/aria-labelledby apabila konteks sahaja tidak mengenalinya.

Penggunaan ​

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

Contoh ​

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

Struktur ​

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;

Pemodifikasi ​

PemodifikasiPenerangan
.-openTunjukkan dulang walaupun atribut open tiada.
.-placement-endLetakkan dulang di sisi inline-end.
.-placement-startLetakkan dulang di sisi inline-start (lalai; menetapkannya secara eksplisit).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Bahagian ​

BahagianPenerangan
.contentPanel utama.
.trayPanel sisi.

Hartanah tersuai ​

SifatJenisLalaiPenerangan
--pantoken-bp-md——Ambang lebar untuk mod overlay (30em, bertema melalui utiliti responsif).

Sokongan pelayar ​

  • Ahli drawer-layout.tray/drawer-layout.content beralih ke mod overlay secara automatik melalui pertanyaan @container sebaik sahaja ukuran-inline elemen ini jatuh di bawah lebar-dulang + --pantoken-bp-md. Perilaku @pantoken/interactions juga menukar [should-overlay-tray]/.-should-overlay-tray (ganti manual) dan menghantar overlaytraychange untuk aplikasi yang memerlukan perubahan itu sebagai acara.

Subkomponen ​

Berkaitan ​

  • tray — Overlay tepi berdiri sendiri; susun atur ini mengekalkan dulang dan kandungan dalam aliran yang sama.
  • context-view — Permukaan bersandar yang lebih kecil untuk tindakan kontekstual dan butiran.