Drawer

Basic drawer

Open: false

<script setup>
import { ref } from 'vue'
const open = ref(false)
</script>

<template>
  <FuiDrawer position="end" :open="open" @update:open="open = $event">
    <FuiDrawerTrigger>
      <FuiButton>Open drawer</FuiButton>
    </FuiDrawerTrigger>
    <FuiDrawerOverlay />
    <FuiDrawerSurface size="medium">
      <FuiDrawerTitle>Title</FuiDrawerTitle>
      <FuiDrawerBody>
        <p>Content</p>
      </FuiDrawerBody>
    </FuiDrawerSurface>
  </FuiDrawer>
</template>

Position start

Open: false

<script setup>
import { ref } from 'vue'
const open = ref(false)
</script>

<template>
  <FuiDrawer position="start" :open="open" @update:open="open = $event">
    <FuiDrawerTrigger>
      <FuiButton>Open</FuiButton>
    </FuiDrawerTrigger>
    <FuiDrawerSurface size="medium">
      <FuiDrawerTitle>Title</FuiDrawerTitle>
      <FuiDrawerBody>
        <p>Content</p>
      </FuiDrawerBody>
    </FuiDrawerSurface>
  </FuiDrawer>
</template>

Props

Drawer

Prop	Type	Default	Description
position	start | end	end	Drawer side
modal	boolean	true	Modal behavior
open	boolean	undefined	Controlled open state

DrawerSurface

Prop	Type	Default	Description
size	small | medium | large | full	medium	Drawer width