Sheet

Side panel

A panel from the edge of the screen that keeps the page's context — a cart, filters, a detail pane, navigation on phones. From the bottom on phones, see Drawer.

Basic

Filters

Native <dialog> side panel. Esc / backdrop / × close it.

<script setup lang="ts">
import { ref } from "vue";
import { BlessButton, BlessSheet, BlessText } from "blessing-ui";
const open = ref(false);
const side = ref<"left" | "right" | "top" | "bottom">("right");
function show(s: typeof side.value) {
  side.value = s;
  open.value = true;
}
</script>

<template>
  <div class="row">
    <BlessButton
      v-for="s in ['right', 'left', 'top', 'bottom'] as const"
      :key="s"
      variant="outline"
      @click="show(s)"
      >{{ s }}</BlessButton
    >
  </div>
  <BlessSheet v-model="open" :side title="Filters">
    <BlessText as="p">Native &lt;dialog&gt; side panel. Esc / backdrop / × close it.</BlessText>
    <template #footer>
      <BlessButton variant="outline" @click="open = false">Cancel</BlessButton>
      <BlessButton @click="open = false">Apply</BlessButton>
    </template>
  </BlessSheet>
</template>

• A native <dialog> like Modal: inert page, Tab trapped, Esc closes, focus returns. title or #title names it.
• dismissible (default) lets Esc, the backdrop and (with handle) a swipe down close it; off, only your own control does.
• side picks the edge; size its width or height.

Usage

import { BlessSheet } from "blessing-ui";

API

Props

Name	Type	Default	Description
side	"top" | "bottom" | "left" | "right"	"right"
title	string	—
size	string	—
dismissible	boolean	true
closeLabel	string	"Close"
handle	boolean	—	bottom drawer: show drag handle and allow swipe-down to close
modelValue	boolean	false

Events

Name	Payload	Description
update:modelValue	[value: boolean]
close	[]

Slots

Name	Scope	Description
title	—
default	—
footer	—