ant-design/components/drawer/demo/basic-right.tsx
kiner-tang(星河) 5236fa8d26
feat: Optimized closable component's aria props (#53410)
* feat: Optimized closable component's aria props

* Update components/_util/hooks/useClosable.tsx

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: kiner-tang(星河) <1127031143@qq.com>

* feat: opt code

* feat: opt code

* feat: opt code

* feat: opt code

* feat: opt code

* feat: opt code

* feat: opt code

* feat: opt code

* chore: add a11y def

* chore: update a11y ts

* chore: clean up

* chore: clean up

* docs: update demo

---------

Signed-off-by: kiner-tang(星河) <1127031143@qq.com>
Co-authored-by: lijianan <574980606@qq.com>
Co-authored-by: 二货机器人 <smith3816@gmail.com>
2025-04-24 18:36:18 +08:00

35 lines
657 B
TypeScript

import React, { useState } from 'react';
import { Button, Drawer } from 'antd';
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"
closable={{ 'aria-label': 'Close Button' }}
onClose={onClose}
open={open}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Drawer>
</>
);
};
export default App;