ant-design/components/drawer/demo/basic-right.md
yykoypj 766748a501
feat: change visible to open for drawer (#36750)
* feat: change visible to open for Drawer

* refactor: use open internal either

* feat: add warning when use visible

* test: Fix test

Co-authored-by: 二货机器人 <smith3816@gmail.com>
2022-08-23 16:22:00 +08:00

53 lines
864 B
Markdown

---
order: 0
title:
zh-CN: 基础抽屉
en-US: Basic
---
## zh-CN
基础抽屉,点击触发按钮抽屉从右滑出,点击遮罩区关闭。
## en-US
Basic drawer.
```tsx
import { Button, Drawer } from 'antd';
import React, { useState } from 'react';
const App: React.FC = () => {
const [open, setOpen] = useState(false);
const showDrawer = () => {
setOpen(true);
};
const onClose = () => {
setOpen(false);
};
return (
<>
<Button type="primary" onClick={showDrawer}>
Open
</Button>
<Drawer title="Basic Drawer" placement="right" onClose={onClose} open={open}>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
</>
);
};
export default App;
```
<style>
[data-theme='compact'] .ant-drawer-body p {
margin-bottom: 0;
}
</style>