{{ item.value }}
{{ item.link }}
list suggestions when activated
list suggestions on input
loading icon1
loading icon2
circle
square
{{ fit }}
default
use collapse-avatars
use collapse-class and collapse-style
use max-collapse-avatars
use collapse-avatars-tooltip
UP
| Name | Thickness | Demo |
| Solid | 1px | |
| Dashed | 2px |
{{ radius.name }}
border-radius:
{{
radius.type
? useCssVar(`--el-border-radius-${radius.type}`)
: '"0px"'
}}
{{ shadow.name }}
{{ getCssVarName(shadow.type) }}
Basic link button
Disabled link button
Basic text button
Background color always on
Disabled text button
Show declarations
```ts type CalendarDateType = | 'prev-month' | 'next-month' | 'prev-year' | 'next-year' | 'today' ```{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
Card name
{{ 'List item ' + o }}
Footer content{{ 'List item ' + o }}
{{ item }}
each carousel-item has a different height
```
### basic.vue
```vue
height 100px
height 200px
height 300px
Switch when indicator is hovered (default)
{{ item }}
Switch when indicator is clicked
```
### card.vue
```vue
{{ item }}
{{ item }}
{{ item }}
Motion blur the switch (default)
{{ item }}
Vertical effect
{{ item }}
normal vertical layout
{{ item }}
card vertical layout
{{ item }}
Show declarations
```ts type CascaderNodeValue = string | number type CascaderNodePathValue = CascaderNodeValue[] type CascaderValue = | CascaderNodeValue | CascaderNodePathValue | (CascaderNodeValue | CascaderNodePathValue)[] type Resolve = (data: any) => void type ExpandTrigger = 'click' | 'hover' type LazyLoad = (node: Node, resolve: Resolve, reject: () => void) => void type isDisabled = (data: CascaderOption, node: Node) => boolean type isLeaf = (data: CascaderOption, node: Node) => boolean interface CascaderOption extends RecordSelect any level of options (Single selection)
Select any level of options (Multiple selection)
Child options expand when clicked (default)
Child options expand when hovered
checkStrictly | Single mode
Multiple mode
Using slots allows for more flexible control over the display.
Display top-level tags only
Filterable (Single selection)
Filterable (Multiple selection)
Display all tags (default)
Collapse tags
Collapse tags tooltip
Max Collapse Tags
Strategy: child (default, show all selected child nodes)
Strategy: parent (show only parent nodes when all children are selected)
Consistent with real life: in line with the process and logic of real
life, and comply with languages and habits that the users are used to;
Consistent within interface: all elements should be consistent, such
as: design style, icons and texts, position of elements, etc.
Operation feedback: enable the users to clearly perceive their
operations by style updates and interactive effects;
Visual feedback: reflect current state by updating or rearranging
elements of the page.
Simplify the process: keep operating process simple and intuitive;
Definite and clear: enunciate your intentions clearly so that the
users can quickly understand and make decisions;
Easy to identify: the interface should be straightforward, which helps
the users to identify and frees them from memorizing and recalling.
Decision making: giving advices about operations is acceptable, but do
not make decisions for the users;
Controlled consequences: users should be granted the freedom to
operate, including canceling, aborting or terminating current
operation.
Consistent with real life: in line with the process and logic of real
life, and comply with languages and habits that the users are used to;
Consistent within interface: all elements should be consistent, such
as: design style, icons and texts, position of elements, etc.
Operation feedback: enable the users to clearly perceive their
operations by style updates and interactive effects;
Visual feedback: reflect current state by updating or rearranging
elements of the page.
Simplify the process: keep operating process simple and intuitive;
Definite and clear: enunciate your intentions clearly so that the
users can quickly understand and make decisions;
Easy to identify: the interface should be straightforward, which helps
the users to identify and frees them from memorizing and recalling.
Decision making: giving advice about operations is acceptable, but do
not make decisions for the users;
Controlled consequences: users should be granted the freedom to
operate, including canceling, aborting or terminating current
operation.
expand icon position:
Consistent with real life: in line with the process and logic of real
life, and comply with languages and habits that the users are used to;
Consistent within interface: all elements should be consistent, such
as: design style, icons and texts, position of elements, etc.
Operation feedback: enable the users to clearly perceive their
operations by style updates and interactive effects;
Visual feedback: reflect current state by updating or rearranging
elements of the page.
Simplify the process: keep operating process simple and intuitive;
Definite and clear: enunciate your intentions clearly so that the
users can quickly understand and make decisions;
Easy to identify: the interface should be straightforward, which helps
the users to identify and frees them from memorizing and recalling.
Consistent with real life: in line with the process and logic of real
life, and comply with languages and habits that the users are used to;
Consistent within interface: all elements should be consistent, such
as: design style, icons and texts, position of elements, etc.
Operation feedback: enable the users to clearly perceive their
operations by style updates and interactive effects;
Visual feedback: reflect current state by updating or rearranging
elements of the page.
Simplify the process: keep operating process simple and intuitive;
Definite and clear: enunciate your intentions clearly so that the
users can quickly understand and make decisions;
Easy to identify: the interface should be straightforward, which helps
the users to identify and frees them from memorizing and recalling.
Decision making: giving advices about operations is acceptable, but do
not make decisions for the users;
Controlled consequences: users should be granted the freedom to
operate, including canceling, aborting or terminating current
operation.
Consistency
Consistent with real life: in line with the process and logic of real
life, and comply with languages and habits that the users are used to;
Consistent within interface: all elements should be consistent, such
as: design style, icons and texts, position of elements, etc.
Operation feedback: enable the users to clearly perceive their
operations by style updates and interactive effects;
Visual feedback: reflect current state by updating or rearranging
elements of the page.
Simplify the process: keep operating process simple and intuitive;
Definite and clear: enunciate your intentions clearly so that the
users can quickly understand and make decisions;
Easy to identify: the interface should be straightforward, which helps
the users to identify and frees them from memorizing and recalling.
Decision making: giving advices about operations is acceptable, but do
not make decisions for the users;
Controlled consequences: users should be granted the freedom to
operate, including canceling, aborting or terminating current
operation.
before collapse return:
Consistent with real life: in line with the process and logic of real
life, and comply with languages and habits that the users are used to;
Consistent within interface: all elements should be consistent, such
as: design style, icons and texts, position of elements, etc.
Operation feedback: enable the users to clearly perceive their
operations by style updates and interactive effects;
Visual feedback: reflect current state by updating or rearranging
elements of the page.
Simplify the process: keep operating process simple and intuitive;
Definite and clear: enunciate your intentions clearly so that the
users can quickly understand and make decisions;
Easy to identify: the interface should be straightforward, which helps
the users to identify and frees them from memorizing and recalling.
Decision making: giving advices about operations is acceptable, but do
not make decisions for the users;
Controlled consequences: users should be granted the freedom to
operate, including canceling, aborting or terminating current
operation.
No border:
With default value
With no default value
```
### predefined-color.vue
```vue
Supported components list
- Cascader - ColorPicker ^(2.10.3) - DatePicker - Select - SelectV2 - TimePicker - TimeSelect - TreeSelect
Using JavaScript controlled animation:
{{ JSON.stringify(globalConfig.transition) }}
Using string transition name:
{{ globalConfig.transition }}
Type:
Underline:
Type:
No border:
Show declarations
```ts import type { Options as PopperOptions } from '@popperjs/core' type TimeLikeType = 'datetime' | 'datetimerange' type Placement = | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' ```
{{ cell.text }}
{{ cell.text + 1 }}期
{{ cell.text + 1 }}y
set prefix-icon
Emits Date object
Value: {{ value1 }}
Use value-format
Value：{{ value2 }}
Timestamp
Value：{{ value3 }}
Default
With quick options
Component value：{{ value }}
date
daterange
Default
Picker with quick options
Default
With quick options
Week
Dates
Year
Years
Month
Months
Default
With quick options
Show declarations
```ts type Placement = | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' ```
Emits Date object
Value: {{ value1 }}
Use value-format
Value：{{ value2 }}
Timestamp
Value：{{ value3 }}
Default
With shortcuts
Default
With shortcuts
With default time
Start and end date time 12:00:00
Start date time 12:00:00, end date time 08:00:00
Current animation: {{ currentAnimation }}
This dialog demonstrates the {{ currentAnimation }} animation effect.
Using object configuration:
{{ JSON.stringify(transitionConfig, null, 2) }}
This is a custom header!
Extra content (Not rendered)
I sit at my window this morning where the world like a passer-by stops for
a moment, nods to me and goes.
```
### custom-content.vue
```vue
What you are you do not see, what you see is your shadow.
Rabindranath Tagore
My wishes are fools, they shout across thy song, my Master. Let me but
listen.
I cannot choose the best. The best chooses me.
Rabindranath Tagore
```
### line-dashed.vue
```vue
What language is thine, O sea?
Rain
```
---
Title: Drawer
URL: https://element-plus.org/en-US/component/drawer
---
# 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.
## Basic Usage
Callout a temporary drawer, from multiple direction
## No Title
When you no longer need a title, you can remove it from the drawer.
## 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.
## Resizable Drawer ^(2.11.0)
Try to drag the edge part.
## Nested Drawer
You can also have multiple layer of `Drawer` just like `Dialog`.
## Modal
Setting `modal` to `false` will hide modal (overlay) of drawer.
Starting from version ^(2.11.7), `modal-penetrable` attribute is added, which can be penetrable.
## 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` | ^[CSSSelector] / ^[HTMLElement] | 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]`(done: (cancel?: boolean) => void) => void(done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure)` | — |
| 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 |
| destroy-on-close | Indicates whether children should be destroyed after Drawer closed | ^[boolean] | false |
| modal | Should show shadowing layer | ^[boolean] | true |
| modal-penetrable ^(2.11.7) | whether the mask is penetrable. The modal attribute must be `false`. | ^[boolean] | false |
| direction | Drawer's opening direction | ^[enum]`'rtl' \| 'ltr' \| 'ttb' \| 'btt'` | rtl |
| resizable ^(2.11.0) | enable resizable feature for Drawer | ^[boolean] | false |
| 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] | — |
| with-header | Flag that controls the header section's existence, 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] | — |
| header-class ^(2.9.3) | custom class names for header wrapper | ^[string] | — |
| body-class ^(2.9.3) | custom class names for body wrapper | ^[string] | — |
| footer-class ^(2.9.3) | custom class names for footer wrapper | ^[string] | — |
| z-index | set z-index | ^[number] | — |
| header-aria-level ^(a11y) | header's `aria-level` attribute | ^[string] | 2 |
| custom-class ^(deprecated) | Extra class names for Drawer | ^[string] | — |
### Events
| Name | Description | Type |
| ---------------------- | ------------------------------------------------------------ | ---------------------------------------------------- |
| open | Triggered before Drawer opening animation begins | ^[Function]`() => void` |
| opened | Triggered after Drawer opening animation ended | ^[Function]`() => void` |
| close | Triggered before Drawer closing animation begins | ^[Function]`() => void` |
| closed | Triggered after Drawer closing animation ended | ^[Function]`() => void` |
| open-auto-focus | triggers after Drawer opens and content focused | ^[Function]`() => void` |
| close-auto-focus | triggers after Drawer closed and content focused | ^[Function]`() => void` |
| resize-start ^(2.11.8) | Triggered when resizing starts (when `resizable` is enabled) | ^[Function]`(evt: MouseEvent, size: number) => void` |
| resize ^(2.11.8) | Triggered while resizing (when `resizable` is enabled) | ^[Function]`(evt: MouseEvent, size: number) => void` |
| resize-end ^(2.11.8) | Triggered when resizing ends (when `resizable` is enabled) | ^[Function]`(evt: MouseEvent, size: number) => void` |
### Slots
| Name | Description |
| ------------------- | ---------------------------------------------------------------------------------------------- |
| default | Drawer's Content |
| header | Drawer header section; Replacing this removes the title, but does not remove the close button. |
| footer | Drawer footer Section |
| title ^(deprecated) | Works the same as the header slot. Use that instead. |
### Exposes
| Name | Description |
| ----------- | --------------------------------------------------------------- |
| handleClose | In order to close Drawer, this method will call `before-close`. |
## Vue Examples
### basic-usage.vue
```vue
set title by slot
This is a custom header!
_(:зゝ∠)_