2016-03-31 09:40:55 +08:00
|
|
|
---
|
2016-08-28 17:45:27 +08:00
|
|
|
order: 3
|
|
|
|
title:
|
|
|
|
zh-CN: 自定义按钮
|
|
|
|
en-US: Custom close button
|
2016-03-31 09:40:55 +08:00
|
|
|
---
|
2015-07-28 15:40:28 +08:00
|
|
|
|
2016-08-17 11:07:02 +08:00
|
|
|
## zh-CN
|
|
|
|
|
2015-07-29 20:08:16 +08:00
|
|
|
自定义关闭按钮的样式和文字。
|
2015-07-28 15:40:28 +08:00
|
|
|
|
2016-08-17 11:07:02 +08:00
|
|
|
## en-US
|
|
|
|
|
|
|
|
To customize the style or font of the close button.
|
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
```tsx
|
2022-05-11 14:26:18 +08:00
|
|
|
import { Button, notification, Space } from 'antd';
|
2022-05-19 09:46:26 +08:00
|
|
|
import React from 'react';
|
2015-07-28 15:40:28 +08:00
|
|
|
|
2016-12-14 17:57:15 +08:00
|
|
|
const close = () => {
|
2019-05-07 14:57:32 +08:00
|
|
|
console.log(
|
|
|
|
'Notification was closed. Either the close button was clicked or duration time elapsed.',
|
|
|
|
);
|
2015-11-25 17:35:49 +08:00
|
|
|
};
|
2015-08-06 20:55:30 +08:00
|
|
|
|
2016-12-14 17:57:15 +08:00
|
|
|
const openNotification = () => {
|
2016-02-17 18:04:42 +08:00
|
|
|
const key = `open${Date.now()}`;
|
2016-01-07 16:29:12 +08:00
|
|
|
const btn = (
|
2022-05-11 14:26:18 +08:00
|
|
|
<Space>
|
|
|
|
<Button type="link" size="small" onClick={() => notification.destroy()}>
|
|
|
|
Destroy All
|
|
|
|
</Button>
|
|
|
|
<Button type="primary" size="small" onClick={() => notification.destroy(key)}>
|
|
|
|
Confirm
|
|
|
|
</Button>
|
|
|
|
</Space>
|
2016-01-07 16:29:12 +08:00
|
|
|
);
|
2015-08-06 15:19:45 +08:00
|
|
|
notification.open({
|
2016-08-28 17:45:27 +08:00
|
|
|
message: 'Notification Title',
|
2019-05-07 14:57:32 +08:00
|
|
|
description:
|
|
|
|
'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
|
2016-02-17 15:57:33 +08:00
|
|
|
btn,
|
|
|
|
key,
|
2016-05-11 09:32:33 +08:00
|
|
|
onClose: close,
|
2015-08-06 15:19:45 +08:00
|
|
|
});
|
2015-07-30 21:04:52 +08:00
|
|
|
};
|
2015-07-28 15:40:28 +08:00
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
const App: React.FC = () => (
|
2017-11-29 21:00:16 +08:00
|
|
|
<Button type="primary" onClick={openNotification}>
|
|
|
|
Open the notification box
|
2022-04-03 23:27:45 +08:00
|
|
|
</Button>
|
2018-11-28 15:00:03 +08:00
|
|
|
);
|
2022-05-19 09:46:26 +08:00
|
|
|
|
|
|
|
export default App;
|
2019-05-07 14:57:32 +08:00
|
|
|
```
|