Skip to content

pantoken / renderers/web-components/src / drawerLayout

ตัวแปร: drawerLayout

const drawerLayout: ElementDefinition

อัลฟา

&lt;instui-drawer-layout&gt; — a side tray plus main content area. The open attribute reveals the tray; placement (start|end) picks the side. Drivable from light DOM via Invoker Commands: <button command="--toggle|--open|--close" commandfor="drawer-id">. Content goes in the default slot; the tray in slot="tray". The interactions behavior auto-toggles overlay mode based on the --pantoken-bp-md threshold.

การเข้าถึง

แผงเนื้อหาใช้ role="region" ซึ่งสอดคล้องกับ DrawerLayout ของ InstUI; ให้ตั้งป้ายเป็น aria-label/aria-labelledby เมื่อบริบทโดยรอบยังไม่ได้ระบุชื่อไว้

ตัวอย่าง

html
<button command="--toggle" commandfor="drawer">Toggle panel</button>
<instui-drawer-layout id="drawer" open placement="start">
  <nav slot="tray">…</nav>
  <article>Main content</article>
</instui-drawer-layout>