ant.design Modal中的title添加icon
时间: 2024-03-20 14:40:15 浏览: 147
在Ant Design Modal组件中添加icon到标题中可以通过`title`属性中传入一个React节点来实现。我们可以使用Ant Design中的`Icon`组件来添加一个图标。
以下是一个例子:
```
import { Modal, Button, Icon } from 'antd';
function App() {
const [visible, setVisible] = useState(false);
const showModal = () => {
setVisible(true);
};
const handleOk = () => {
setVisible(false);
};
const handleCancel = () => {
setVisible(false);
};
return (
<>
<Button type="primary" onClick={showModal}>
打开模态框
</Button>
<Modal
title={
<span>
<Icon type="exclamation-circle" />
这是一个模态框
</span>
}
visible={visible}
onOk={handleOk}
onCancel={handleCancel}
>
<p>一些模态框内容...</p>
</Modal>
</>
);
}
export default App;
```
在这个例子中,我们在`title`属性中传入了一个React节点,这个节点包括了一个`Icon`组件和一个文本。我们使用`exclamation-circle`图标类型来创建一个感叹号图标,然后将它和文本放在一个`span`元素中。最终的效果是,在模态框的标题前面添加了一个感叹号图标。
您可以根据需要选择不同的图标类型和文本内容来创建您自己的标题。
阅读全文