Vitral 0.2
Overlay

Drawer

A panel that slides in from an edge of the viewport, or covers it, with the same modal behaviour as Dialog.

WAI-ARIA tested

Import

main.ts
import { Drawer } from '@vitral/vue';

Positions

<script setup lang="ts">import { Button, Drawer } from '@vitral/vue';import { ref } from 'vue'; type Position = 'left' | 'right' | 'top' | 'bottom' | 'full'; const visible = ref(false);const position = ref<Position>('left');const positions: Position[] = ['left', 'right', 'top', 'bottom', 'full'];const links = ['Inbox', 'Drafts', 'Sent', 'Archive', 'Trash']; function open(where: Position) {    position.value = where;    visible.value = true;}</script> <template>    <Button v-for="p in positions" :key="p" :label="p" severity="secondary" :icon="p === 'full' ? 'maximize' : 'sidebar'" @click="open(p)" />    <Drawer v-model:visible="visible" header="Mail" :position="position">        <nav aria-label="Folders" style="display: flex; flex-direction: column; gap: 2px">            <a v-for="link in links" :key="link" href="#" class="demo-drawer-link" @click.prevent="visible = false">{{ link }}</a>        </nav>        <template #footer>            <Button label="Compose" icon="pencil" fluid @click="visible = false" />        </template>    </Drawer></template> <style scoped>.demo-drawer-link {    padding: var(--vt-navigation-item-padding);    border-radius: var(--vt-navigation-item-border-radius);    color: var(--vt-navigation-item-color);    text-decoration: none;} .demo-drawer-link:hover {    background: var(--vt-navigation-item-focus-background);} .demo-drawer-link:focus-visible {    outline: var(--vt-focus-ring-width) var(--vt-focus-ring-style) var(--vt-focus-ring-color);    outline-offset: -2px;}</style>

API

Read from packages/vue/src/components/Drawer/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
headerstringThe title; it names the drawer. Without one, name it with `aria-label` or `aria-labelledby`.
positionDrawerPositionThe edge it slides in from, or `'full'` to cover the viewport. Defaults to `'left'`.
modalbooleanDim and block the page, trap focus and lock scrolling. Defaults to true.
dismissablebooleanClose on a press on the mask. Defaults to true.
closeOnEscapebooleanDefaults to true.
showCloseIconbooleanShow the close button. Defaults to true.
blockScrollbooleanLock the page's scroll even when the drawer is not modal.
appendTostring`'body'` (the default), `'self'` to render in place, or a selector.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
show——
hide——
after-hide—After the closing animation, once the drawer has left the page.

Slots

NameSlot propsDescription
default——
header—Replaces the title text; it still names the drawer.
footer——
closeicon——