Drawer: Add drawer component

[jw-foss]

描述

有些时候, Dialog 可以提供的操作空间非常有限, 虽然说有全屏模式, 但是有时候需要的是一种并非全屏模式的模式, Drawer 组件就很好的补充了这一点, 并且许多 UI 库也都有这个一个组件.

参考:

https://ant.design/components/drawer-cn/
https://material-ui.com/api/drawer/

Commit Message

• 一个全新的扩展组件, 拥有和 Dialog 几乎一致的 API 和交互模式, 可以使得用户的交互更加丰富.
• 对应的 Demo
• 对应的 单元测试
• 对应的 使用文档
• 对应的类型定义

• Make sure you follow Element's contributing guide (中文 | English | Español | Français).
• Make sure you are merging your commits to dev branch.
• Add some descriptions and refer relative issues for you PR.

[element-bot]

Deploy preview for element ready!

Built with commit 6c3638a

https://deploy-preview-16577--element.netlify.com

[jw-foss]

Components Preview

Nested Form

Nested Table

[island205]

标题、段落、代码块之间保持一个空行

[jw-foss]

Got it

[ziyoung]

这两个 mixin 没有用到，可以删除的

[jw-foss]

Popup 用到了, 整个 shadow 视图的管理就是通过这个, 跟 Dialog 几乎一样

[elijahworkz]

This gives an error when compiling:
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@include drawer-animation(rtl)
^
Expected ";".
╷
105 │ @include drawer-animation(rtl)
│ ^
╵
node_modules/element-ui/packages/theme-chalk/src/drawer.scss 105:31 @import
node_modules/element-ui/packages/theme-chalk/src/index.scss 79:9 @import
frontend/assets/scss/_element-variables.scss 90:9 @import
frontend/assets/scss/style.scss 2:9 @import
stdin 33:9 root stylesheet
in /projects/root/node_modules/element-ui/packages/theme-chalk/src/drawer.scss (line 105, column 31)

[jw-foss]

@elijahworkz Hi, if you have any issues, please file an issue to me, with a reproducible repo or CodePen/JSFiddle, thanks.

[elijahworkz]

@JeremyWuuuuu I fixed it by adding the semicolons to the theme-chalk/src/drawer.scss (lines 105, 106, 107, 108) - this seems just to be a typo

since this error happens during build process - I don't really know how to do a reproducible repo or codepen
I'm using laravel-mix with preconfigured webpack. Everything was fine before last update when drawer was added

[jw-foss]

@elijahworkz I will double check the code, but since the CI did not throw any error while compiling, I think this might be related to the loader itself.

[jw-foss]

@elijahworkz I think this is an error, I will fix it in the next release of Element along with other issues, and may I know which version of sass-loader node-sass gulp-sass(if any) do you use? Thanks

[elijahworkz]

@JeremyWuuuuu
I'm using laravel as backend and compile all the frontend script with their laravel-mix (their special configuration of webpack and other stuff)
webpack: 4.27.1,
sass-loader: 7.1.0

[jw-foss]

@elijahworkz My local versions are:
"node-sass": "^4.11.0"
"sass-loader": "^7.1.0"
This did not cause any error while I ran yarn dist inside element-ui

[elijahworkz]

@JeremyWuuuuu well, may be laravel-mix has some strict mode enabled where you have to have semicolon in scss files. I think it's a standard rule anyways (my vscode linter always complains about them when I forget to put one).
So I think better question would be not why my compiler complained, but why it didn't when you compiled it (since it's obviously a typo)

[jw-foss]

@elijahworkz YES! It is a mistake which I will make up for it. Thanks for the heads up. I'll let you know when it's done

[luopc1218]

When I use this component and let it open from right,its will have a scroll at the bottom of the window. But when i let it open from other direction,there is no scroll.its a great component if you fix it!

[QuillerF]

When I use this component and let it open from right,its will have a scroll at the bottom of the window. But when i let it open from other direction,there is no scroll.its a great component if you fix it!

[jw-foss]

@luopc1218 @QuillerF, Hi, I have made a PR to fix this issue, #16953, please let me know if you have further issues. Thanks.

[byteHxC]

Scroll not function

[gentlemango2016]

I set a timeline in drawer,while timeline too long, drawer don`t scroll up and down .
妈耶，看你们都用英文发问题，我也不好意思不用，硬凹的，不知道你们能不能看得懂！希望尽快得到回复，我正想用这个功能。