Drawer

Sometimes, Dialog does not always satisfy our requirements, let's say you have a massive form, or you need space to display something like terms & conditions, Drawer has almost identical API with Dialog, but it introduces different user experience.

TIP

Since v-model is natively supported for all components, visible.sync has been deprecated, use v-model="visibilityBinding" to control the visibility of the current drawer.

Basic Usage

Callout a temporary drawer, from multiple direction

You must set model-value for Drawer like Dialog does to control the visibility of Drawer itself, it's boolean type. Drawer has three parts: title & body & footer, the title is a named slot, you can also set the title through attribute named title, default to an empty string, the body part is the main area of Drawer, which contains user defined content. When opening, Drawer expand itself from the right corner to left which size is 30% of the browser window by default. You can change that default behavior by setting direction and size attribute. This show case also demonstrated how to use the before-close API, check the Attribute section for more detail

No Title

When you no longer need a title, you can remove it from the drawer.

Set the withHeader attribute to false, you can remove the title from drawer, thus your drawer can have more space on screen. If you want to be accessible, make sure to set the title attribute.

Customized Content

Like Dialog, Drawer can be used to display a multitude of diverse interactions.

Customized Header

The header slot can be used to customize the area where the title is displayed. In order to maintain accessibility, use the title attribute in addition to using this slot, or use the titleId slot property to specify which element should be read out as the drawer title.

Nested Drawer

You can also have multiple layer of Drawer just like Dialog.

If you need multiple Drawer in different layer, you must set the append-to-body attribute to true

TIP

The content inside Drawer should be lazy rendered, which means that the content inside Drawer will not impact the initial render performance, therefore any DOM operation should be performed through ref or after open event emitted.

TIP

Drawer provides an API called destroyOnClose, which is a flag variable that indicates should destroy the children content inside Drawer after Drawer was closed. You can use this API when you need your mounted life cycle to be called every time the Drawer opens.

API

Attributes

Name Description Type Default
model-value / v-model Should Drawer be displayed boolean false
append-to-body Controls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to true boolean false
append-to 2.8.0 which element the Drawer appends to. Will override append-to-body string body
lock-scroll whether scroll of body is disabled while Drawer is displayed boolean true
before-close If set, closing procedure will be halted Function
close-on-click-modal whether the Drawer can be closed by clicking the mask boolean true
close-on-press-escape Indicates whether Drawer can be closed by pressing ESC boolean true
open-delay Time(milliseconds) before open number 0
close-delay Time(milliseconds) before close number 0
custom-class deprecated Extra class names for Drawer string
destroy-on-close Indicates whether children should be destroyed after Drawer closed boolean false
modal Should show shadowing layer boolean true
direction Drawer's opening direction enum rtl
show-close Should show close button at the top right of Drawer boolean true
size Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is number type, it describes the size by unit of pixels; when size is string type, it should be used with x% notation, other wise it will be interpreted to pixel unit number / string 30%
title Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form string
withHeader Flag that controls the header section's existance, default to true, when withHeader set to false, both title attribute and title slot won't work boolean true
modal-class Extra class names for shadowing layer string
z-index set z-index number
header-aria-level a11y header's aria-level attribute string 2

WARNING

custom-class has been deprecated, and will be removed in 2.3.0, please use class.

Events

Name Description Type
open Triggered before Drawer opening animation begins Function
opened Triggered after Drawer opening animation ended Function
close Triggered before Drawer closing animation begins Function
closed Triggered after Drawer closing animation ended Function
open-auto-focus triggers after Drawer opens and content focused Function
close-auto-focus triggers after Drawer closed and content focused Function

Slots

Name Description
default Drawer's Content
header Drawer header section; Replacing this removes the title, but does not remove the close button.
title deprecated Works the same as the header slot. Use that instead.
footer Drawer footer Section

Exposes

Name Description
handleClose In order to close Drawer, this method will call before-close.

Source

Component Style Docs

Contributors