mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-20 10:01:17 +08:00
Code Issues Actions 40 Packages Projects Releases Wiki Activity

Replace part of the Demo of the notification with the hooks (#35710)

Browse Source 
* docs: modify the part demo to hooks

* docs: modify the part demo to hooks
This commit is contained in:
PCCCCCCC 2022-05-25 10:14:51 +08:00 committed by GitHub
parent 2077af6795
commit 1d09d6fe0c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 205 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/notification/demo/custom-icon.md
View File

@ -18,20 +18,27 @@ import { SmileOutlined } from '@ant-design/icons';
import { Button, notification } from 'antd'; import { Button, notification } from 'antd';
import React from 'react'; import React from 'react';
const openNotification = () => { const App: React.FC = () => {
notification.open({ const [api, contextHolder] = notification.useNotification();
message: 'Notification Title',
description:
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
icon: <SmileOutlined style={{ color: '#108ee9' }} />,
});
};
const App: React.FC = () => ( const openNotification = () => {
<Button type="primary" onClick={openNotification}> api.open({
Open the notification box message: 'Notification Title',
</Button> description:
); 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
icon: <SmileOutlined style={{ color: '#108ee9' }} />,
});
};
return (
<>
{contextHolder}
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
</>
);
};
export default App; export default App;
``` ```

40
components/notification/demo/custom-style.md
View File

@ -17,23 +17,29 @@ The style and className are available to customize Notification.
import { Button, notification } from 'antd'; import { Button, notification } from 'antd';
import React from 'react'; import React from 'react';
const openNotification = () => { const App: React.FC = () => {
notification.open({ const [api, contextHolder] = notification.useNotification();
message: 'Notification Title',
description: const openNotification = () => {
'This is the content of the notification. This is the content of the notification. This is the content of the notification.', api.open({
className: 'custom-class', message: 'Notification Title',
style: { description:
width: 600, 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
}, className: 'custom-class',
}); style: {
width: 600,
},
});
};
return (
<>
{contextHolder}
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
</>
);
}; };
const App: React.FC = () => (
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
);
export default App; export default App;
``` ```

34
components/notification/demo/duration.md
View File

@ -17,21 +17,27 @@ title:
import { Button, notification } from 'antd'; import { Button, notification } from 'antd';
import React from 'react'; import React from 'react';
const openNotification = () => { const App: React.FC = () => {
const args = { const [api, contextHolder] = notification.useNotification();
message: 'Notification Title',
description:
'I will never close automatically. This is a purposely very very long description that has many many characters and words.',
duration: 0,
};
notification.open(args);
};
const App: React.FC = () => ( const openNotification = () => {
<Button type="primary" onClick={openNotification}> api.open({
Open the notification box message: 'Notification Title',
</Button> description:
); 'I will never close automatically. This is a purposely very very long description that has many many characters and words.',
duration: 0,
});
};
return (
<>
{contextHolder}
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
</>
);
};
export default App; export default App;
``` ```

121
components/notification/demo/placement.md
View File

@ -26,65 +26,70 @@ import { Button, Divider, notification, Space } from 'antd';
import type { NotificationPlacement } from 'antd/lib/notification'; import type { NotificationPlacement } from 'antd/lib/notification';
import React from 'react'; import React from 'react';
const openNotification = (placement: NotificationPlacement) => { const App: React.FC = () => {
notification.info({ const [api, contextHolder] = notification.useNotification();
message: `Notification ${placement}`,
description:
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
placement,
});
};
const App: React.FC = () => ( const openNotification = (placement: NotificationPlacement) => {
<> api.info({
<Space> message: `Notification ${placement}`,
<Button type="primary" onClick={() => openNotification('top')} icon={<BorderTopOutlined />}> description:
top 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
</Button> placement,
<Button });
type="primary" };
onClick={() => openNotification('bottom')}
icon={<BorderBottomOutlined />} return (
> <>
bottom {contextHolder}
</Button> <Space>
</Space> <Button type="primary" onClick={() => openNotification('top')} icon={<BorderTopOutlined />}>
<Divider /> top
<Space> </Button>
<Button <Button
type="primary" type="primary"
onClick={() => openNotification('topLeft')} onClick={() => openNotification('bottom')}
icon={<RadiusUpleftOutlined />} icon={<BorderBottomOutlined />}
> >
topLeft bottom
</Button> </Button>
<Button </Space>
type="primary" <Divider />
onClick={() => openNotification('topRight')} <Space>
icon={<RadiusUprightOutlined />} <Button
> type="primary"
topRight onClick={() => openNotification('topLeft')}
</Button> icon={<RadiusUpleftOutlined />}
</Space> >
<Divider /> topLeft
<Space> </Button>
<Button <Button
type="primary" type="primary"
onClick={() => openNotification('bottomLeft')} onClick={() => openNotification('topRight')}
icon={<RadiusBottomleftOutlined />} icon={<RadiusUprightOutlined />}
> >
bottomLeft topRight
</Button> </Button>
<Button </Space>
type="primary" <Divider />
onClick={() => openNotification('bottomRight')} <Space>
icon={<RadiusBottomrightOutlined />} <Button
> type="primary"
bottomRight onClick={() => openNotification('bottomLeft')}
</Button> icon={<RadiusBottomleftOutlined />}
</Space> >
</> bottomLeft
); </Button>
<Button
type="primary"
onClick={() => openNotification('bottomRight')}
icon={<RadiusBottomrightOutlined />}
>
bottomRight
</Button>
</Space>
</>
);
};
export default App; export default App;
``` ```

42
components/notification/demo/update.md
View File

@ -19,27 +19,33 @@ import React from 'react';
const key = 'updatable'; const key = 'updatable';
const openNotification = () => { const App: React.FC = () => {
notification.open({ const [api, contextHolder] = notification.useNotification();
key, const openNotification = () => {
message: 'Notification Title', api.open({
description: 'description.',
});
setTimeout(() => {
notification.open({
key, key,
message: 'New Title', message: 'Notification Title',
description: 'New description.', description: 'description.',
}); });
}, 1000);
};
const App: React.FC = () => ( setTimeout(() => {
<Button type="primary" onClick={openNotification}> api.open({
Open the notification box key,
</Button> message: 'New Title',
); description: 'New description.',
});
}, 1000);
};
return (
<>
{contextHolder}
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
</>
);
};
export default App; export default App;
``` ```

59
components/notification/demo/with-btn.md
View File

@ -23,33 +23,40 @@ const close = () => {
); );
}; };
const openNotification = () => { const App: React.FC = () => {
const key = `open${Date.now()}`; const [api, contextHolder] = notification.useNotification();
const btn = (
<Space>
<Button type="link" size="small" onClick={() => notification.destroy()}>
Destroy All
</Button>
<Button type="primary" size="small" onClick={() => notification.destroy(key)}>
Confirm
</Button>
</Space>
);
notification.open({
message: 'Notification Title',
description:
'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
btn,
key,
onClose: close,
});
};
const App: React.FC = () => ( const openNotification = () => {
<Button type="primary" onClick={openNotification}> const key = `open${Date.now()}`;
Open the notification box const btn = (
</Button> <Space>
); <Button type="link" size="small" onClick={() => notification.destroy()}>
Destroy All
</Button>
<Button type="primary" size="small" onClick={() => notification.destroy(key)}>
Confirm
</Button>
</Space>
);
api.open({
message: 'Notification Title',
description:
'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
btn,
key,
onClose: close,
});
};
return (
<>
{contextHolder}
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
</>
);
};
export default App; export default App;
``` ```

37
components/notification/demo/with-icon.md
View File

@ -19,22 +19,29 @@ import React from 'react';
type NotificationType = 'success' | 'info' | 'warning' | 'error'; type NotificationType = 'success' | 'info' | 'warning' | 'error';
const openNotificationWithIcon = (type: NotificationType) => { const App: React.FC = () => {
notification[type]({ const [api, contextHolder] = notification.useNotification();
message: 'Notification Title',
description:
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
});
};
const App: React.FC = () => ( const openNotificationWithIcon = (type: NotificationType) => {
<Space> api[type]({
<Button onClick={() => openNotificationWithIcon('success')}>Success</Button> message: 'Notification Title',
<Button onClick={() => openNotificationWithIcon('info')}>Info</Button> description:
<Button onClick={() => openNotificationWithIcon('warning')}>Warning</Button> 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
<Button onClick={() => openNotificationWithIcon('error')}>Error</Button> });
</Space> };
);
return (
<>
{contextHolder}
<Space>
<Button onClick={() => openNotificationWithIcon('success')}>Success</Button>
<Button onClick={() => openNotificationWithIcon('info')}>Info</Button>
<Button onClick={() => openNotificationWithIcon('warning')}>Warning</Button>
<Button onClick={() => openNotificationWithIcon('error')}>Error</Button>
</Space>
</>
);
};
export default App; export default App;
``` ```