Drawer

Bottom sheet with swipe-to-close

A panel that slides up from the bottom on phones — filters, a share sheet, details for a map pin. On wide screens a Sheet from the side or a Modal usually fits better.

Basic

Share

Drag the handle down 80px to close.

<script setup lang="ts">
import { ref } from "vue";
import { BlessButton, BlessDrawer, BlessText } from "blessing-ui";
const open = ref(false);
</script>

<template>
  <BlessButton @click="open = true">Open drawer</BlessButton>
  <BlessDrawer v-model="open" title="Share">
    <BlessText as="p">Drag the handle down 80px to close.</BlessText>
    <div class="row" style="margin-top: 12px">
      <BlessButton size="sm">Twitter</BlessButton>
      <BlessButton size="sm" variant="outline">Copy link</BlessButton>
    </div>
  </BlessDrawer>
</template>

• A Sheet from the bottom with a drag handle. Esc, the backdrop and the handle close it; :dismissible="false" keeps it open until your own button closes it.
• title (or #title) names it.

Usage

import { BlessDrawer } from "blessing-ui";

API

Props

Name	Type	Default	Description
title	string	—
dismissible	boolean	true
closeLabel	string	—
modelValue	boolean	false

Events

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

Slots

Name	Scope	Description
title	—
default	—
footer	—