Drawer

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

<script setup lang="ts">
import MtButton from "@shopware-ag/meteor-component-library/MtButton";
import MtDrawerClose from "@shopware-ag/meteor-component-library/MtDrawerClose";
import MtDrawerContent from "@shopware-ag/meteor-component-library/MtDrawerContent";
import MtDrawerRoot from "@shopware-ag/meteor-component-library/MtDrawerRoot";
import MtDrawerTrigger from "@shopware-ag/meteor-component-library/MtDrawerTrigger";
import MtText from "@shopware-ag/meteor-component-library/MtText";
</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 from "@shopware-ag/meteor-component-library/MtButton";
import MtDrawerContent from "@shopware-ag/meteor-component-library/MtDrawerContent";
import MtDrawerRoot from "@shopware-ag/meteor-component-library/MtDrawerRoot";
import MtDrawerTrigger from "@shopware-ag/meteor-component-library/MtDrawerTrigger";
import MtText from "@shopware-ag/meteor-component-library/MtText";
</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 from "@shopware-ag/meteor-component-library/MtButton";
import MtDrawerContent from "@shopware-ag/meteor-component-library/MtDrawerContent";
import MtDrawerRoot from "@shopware-ag/meteor-component-library/MtDrawerRoot";
import MtDrawerTrigger from "@shopware-ag/meteor-component-library/MtDrawerTrigger";
import MtText from "@shopware-ag/meteor-component-library/MtText";
</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 from "@shopware-ag/meteor-component-library/MtButton";
import MtDrawerContent from "@shopware-ag/meteor-component-library/MtDrawerContent";
import MtDrawerRoot from "@shopware-ag/meteor-component-library/MtDrawerRoot";
import MtDrawerTrigger from "@shopware-ag/meteor-component-library/MtDrawerTrigger";
import MtModal from "@shopware-ag/meteor-component-library/MtModal";
import MtModalRoot from "@shopware-ag/meteor-component-library/MtModalRoot";
import MtText from "@shopware-ag/meteor-component-library/MtText";
import MtTextField from "@shopware-ag/meteor-component-library/MtTextField";

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

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`	`{ 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`	`any`
`footer`	`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`	`{}`

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 closed. 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, and Escape closes the innermost of them first.
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.
The panel receives the focus when it opens. Tab and Shift+Tab stay inside it, and the focus returns to the element that opened it when it closes.
Escape closes the drawer while the focus is inside it.
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: its sidebars become drawers on small screens.

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.