CSS: drawer-layout ​

.instui-drawer-layout — Tata letak terpisah dengan laci samping yang dapat dilipat dan panel konten utama yang dapat digulir.

-placement-end dan default (start) keduanya menggunakan properti logis flex-direction/inset-inline-*, bukan left/right, jadi sisi tray mengikuti direction/dir="rtl" secara otomatis — tidak diperlukan aturan RTL terpisah.

Source: drawer-layout.css

Aksesibilitas ​

Ketika tray berfungsi sebagai navigasi, beri label dengan heading yang dapat diakses atau aria-label. Berikan .content role="region" (konvensi InstUI's DrawerLayout) dan beri nama dengan aria-label/aria-labelledby ketika konteks saja tidak cukup mengidentifikasinya.

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;

Modifikator ​

ModifikatorDeskripsi
.-openTampilkan tray bahkan ketika atribut open tidak ada.
.-placement-endDock tray di sisi inline-end.
.-placement-startDock tray di sisi inline-start (default; menetapkannya secara eksplisit).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Bagian ​

BagianDeskripsi
.contentPanel utama.
.trayPanel samping.

Properti khusus ​

PropertiTipeBawaanDeskripsi
--pantoken-bp-md——Ambang lebar untuk mode overlay (30em, diberi tema melalui utilitas responsif).

Dukungan peramban ​

  • Anggota drawer-layout.tray/drawer-layout.content beralih ke mode overlay secara otomatis melalui query @container setelah inline-size elemen ini turun di bawah tray-width + --pantoken-bp-md. Perilaku @pantoken/interactions selanjutnya juga mengganti [should-overlay-tray]/.-should-overlay-tray (override manual) dan memancarkan overlaytraychange untuk aplikasi yang membutuhkan perubahan tersebut sebagai event.

Subkomponen ​

Terkait ​

  • tray — Overlay tepi yang berdiri sendiri; tata letak ini menjaga tray dan konten dalam aliran yang sama.
  • context-view — Permukaan yang lebih kecil dan teranchored untuk aksi kontekstual dan detail.