ant-design/components/modal/demo/basic.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

40 lines
794 B
TypeScript

import React, { useState } from 'react';
import { Button, Modal } from 'antd';
const App: React.FC = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const showModal = () => {
setIsModalOpen(true);
};
const handleOk = () => {
setIsModalOpen(false);
};
const handleCancel = () => {
setIsModalOpen(false);
};
return (
<>
<Button type="primary" onClick={showModal}>
Open Modal
</Button>
<Modal
title="Basic Modal"
closable={{ 'aria-label': 'Custom Close Button' }}
open={isModalOpen}
onOk={handleOk}
onCancel={handleCancel}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
</>
);
};
export default App;