IDrawer ​

A panel attached to an edge of the viewport. It shares IDialog's slots and dismissal behaviour, and can be dragged away.

<IDrawer
  v-model:open="open"
  side="right"
  title="Filters"
  description="Narrow the list down to what you are looking for."
>
  <p>Drag the panel towards its own edge to dismiss it.</p>

  <template #footer="{ close }">
    <IButton variant="outline" @click="close()">
      Reset
    </IButton>
    <IButton @click="close()">
      Apply
    </IButton>
  </template>
</IDrawer>

side picks the edge — right (default), left, top or bottom — and doubles as the direction you drag to dismiss.

Size means different things per edge ​

On a left or right drawer, size is a width. On a top or bottom sheet it is a maximum height, so a short sheet hugs its content. Below the sm breakpoint a side drawer takes the full screen.

Snap points ​

snapPoints gives a sheet resting positions. Values are fractions of the viewport (0.45), pixel numbers, or CSS lengths like '20rem'. v-model:snapPoint reads or sets the current one.

<IDrawer
  v-model:open="open"
  v-model:snap-point="snap"
  side="bottom"
  :snap-points="[0.45, 1]"
  title="Payment method"
  description="Drag the sheet up to see the whole list."
>
  <p>Resting at snap point {{ snap }}.</p>

  <ICard v-for="method in methods" :key="method">
    {{ method }}
  </ICard>
</IDrawer>

With snap points set, size no longer caps the height: the panel is translated between resting positions rather than resized.

Modality ​

modal decides how much of the page the drawer takes over:

• true (default) traps focus and blocks everything behind it.
• 'trap-focus' keeps the page interactive while still holding the Tab ring — what a persistent side panel wants.
• false does neither.

The handle ​

Sheets get a drag handle by default and side drawers do not; handle overrides that in both directions. The whole panel is the drag target, not just the handle.

Dismissal ​

:dismissible="false" refuses the swipe along with Escape and the overlay. The corner button still closes; hide it with :show-close="false".

Props ​

Slots match IDialog: trigger, header, title, description, default (body), and footer (receives close).