Drawer

A panel that slides out from the edge of the screen to display side content or forms.

Basic Usage

Status: Closed

Example

Direction

Example

Sizes

Example

Close Button

Example

API

Props

Name	Type	Default	Description
open	boolean	false	Whether the drawer is open
defaultOpen	boolean	false	Default open state
direction	string	'bottom'	Direction: top, bottom, left, right
dismissible	boolean	true	Whether the drawer can be dismissed
modal	boolean	true	Whether the drawer is modal

DrawerContent Props

Name	Type	Default	Description
showHandle	boolean	false	Whether to show the handle
showClose	boolean	false	Whether to show the close button
class	string	-	Custom class
shouldScaleBackground	boolean	false	Whether to scale background
activeSnapPoint	string | number	-	Active snap point

Slots

Name	Description
default	Trigger content
content	Drawer content
header	Header content
footer	Footer content

Emits

Event	Description	Parameters
update:open	Fired when open state changes	(value: boolean)
close	Fired when closed	-

Usage Example

<script setup lang="ts">
import { ref } from 'vue'
import { BrButton, BrDrawer, BrDrawerContent, BrDrawerHeader, BrDrawerTitle, BrDrawerTrigger } from '@breezeui/vue'

const isOpen = ref(false)
</script>

<template>
  <BrDrawer v-model:open="isOpen">
    <BrDrawerTrigger>
      <BrButton>Open Drawer</BrButton>
    </BrDrawerTrigger>
    <BrDrawerContent>
      <BrDrawerHeader>
        <BrDrawerTitle>Title</BrDrawerTitle>
      </BrDrawerHeader>
      <div>Content...</div>
    </BrDrawerContent>
  </BrDrawer>
</template>