component
Drawer
Nuxt UI's UDrawer with a colored top edge.
ZDrawer is UDrawer, a bottom sheet, with a 3px top edge in its color.
<script setup lang="ts">
const open = ref(false)
</script>
<template>
<UButton color="neutral" variant="outline" @click="open = true">Filters</UButton>
<ZDrawer v-model:open="open" color="info" title="Filters" description="Narrow the runs list.">
<template #body>
<p class="text-sm text-muted p-4">Filter controls go here.</p>
</template>
</ZDrawer>
</template>API
Everything else is UDrawer's
Only the props below are ZDrawer's own. Every other prop,
v-model, event and slot passes straight through to Nuxt UI's UDrawer. Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral" | "accent" | — | — |
| ui | Record<string, any> | — | — |