---
name: Modal 弹窗
route: /modal
parent: 组件
menu: 数据展示
---
import { Playground, Props } from 'docz'
import  Modal,{Modal as Inter}  from '../components/modal'
import Demo from './components/modal'


# Modal 弹窗
>提示: 展开代码编辑器可以在线编辑，实时生效

## 基础用法

<Demo />

```typescript jsx
function Demo() {
    const [visible, setV] = useState(false);
    return (
        <div>
            <Button onClick={() => setV(true)}>打开</Button>
            <Modal title="我是标题" 
                   visible={visible} 
                   onOk={() => setV(false)} 
                   onCancel={() => setV(false)}>
                <Input placeholder="请输入" style={{ marginRight: 10 }} />
                <Button>我是一个按钮</Button>
            </Modal>
        </div>
    );
};

```

## API


<Props of={Inter} />