ant-design/components/drawer/demo/render-in-current.tsx
afc163 f2b89da945
refactor: Drawer styles properties (#46858)
* refactor: Drawer styles props

* chore: add type test case

* chore: update snapshot

* test: add style jest snapshot

* chore: update snapshot

* chore: update snapshot

* chore: update snapshot

* chore: add deprecated warning

* fix: scroll area of drawer

* chore: fix demo style

* chore: update snapshot

* chore: update snapshot

* refactor: remove unused style code

* test: fix test case

* test: fix Drawer PurePanel image diff

* test: fix Drawer PurePanel image diff

* chore: fix demo
2024-01-09 10:20:40 +08:00

49 lines
1.0 KiB
TypeScript

import React, { useState } from 'react';
import { Button, Drawer, theme } from 'antd';
const App: React.FC = () => {
const { token } = theme.useToken();
const [open, setOpen] = useState(false);
const showDrawer = () => {
setOpen(true);
};
const onClose = () => {
setOpen(false);
};
const containerStyle: React.CSSProperties = {
position: 'relative',
height: 200,
padding: 48,
overflow: 'hidden',
background: token.colorFillAlter,
border: `1px solid ${token.colorBorderSecondary}`,
borderRadius: token.borderRadiusLG,
};
return (
<div style={containerStyle}>
Render in this
<div style={{ marginTop: 16 }}>
<Button type="primary" onClick={showDrawer}>
Open
</Button>
</div>
<Drawer
title="Basic Drawer"
placement="right"
closable={false}
onClose={onClose}
open={open}
getContainer={false}
>
<p>Some contents...</p>
</Drawer>
</div>
);
};
export default App;