Drawer

Experimental.Drawer builds on an alpha primitive, so the API may still change in a future release.

<script setup lang="ts">
import {
  MtButton,
  MtDrawerClose,
  MtDrawerContent,
  MtDrawerRoot,
  MtDrawerTrigger,
  MtText,
} from "@shopware-ag/meteor-component-library";
</script>

<template>
  <mt-drawer-root>
    <mt-drawer-trigger :as="MtButton" variant="secondary">
      Show order
    </mt-drawer-trigger>

    <mt-drawer-content title="Order details" subtitle="#10042" size="24rem">
      <mt-text size="xs">Shipped to Jane Doe, Berlin.</mt-text>

      <template #footer>
        <mt-drawer-close :as="MtButton" variant="secondary">
          Close
        </mt-drawer-close>
      </template>
    </mt-drawer-content>
  </mt-drawer-root>
</template>

Usage

Drawer shows a panel above the page without leaving the current view, for details of a record, a filter panel or a short form. It covers the page with a backdrop and keeps the rest of the page out of reach until it closes.

import {
  MtDrawerRoot,
  MtDrawerTrigger,
  MtDrawerContent,
  MtDrawerClose,
} from "@shopware-ag/meteor-component-library";

Examples

Floating

variant="floating" keeps an 8px distance to the viewport edges and gives the panel a border with rounded corners.

<script setup lang="ts">
import {
  MtButton,
  MtDrawerContent,
  MtDrawerRoot,
  MtDrawerTrigger,
  MtText,
} from "@shopware-ag/meteor-component-library";
</script>

<template>
  <mt-drawer-root>
    <mt-drawer-trigger :as="MtButton" variant="secondary">
      Show order
    </mt-drawer-trigger>

    <mt-drawer-content title="Order details" variant="floating" size="24rem">
      <mt-text size="xs">Shipped to Jane Doe, Berlin.</mt-text>
    </mt-drawer-content>
  </mt-drawer-root>
</template>

Sides

side picks the edge the drawer slides in from. size sets the width of a start or end drawer and the height of a top or bottom drawer.

<script setup lang="ts">
import {
  MtButton,
  MtDrawerContent,
  MtDrawerRoot,
  MtDrawerTrigger,
  MtText,
} from "@shopware-ag/meteor-component-library";
</script>

<template>
  <div class="drawer-sides">
    <mt-drawer-root>
      <mt-drawer-trigger :as="MtButton" variant="secondary">Start</mt-drawer-trigger>
      <mt-drawer-content title="Filters" side="start" size="20rem">
        <mt-text size="xs">Slides in from the start edge.</mt-text>
      </mt-drawer-content>
    </mt-drawer-root>

    <mt-drawer-root>
      <mt-drawer-trigger :as="MtButton" variant="secondary">End</mt-drawer-trigger>
      <mt-drawer-content title="Details" side="end" size="20rem">
        <mt-text size="xs">Slides in from the end edge.</mt-text>
      </mt-drawer-content>
    </mt-drawer-root>

    <mt-drawer-root>
      <mt-drawer-trigger :as="MtButton" variant="secondary">Top</mt-drawer-trigger>
      <mt-drawer-content title="Announcement" side="top">
        <mt-text size="xs">Slides in from the top edge.</mt-text>
      </mt-drawer-content>
    </mt-drawer-root>

    <mt-drawer-root>
      <mt-drawer-trigger :as="MtButton" variant="secondary">Bottom</mt-drawer-trigger>
      <mt-drawer-content title="Selection" side="bottom">
        <mt-text size="xs">Slides in from the bottom edge.</mt-text>
      </mt-drawer-content>
    </mt-drawer-root>
  </div>
</template>

<style scoped>
.drawer-sides {
  display: flex;
  flex-wrap: wrap;
  gap: var(--scale-size-8);
}
</style>

Confirm before closing

Set dismissible to false while a form has unsaved changes. A click on the backdrop, Escape or a swipe then emits dismiss-prevented instead of closing, so you can ask before the changes are lost.

<script setup lang="ts">
import { computed, ref } from "vue";
import {
  MtButton,
  MtDrawerContent,
  MtDrawerRoot,
  MtDrawerTrigger,
  MtModal,
  MtModalRoot,
  MtText,
  MtTextField,
} from "@shopware-ag/meteor-component-library";

const open = ref(false);
const confirmOpen = ref(false);
const customer = ref("");
const isDirty = computed(() => customer.value !== "");

function close() {
  confirmOpen.value = false;
  open.value = false;
  customer.value = "";
}
</script>

<template>
  <mt-drawer-root
    v-model:open="open"
    :dismissible="!isDirty"
    @dismiss-prevented="confirmOpen = true"
  >
    <mt-drawer-trigger :as="MtButton" variant="secondary">
      Edit order
    </mt-drawer-trigger>

    <mt-drawer-content title="Edit order" size="24rem">
      <mt-text-field v-model="customer" label="Customer" />

      <template #footer>
        <mt-button variant="primary" @click="close">Save</mt-button>
      </template>
    </mt-drawer-content>
  </mt-drawer-root>

  <mt-modal-root :is-open="confirmOpen" @change="confirmOpen = $event">
    <mt-modal title="Discard changes?" width="s">
      <mt-text size="xs">The changes to this order are not saved yet.</mt-text>

      <template #footer>
        <div class="drawer-confirm__actions">
          <mt-button variant="secondary" @click="confirmOpen = false">
            Keep editing
          </mt-button>
          <mt-button variant="critical" @click="close">
            Discard changes
          </mt-button>
        </div>
      </template>
    </mt-modal>
  </mt-modal-root>
</template>

<style scoped>
.drawer-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--scale-size-8);
}
</style>

Anatomy

Drawer is built from four companion exports that work together:

mt-drawer-root holds the open state (v-model:open) and decides whether the drawer may be dismissed.
mt-drawer-trigger opens the drawer. Pass as to render another component, such as Button.
mt-drawer-content renders the backdrop and the panel with a header (title, subtitle, close button), the content and an optional footer slot.
mt-drawer-close closes the drawer from anywhere inside it, also when it is not dismissible.

API reference

Root

Props

Prop	Type	Default
`open` Whether the drawer is open. Bind it with `v-model:open` or leave it out to let the drawer manage it.	`false \| true`	`undefined`
`default-open` Whether the drawer starts open when `open` is not bound.	`false \| true`	`false`
`dismissible` Whether a click on the backdrop, Escape or a swipe closes the drawer. When `false`, these emit `dismiss-prevented` instead, for example to confirm discarding unsaved changes. Close buttons always close the drawer.	`false \| true`	`true`

Events

Event	Payload
`update:open`	`[open: boolean]`
`dismiss-prevented`	`[details: { reason: MtDrawerDismissReason; }]`

Slots

Slot	Bindings
`default` The trigger and the content of the drawer, with its `open` state and a `close` function.	`{ open: boolean; close: () => void; }`

Content

Props

Prop	Type	Default
`title` * The title of the drawer. It is also the accessible name of the dialog.	`string`
`subtitle` A short description below the title.	`string`	`undefined`
`side` The edge of the viewport the drawer slides in from.	`"end" \| "start" \| "top" \| "bottom"`	`"end"`
`variant` `floating` keeps an 8px distance to the viewport edges and gets a border with rounded corners.	`"default" \| "floating"`	`"default"`
`size` The width of a `start` or `end` drawer, or the height of a `top` or `bottom` drawer, as a CSS length such as `"30rem"`. Without it, the drawer takes the size of its content.	`string`	`undefined`
`inset` Removes the padding around the content.	`false \| true`	`false`
`hide-header` Hides the header with the title and the close button. The title stays available to assistive technology.	`false \| true`	`false`
`keep-mounted` Keeps the content mounted while the drawer is closed, so its state survives.	`false \| true`	`false`

Slots

Slot	Bindings
`default` The content of the drawer.	`any`
`footer` Actions at the bottom of the drawer, for example a save button.	`any`

Trigger and close

Props

Prop	Type	Default
`as` The element or component to render, for example `MtButton`.	`string \| Component`	`"button"`

Slots

Slot	Bindings
`default`	`{}`

Props

Prop	Type	Default
`as` The element or component to render, for example `MtButton`.	`string \| Component`	`"button"`

Slots

Slot	Bindings
`default`	`{}`

Best practices

Use a drawer for tasks that relate to the current view and can be finished without leaving it.
Always give the drawer a title; it is the accessible name of the dialog, also with hide-header.
Guard forms with dismissible and dismiss-prevented instead of blocking close buttons.

Don't

Do not open a drawer from another drawer; replace its content or use a Modal for a short confirmation.
Do not use a drawer for critical decisions that need the user's full attention; use a Modal.

Behavior

Dismissing. A click on the backdrop, Escape and a swipe towards the edge close the drawer. With dismissible set to false they emit dismiss-prevented with the reason (outside-click, escape-key or swipe) and the drawer stays open. mt-drawer-close and the close button in the header always close it.
Mounting. The content is mounted while the drawer is open and removed after it closes. With keep-mounted it stays mounted, so its state survives closing and opening.
Layering. Drawers share the modal layer with Modal. While a drawer is open, the page behind it is inert. Overlays opened from inside it, such as select result lists, date pickers, popovers and a confirmation modal, render above it and stay usable. An open select result list or tooltip and a confirmation modal take Escape before the drawer, and a date picker handles Escape itself while its calendar has the focus. Popovers do not close on Escape.
Size. Without size, the drawer takes the size of its content, up to the viewport size minus 48px.

Accessibility

The panel is a modal dialog named by its title; subtitle becomes its description. With hide-header, the title stays available to assistive technology, and the subtitle is not shown and does not describe the dialog.
The panel receives the focus when it opens. Tab and Shift+Tab stay inside it, and when it closes, the focus returns to the element that had the focus when the drawer opened, usually its trigger.
Escape closes a dismissible drawer while the focus is inside it. It also does so when the focused element disappeared and the focus fell back to the page. A drawer that is not dismissible emits dismiss-prevented instead.
The slide animation is skipped when the user prefers reduced motion.

Modal: when a short decision needs the user's full attention in the center of the screen.
App: when a standalone application needs sidebars that turn into drawers on small screens on their own.

Edit this pageorReport an issue

Divider

A separator line that visually structures content, horizontally or vertically, with optional centered content.

Email Field

A form input for entering and validating a single email address.