antd-components-mcp
by zhixiaoqiang
- antd-components-mcp
- componentData
- components
- notification
examples.md•18.6 kB
## Notification 组件示例
### Hooks 调用（推荐）
通过 `notification.useNotification` 创建支持读取 context 的 `contextHolder`。请注意，我们推荐通过顶层注册的方式代替 `notification` 静态方法，因为静态方法无法消费上下文，因而 ConfigProvider 的数据也不会生效。
```tsx
import React, { useMemo } from 'react';
import {
RadiusBottomleftOutlined,
RadiusBottomrightOutlined,
RadiusUpleftOutlined,
RadiusUprightOutlined,
} from '@ant-design/icons';
import { Button, Divider, notification, Space } from 'antd';
import type { NotificationArgsProps } from 'antd';
type NotificationPlacement = NotificationArgsProps['placement'];
const Context = React.createContext({ name: 'Default' });
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotification = (placement: NotificationPlacement) => {
api.info({
title: `Notification ${placement}`,
description: <Context.Consumer>{({ name }) => `Hello, ${name}!`}</Context.Consumer>,
placement,
});
};
const contextValue = useMemo(() => ({ name: 'Ant Design' }), []);
return (
<Context.Provider value={contextValue}>
{contextHolder}
<Space>
<Button
type="primary"
onClick={() => openNotification('topLeft')}
icon={<RadiusUpleftOutlined />}
>
topLeft
</Button>
<Button
type="primary"
onClick={() => openNotification('topRight')}
icon={<RadiusUprightOutlined />}
>
topRight
</Button>
</Space>
<Divider />
<Space>
<Button
type="primary"
onClick={() => openNotification('bottomLeft')}
icon={<RadiusBottomleftOutlined />}
>
bottomLeft
</Button>
<Button
type="primary"
onClick={() => openNotification('bottomRight')}
icon={<RadiusBottomrightOutlined />}
>
bottomRight
</Button>
</Space>
</Context.Provider>
);
};
export default App;
```
### 自动关闭的延时
自定义通知框自动关闭的延时，默认 `4.5s`，取消自动关闭只要将该值设为 `0` 即可。
```tsx
import React from 'react';
import { Button, notification } from 'antd';
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotification = () => {
api.open({
title: '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,
});
};
return (
<>
{contextHolder}
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
</>
);
};
export default App;
```
### 带有图标的通知提醒框
通知提醒框左侧有图标。
```tsx
import React from 'react';
import { Button, notification, Space } from 'antd';
type NotificationType = 'success' | 'info' | 'warning' | 'error';
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotificationWithIcon = (type: NotificationType) => {
api[type]({
title: 'Notification Title',
description:
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
});
};
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;
```
### 自定义按钮
自定义关闭按钮的样式和文字。
```tsx
import React from 'react';
import { Button, notification, Space } from 'antd';
const close = () => {
console.log(
'Notification was closed. Either the close button was clicked or duration time elapsed.',
);
};
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotification = () => {
const key = `open${Date.now()}`;
const btn = (
<Space>
<Button type="link" size="small" onClick={() => api.destroy()}>
Destroy All
</Button>
<Button type="primary" size="small" onClick={() => api.destroy(key)}>
Confirm
</Button>
</Space>
);
api.open({
title: '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;
```
### 自定义图标
图标可以被自定义。
```tsx
import React from 'react';
import { SmileOutlined } from '@ant-design/icons';
import { Button, notification } from 'antd';
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotification = () => {
api.open({
title: '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' }} />,
});
};
return (
<>
{contextHolder}
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
</>
);
};
export default App;
```
### 位置
使用 `placement` 可以配置通知从上面、下面、左上角、右上角、左下角、右下角弹出。
```tsx
import React from 'react';
import {
BorderBottomOutlined,
BorderTopOutlined,
RadiusBottomleftOutlined,
RadiusBottomrightOutlined,
RadiusUpleftOutlined,
RadiusUprightOutlined,
} from '@ant-design/icons';
import { Button, Divider, notification, Space } from 'antd';
import type { NotificationArgsProps } from 'antd';
type NotificationPlacement = NotificationArgsProps['placement'];
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotification = (placement: NotificationPlacement) => {
api.info({
title: `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,
});
};
return (
<>
{contextHolder}
<Space>
<Button type="primary" onClick={() => openNotification('top')} icon={<BorderTopOutlined />}>
top
</Button>
<Button
type="primary"
onClick={() => openNotification('bottom')}
icon={<BorderBottomOutlined />}
>
bottom
</Button>
</Space>
<Divider />
<Space>
<Button
type="primary"
onClick={() => openNotification('topLeft')}
icon={<RadiusUpleftOutlined />}
>
topLeft
</Button>
<Button
type="primary"
onClick={() => openNotification('topRight')}
icon={<RadiusUprightOutlined />}
>
topRight
</Button>
</Space>
<Divider />
<Space>
<Button
type="primary"
onClick={() => openNotification('bottomLeft')}
icon={<RadiusBottomleftOutlined />}
>
bottomLeft
</Button>
<Button
type="primary"
onClick={() => openNotification('bottomRight')}
icon={<RadiusBottomrightOutlined />}
>
bottomRight
</Button>
</Space>
</>
);
};
export default App;
```
### 自定义样式
使用 style 和 className 来定义样式。
```tsx
import React from 'react';
import { Button, notification } from 'antd';
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotification = () => {
api.open({
title: 'Notification Title',
description:
'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>
</>
);
};
export default App;
```
### 更新消息内容
可以通过唯一的 key 来更新内容。
```tsx
import React from 'react';
import { Button, notification } from 'antd';
const key = 'updatable';
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotification = () => {
api.open({
key,
title: 'Notification Title',
description: 'description.',
});
setTimeout(() => {
api.open({
key,
title: 'New Title',
description: 'New description.',
});
}, 1000);
};
return (
<>
{contextHolder}
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
</>
);
};
export default App;
```
### 堆叠
堆叠配置，默认开启。超过 3 个以上的消息会被自动收起，可以通过 `threshold` 来设置不会被收起的最大数量。
```tsx
import React, { useMemo } from 'react';
import { Button, Divider, InputNumber, notification, Space, Switch } from 'antd';
const Context = React.createContext({ name: 'Default' });
const App: React.FC = () => {
const [enabled, setEnabled] = React.useState(true);
const [threshold, setThreshold] = React.useState(3);
const [api, contextHolder] = notification.useNotification({
stack: enabled
? {
threshold,
}
: false,
});
const openNotification = () => {
api.open({
title: 'Notification Title',
description: `${Array.from(
{ length: Math.round(Math.random() * 5) + 1 },
() => 'This is the content of the notification.',
).join('\n')}`,
duration: false,
});
};
const contextValue = useMemo(() => ({ name: 'Ant Design' }), []);
return (
<Context.Provider value={contextValue}>
{contextHolder}
<div>
<Space size="large">
<Space style={{ width: '100%' }}>
<span>Enabled: </span>
<Switch checked={enabled} onChange={(v) => setEnabled(v)} />
</Space>
<Space style={{ width: '100%' }}>
<span>Threshold: </span>
<InputNumber
disabled={!enabled}
value={threshold}
step={1}
min={1}
max={10}
onChange={(v) => setThreshold(v || 0)}
/>
</Space>
</Space>
<Divider />
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
</div>
</Context.Provider>
);
};
export default App;
```
### 显示进度条
显示自动关闭通知框的进度条。
```tsx
import React from 'react';
import { Button, notification, Space } from 'antd';
const App: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotification = (pauseOnHover: boolean) => () => {
api.open({
title: 'Notification Title',
description:
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
showProgress: true,
pauseOnHover,
});
};
return (
<>
{contextHolder}
<Space>
<Button type="primary" onClick={openNotification(true)}>
Pause on hover
</Button>
<Button type="primary" onClick={openNotification(false)}>
Don't pause on hover
</Button>
</Space>
</>
);
};
export default App;
```
### 静态方法（不推荐）
静态方法无法消费 Context，不能动态响应 ConfigProvider 提供的各项配置，启用 `layer` 时还可能导致样式异常。请优先使用 hooks 版本或者 App 组件提供的 `notification` 实例。
```tsx
import React from 'react';
import { Button, notification } from 'antd';
const openNotification = () => {
notification.open({
title: 'Notification Title',
description:
'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
onClick: () => {
console.log('Notification Clicked!');
},
});
};
const App: React.FC = () => (
<Button type="primary" onClick={openNotification}>
Open the notification box
</Button>
);
export default App;
```
### 自定义进度条颜色
通过配置组件 token 来自定义进度条颜色。
```tsx
import React from 'react';
import { Button, ConfigProvider, notification } from 'antd';
import { createStyles } from 'antd-style';
const COLOR_BG = 'linear-gradient(135deg,#6253e1, #04befe)';
const useStyle = createStyles(({ prefixCls, css }) => ({
linearGradientButton: css`
&.${prefixCls}-btn-primary:not([disabled]):not(.${prefixCls}-btn-dangerous) {
> span {
position: relative;
}
&::before {
content: '';
background: ${COLOR_BG};
position: absolute;
inset: -1px;
opacity: 1;
transition: all 0.3s;
border-radius: inherit;
}
&:hover::before {
opacity: 0;
}
}
`,
}));
const App: React.FC = () => {
const { styles } = useStyle();
const [api, contextHolder] = notification.useNotification();
const openNotification = () => {
api.open({
title: 'Customize progress bar color',
description: 'You can use component token to customize the progress bar color',
showProgress: true,
duration: 20,
});
};
return (
<ConfigProvider
button={{
className: styles.linearGradientButton,
}}
theme={{
components: {
Notification: {
progressBg: COLOR_BG,
},
},
}}
>
{contextHolder}
<Button type="primary" onClick={openNotification}>
Show custom progress color
</Button>
</ConfigProvider>
);
};
export default App;
```
### 组件 Token---
debug: true
title:
zh-CN: 组件 Token
en-US: Component Token
---
展示新的组件 Token 功能，支持为不同类型的通知设置不同的背景色。可以通过 `colorSuccessBg`、`colorErrorBg`、`colorInfoBg`、`colorWarningBg` 来自定义各种类型通知的背景色。
```tsx
import React from 'react';
import { Button, ConfigProvider, notification, Space } from 'antd';
type NotificationType = 'success' | 'info' | 'warning' | 'error';
const CustomThemeDemo: React.FC = () => {
const [api, contextHolder] = notification.useNotification();
const openNotificationWithIcon = (type: NotificationType) => {
api[type]({
title: `${type.charAt(0).toUpperCase() + type.slice(1)} Notification`,
description: 'This notification uses custom component tokens for enhanced background colors.',
duration: 0,
});
};
return (
<>
<h4>Custom Theme (Enhanced Colors)</h4>
<Space>
<Button type="primary" onClick={() => openNotificationWithIcon('success')}>
Custom Success
</Button>
<Button onClick={() => openNotificationWithIcon('info')}>Custom Info</Button>
<Button onClick={() => openNotificationWithIcon('warning')}>Custom Warning</Button>
<Button danger onClick={() => openNotificationWithIcon('error')}>
Custom Error
</Button>
</Space>
{contextHolder}
</>
);
};
const App: React.FC = () => (
<ConfigProvider
theme={{
components: {
Notification: {
colorSuccessBg: '#d9f7be', // Custom light green for success
colorErrorBg: '#ffccc7', // Custom light red for error
colorInfoBg: '#bae0ff', // Custom light blue for info
colorWarningBg: '#ffffb8', // Custom light yellow for warning
},
},
}}
>
<CustomThemeDemo />
</ConfigProvider>
);
export default App;
```
### _InternalPanelDoNotUseOrYouWillBeFired
调试用组件，请勿直接使用。
```tsx
import React from 'react';
import { Button, notification } from 'antd';
/** Test usage. Do not use in your production. */
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = notification;
export default () => (
<InternalPanel
title="Hello World!"
description="Hello World?"
type="success"
actions={
<Button type="primary" size="small">
My Button
</Button>
}
/>
);
```
### 自定义语义结构的样式和类
通过 `classNames` 和 `styles` 传入对象/函数可以自定义 Notification 的[语义化结构](#semantic-dom)样式。
```tsx
import React from 'react';
import { Button, notification, Space } from 'antd';
import type { NotificationArgsProps } from 'antd';
import { createStyles } from 'antd-style';
const useStyle = createStyles(({ css }) => ({
root: css`
border: 2px dashed #ccc;
`,
}));
const styleFn: NotificationArgsProps['styles'] = ({ props }) => {
if (props.type === 'error') {
return {
root: {
backgroundColor: `rgba(255, 200, 200, 0.3)`,
},
} satisfies NotificationArgsProps['styles'];
}
return {};
};
const App: React.FC = () => {
const { styles } = useStyle();
const [api, contextHolder] = notification.useNotification();
const sharedProps: NotificationArgsProps = {
title: 'Notification Title',
description: 'This is a notification description.',
duration: false,
classNames: { root: styles.root },
};
const openDefault = () => {
api.info({
...sharedProps,
styles: { root: { borderRadius: 8 } },
});
};
const openError = () => {
api.error({
...sharedProps,
type: 'error',
styles: styleFn,
});
};
return (
<>
{contextHolder}
<Space>
<Button type="primary" onClick={openDefault}>
Default Notification
</Button>
<Button onClick={openError}>Error Notification</Button>
</Space>
</>
);
};
export default App;
```
Latest Blog Posts
- Model Context Protocol Proxies: Enabling Enterprise Control with Virtual MCPsBy Om-Shree-0709 on .AI SecurityVirtual MCPKubernetes Operator
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/zhixiaoqiang/antd-components-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server