pantoken / renderers/web-components/src / drawerLayout

Variable: drawerLayout

const drawerLayout: ElementDefinition

Alpha

<instui-drawer-layout> — a side tray plus main content in a resizable row. The open attribute reveals the tray; placement (start|end) picks the side; a drag handle resizes the --drawer-width custom property (clamped 8–40rem) via pointer capture. 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".

Example

<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>

…

Main content