Drawer

Shares the dialog focus contract. Right and bottom placement are supported. No drag dismissal in this release.

Preview

Open in the playground

Usage

DrawerExample.vueVue / TS

<script setup lang="ts">
import { ref } from 'vue'
import { FzDrawer } from '@chrisdalbano/forza-ui'
const open = ref<boolean>(false)
</script>

<template>
  <button @click="open = true">Open filters</button>
  <FzDrawer v-model="open" title="Filters" side="right"
    ><p>Your filters.</p></FzDrawer
  >
</template>

TypeScript exampleSource you can use.

Import the shared stylesheet once and wrap your app in .fz-theme. See installation.

Props

Name	Type	Required	Default
title	string	Yes	None
description	string | undefined	No	None
side	"right" | "bottom" | undefined	No	"right"
closeOnOutside	boolean | undefined	No	true
modelValue	boolean	Yes	None

Events and state

v-model: boolean

• update:modelValue: [value: boolean]

Slots

default({close}), footer({close})

Add from source

forza add drawer

Set up the CLI first. Generated API tables come from the Vue source, using Vue Language Tools.