diff --git a/components.json b/components.json
index c9322ecd0c..8785c19f05 100644
--- a/components.json
+++ b/components.json
@@ -78,5 +78,6 @@
"infinite-scroll": "./packages/infinite-scroll/index.js",
"page-header": "./packages/page-header/index.js",
"cascader-panel": "./packages/cascader-panel/index.js",
- "avatar": "./packages/avatar/index.js"
+ "avatar": "./packages/avatar/index.js",
+ "drawer": "./packages/drawer/index.js"
}
diff --git a/examples/demo-styles/drawer.scss b/examples/demo-styles/drawer.scss
new file mode 100644
index 0000000000..117136171f
--- /dev/null
+++ b/examples/demo-styles/drawer.scss
@@ -0,0 +1,21 @@
+.demo-drawer {
+ &__content {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ form {
+ flex: 1;
+ }
+ }
+
+ &__footer {
+ display: flex;
+ button {
+ flex: 1;
+ }
+ }
+}
+
+.el-drawer__body {
+ padding: 20px;
+}
diff --git a/examples/demo-styles/index.scss b/examples/demo-styles/index.scss
index c838572f1f..2186b96d25 100644
--- a/examples/demo-styles/index.scss
+++ b/examples/demo-styles/index.scss
@@ -43,4 +43,5 @@
@import "./image.scss";
@import "./infinite-scroll.scss";
@import "./avatar.scss";
+@import "./drawer.scss";
diff --git a/examples/docs/en-US/drawer.md b/examples/docs/en-US/drawer.md
new file mode 100644
index 0000000000..d52ac42419
--- /dev/null
+++ b/examples/docs/en-US/drawer.md
@@ -0,0 +1,262 @@
+## 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
+
+:::demo You must set `visible` for `Drawer` like `Dialog` does to control the visibility of `Drawer` itself, it's `boolean` type. `Drawer` has to parts: `title` & `body`, 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
+
+```html
+
+ left to right
+ right to left
+ top to bottom
+ bottom to top
+
+
+
+ open
+
+
+
+ Hi, there!
+
+
+
+```
+:::
+
+### Customization Content
+
+Like `Dialog`, `Drawer` can do many diverse interaction as you wanted.
+
+:::demo
+
+```html
+Open Drawer with nested table
+Open Drawer with nested form
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+:::
+
+### Nested Drawer
+
+You can also have multiple layer of `Drawer` just like `Dialog`.
+:::demo If you need multiple Drawer in different layer, you must set the `append-to-body` attribute to **true**
+
+```html
+
+
+ open
+
+
+
+
+
Click me!
+
+ _(:зゝ∠)_
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+:::
+
+### Nested Drawer
+
+You can also have multiple layer of `Drawer` just like `Dialog`.
+:::demo If you need multiple Drawer in different layer, you must set the `append-to-body` attribute to **true**
+
+```html
+
+
+ open
+
+
+
+
+
Click me!
+
+ _(:зゝ∠)_
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+:::
+
+### Nested Drawer
+
+You can also have multiple layer of `Drawer` just like `Dialog`.
+:::demo If you need multiple Drawer in different layer, you must set the `append-to-body` attribute to **true**
+
+```html
+
+
+ open
+
+
+
+
+
Click me!
+
+ _(:зゝ∠)_
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+:::
+
+### 多层嵌套
+
+`Drawer` 组件也拥有多层嵌套的方法
+
+:::demo 同样, 如果你需要嵌套多层 `Drawer` 请一定要设置 `append-to-body` 属性为 **true**
+
+```html
+
+
+ 点我打开
+
+
+
+
+
打开里面的!
+
+ _(:зゝ∠)_
+
+