diff --git a/components/drawer/__tests__/__snapshots__/demo.test.js.snap b/components/drawer/__tests__/__snapshots__/demo.test.js.snap
index e29c46ac0f0b..a803ab9d02f5 100644
--- a/components/drawer/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/drawer/__tests__/__snapshots__/demo.test.js.snap
@@ -57,6 +57,17 @@ exports[`renders ./components/drawer/demo/multi-level-drawer.md correctly 1`] =
`;
+exports[`renders ./components/drawer/demo/no-mask.md correctly 1`] = `
+
+`;
+
exports[`renders ./components/drawer/demo/placement.md correctly 1`] = `
{
- this.setState({
- visible: true,
- });
+const App: React.FC = () => {
+ const [visible, setVisible] = useState(false);
+ const showDrawer = () => {
+ setVisible(true);
};
-
- onClose = () => {
- this.setState({
- visible: false,
- });
+ const onClose = () => {
+ setVisible(false);
};
-
- render() {
- return (
- <>
-
-
- Some contents...
- Some contents...
- Some contents...
-
- >
- );
- }
-}
+ return (
+ <>
+
+
+ Some contents...
+ Some contents...
+ Some contents...
+
+ >
+ );
+};
ReactDOM.render(
, mountNode);
```
-```css
+
diff --git a/components/drawer/demo/no-mask.md b/components/drawer/demo/no-mask.md
new file mode 100644
index 000000000000..f46a5311365b
--- /dev/null
+++ b/components/drawer/demo/no-mask.md
@@ -0,0 +1,50 @@
+---
+order: 99
+title:
+ zh-CN: 无遮罩
+ en-US: No mask
+debug: true
+---
+
+## zh-CN
+
+通过 `mask={false}` 去掉遮罩。
+
+## en-US
+
+Remove mask.
+
+```tsx
+import React, { useState } from 'react';
+import { Drawer, Button } from 'antd';
+
+const App: React.FC = () => {
+ const [visible, setVisible] = useState(false);
+ const showDrawer = () => {
+ setVisible(true);
+ };
+ const onClose = () => {
+ setVisible(false);
+ };
+ return (
+ <>
+
+
+ Some contents...
+ Some contents...
+ Some contents...
+
+ >
+ );
+};
+
+ReactDOM.render(
, mountNode);
+```
diff --git a/components/drawer/demo/placement.md b/components/drawer/demo/placement.md
index 251f9c0800d4..bf8e891f0f0a 100644
--- a/components/drawer/demo/placement.md
+++ b/components/drawer/demo/placement.md
@@ -16,8 +16,6 @@ The Drawer can appear from any edge of the screen.
```jsx
import { Drawer, Button, Radio, Space } from 'antd';
-const RadioGroup = Radio.Group;
-
class App extends React.Component {
state = { visible: false, placement: 'left' };
@@ -44,12 +42,12 @@ class App extends React.Component {
return (
<>
-
+
top
right
bottom
left
-
+
diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
index a4fd42226efc..24b02053d58f 100644
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@@ -137,7 +137,11 @@ class Drawer extends React.Component