Ant Design Notification 自动关闭进度条指南showProgress 与 pauseOnHover 的完整用法与实现原理【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-designNotification通知提醒框是 Ant Design 中用于在屏幕四角展示系统主动推送、复杂内容或需要用户行动点的全局反馈组件。本指南聚焦于 Notification 5.18.0 起提供的自动关闭进度条能力结合官方演示demo显示进度条 与其配套说明文档 show-with-progress.md讲解如何借助showProgress在通知框上渲染一个随自动关闭倒计时填充的进度条并用pauseOnHover控制悬停时是否暂停计时。读完本文你将掌握进度条的三级配置入口单条通知 / hooks 实例 / 全局notification.config、进度条的底层渲染与样式原理以及如何对进度条进行定制。功能概述为什么需要“自动关闭进度条”Notification 默认会在duration4.5 秒后自动关闭方便不打断用户主任务。但自动关闭是“无声”的——用户无法预判这条通知还剩下多少可见时间尤其是当通知承载了重要的即时信息时用户可能还没来得及阅读就消失了。showProgress正是在这一场景下引入的能力5.18.0在通知框底部渲染一条细进度条直观展示剩余展示时间。与之配套的pauseOnHover则控制当鼠标悬停在通知框上时是否暂停倒计时从而给用户留出从容阅读与操作的时间。官方对该 demo 的描述仅一句话show-with-progress.mdzh-CN显示自动关闭通知框的进度条。en-USShow progress bar for auto-closing notification.其完整可运行示例位于 components/notification/demo/show-with-progress.tsx并在 组件文档 中以“显示进度条”demo 的形式对外提供标注版本5.18.0。基础用法在通知上开启进度条推荐方式useNotification Hook官方 demo 使用notification.useNotification()创建api实体并通过api.open传入配置。完整代码如下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 typeprimary onClick{openNotification(true)} Pause on hover /Button Button typeprimary onClick{openNotification(false)} Donapos;t pause on hover /Button /Space / ); }; export default App;代码要点contextHolder必须渲染进组件树useNotification返回的[api, contextHolder]中contextHolder需要挂载在 JSX 中如上例放在按钮之前进度条等通知内容才真正渲染出来。这一方式也让通知能够读取所在位置的 Context如ConfigProvider的theme/locale。showProgress: true是开启进度条的唯一开关开启后通知框底部会出现随倒计时递减/递增的进度条。pauseOnHover通过按钮动态传入demo 用同一个openNotification工厂函数按布尔值生成点击回调从而在同一页面上对比「悬停暂停」与「悬停不暂停」两种交互的差异——这是该 demo 的核心演示目的。打开方式与单条通知参数在 components/notification/interface.ts 中单条通知的配置类型为ArgsProps其中与本次主题直接相关的字段如下参数说明类型默认值版本showProgress显示自动关闭通知框的进度条boolean-5.18.0pauseOnHover悬停时是否暂停计时器booleantrue5.18.0duration自动关闭延时秒配置为0 \| false则不会自动关闭number \| false4.5-可见pauseOnHover单条级别默认即为true而showProgress需要显式开启。另外注意进度条表达的是“自动关闭的倒计时”因此它是配合duration生效的——如果某条通知设置了duration: 0不自动关闭自然也就不存在自动关闭的进度可展示。打开方式二静态方法除 hooks 外Notification 还提供notification.open / success / error / info / warning等静态方法类型见 interface.ts 中NotificationInstance与StaticFn。静态方法同样接受ArgsProps因此也可在其中传showProgress与pauseOnHover。需要提示的是antd 官方在文档中已明确“静态方法不推荐”用于简单场景而 hooks 方式能正确处理 Context需要读取主题或 locale 时请使用useNotification。统一配置入口hooks 实例与全局 notification.configshowProgress/pauseOnHover并不仅限于单条通知还可以在两个更高层级统一声明从而避免重复书写。useNotification 级配置notification.useNotification(config)的 config 支持参数说明类型默认值版本showProgress显示自动关闭通知框的进度条boolean-5.18.0pauseOnHover悬停时是否暂停计时器booleantrue5.18.0duration该实例下通知的默认自动关闭延时number4.5-placement弹出位置stringtopRight-stack堆叠模式boolean \| { threshold }{ threshold: 3 }5.10.0maxCount最大显示数number-4.17.0例如要让某个业务区域内的所有通知都带进度条并悬停暂停可写成const [api, contextHolder] notification.useNotification({ showProgress: true, pauseOnHover: true, });之后通过api.open(...)弹出的通知默认即带进度条除非单条通知内显式覆盖。全局配置 notification.config如果希望整个应用包括静态方法弹出的通知统一开启进度条可以使用全局配置notification.config(options)notification.config({ placement: bottomRight, bottom: 50, duration: 3, showProgress: true, pauseOnHover: true, });该配置的完整字段见 index.zh-CN.md 的 “notification.config” 小节其中与本主题相关的参数同样为showProgress默认 -与pauseOnHover默认true均 5.18.0 引入。从源码结构看components/notification/index.tsx 维护了模块级defaultGlobalConfig静态方法每次调用时都会从其中取出showProgress、pauseOnHover等字段合并到通知上下文中实现“全局一次生效”。底层实现倒计时如何驱动一条原生progress理解参数行为有助于在实际项目中做出正确决策。在 components/notification/useNotification.tsx 中可以看到 antd 对 rc-notificationuseRcNotification的封装倒计时、悬停暂停、进度条渲染本身由底层rc-component/notification完成antd 通过useRcNotification({ ... duration, pauseOnHover, showProgress })将参数透传见 useNotification.tsxduration会先被归一化处理isNumber(duration) duration 0 ? duration : falseuseNotification.tsx非正数一律视为不自动关闭pauseOnHover在 hooks 实例层面有显式默认值trueuseNotification.tsx与 API 文档中“默认 true”保持一致。进度条不是用 div 模拟的而是渲染为原生progress元素。语义快照如 demo-semantic 测试快照中可以看到形如下方的 DOMprogress classant-notification-notice-progress ... max100 value100/progressantd 在样式层 components/notification/style/notification.ts 对${noticeCls}-progress即ant-notification-notice-progress做了视觉定制绝对定位于通知框底部position: absolute; bottom: 0高度由设计 TokennotificationProgressHeight控制默认2px见 components/notification/style/index.ts 的 token 生成逻辑宽度为通知内容宽度减去两侧圆角calc(100% - borderRadiusLG * 2)左右留出与borderRadiusLG一致的缩进底色统一为半透明黑rgba(0, 0, 0, 0.04)进度填充色取自 TokenprogressBg并同时兼容 WebKit::-webkit-progress-bar/::-webkit-progress-value与 Firefox::-moz-progress-bar两类伪元素实现。这意味着进度条是一个“所见即真实时间”的轻量原生控件底层倒计时推进value从而呈现平滑的关闭倒计时反馈。样式定制改高度、改颜色、逐语义结构覆盖当默认的 2px 进度条不符合视觉要求时可以分两层定制通过组件 Token 调整尺寸与色彩notificationProgressHeight控制进度条高度可在ConfigProvider的主题里覆盖 Notification 组件 tokenConfigProvider theme{{ components: { Notification: { notificationProgressHeight: 4, // 让进度条更醒目 }, }, }} App / /ConfigProvider仓库另提供 progress-color.tsx 演示如何自定义进度条颜色内部通过showProgress: true与较长duration: 20便于观察结合上文源码可推断进度条填充色读取的是进度类颜色 TokenprogressBg可通过主题 Token 体系调整其取值从而改变不同浏览器内核下进度条的颜色。通过 Semantic DOM 精细化定位在 6.0.0 引入的语义化结构中Notification 明确把progress列为可定制节点见 interface.ts 中NotificationSemanticType的classNames/styles均包含progress字段。这意味着你可以对进度条做“原子级”样式覆盖例如api.open({ title: 带样式覆盖的通知, showProgress: true, classNames: { progress: my-progress }, styles: { progress: { height: 6, borderRadius: 3 } }, });在渲染链路 PureList.tsx 中showProgress、duration、classNames/styles会被逐个整理并透传给底层通知项语义化 class如semantic-mark-progress与进度条原生 class 同时保留便于测试与精准覆盖。需要说明的是若仅需统一修改颜色/高度优先走组件 Token 方案而非逐条覆盖 style。实测验证进度条 demo 的自动化保障antd 为每个官方 demo 都生成了自动化快照测试进度条 demo 也不例外components/notification/tests/snapshots/demo.test.ts.snap 中保留了renders components/notification/demo/show-with-progress.tsx correctly的快照验证渲染出两个主按钮Pause on hover/Dont pause on hover及对应结构components/notification/tests/snapshots/demo-extend.test.ts.snap 中的extend context用例则确保 demo 在带ConfigProvider上下文的环境中仍能正常渲染antd 会自动为渲染结果补充css-var-test-id、acss-*等 hash class。此外语义化测试快照 demo-semantic.test.tsx.snap 稳定断言了progress class...-progress semantic-mark-progress max100 value100 /的存在。这些测试共同保障了“进度条功能 demo 代码”在后续迭代中不会静默回归。实用建议与注意事项pauseOnHover默认即开启。多数场景下这是更友好的行为——用户鼠标一旦移入通知倒计时暂停避免“想点按钮通知却先消失”。只有当你需要通知严格按duration到时消失例如短时效的提醒才应显式传入false。进度条与自动关闭语义绑定。进度条展示的是自动关闭剩余时间若通知配置为不自动关闭duration: false或0应避免同时开启showProgress否则会误导用户。不要依赖进度条的精确像素/颜色还原。它基于浏览器原生progress元素跨内核表现由 WebKit/Moz 伪元素分别控制在极旧的浏览器或非标准 UA 下可能出现样式差异涉及严格视觉还原时请以 style/notification.ts 的 CSS 为准做针对性增强。优先级关系单条api.open参数 useNotification实例配置 全局notification.config。全局开启后个别不需要进度条的通知可在单条上显式关闭showProgress: false。需要 Context 时选择 hooks进度条 demo 统一使用useNotification因为静态方法通过动态创建的 React 实体渲染无法感知调用处的ConfigProvider主题上下文详见组件文档 FAQ。若项目中已使用 App 包裹组件可直接通过App.useApp()获取带 context 的 notification 实例省去手动挂载contextHolder的步骤。从 v5.18.0 起Ant Design 用两个布尔参数加一条原生进度条低成本地补全了“自动关闭通知”最缺失的可感知反馈。无论是希望在页面级统一切换、还是逐条精细控制结合本文梳理的三级配置入口与源码级渲染原理都能在真实项目中稳定落地。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Ant Design Notification 自动关闭进度条指南：showProgress 与 pauseOnHover 的完整用法与实现原理
Ant Design Notification 自动关闭进度条指南showProgress 与 pauseOnHover 的完整用法与实现原理【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-designNotification通知提醒框是 Ant Design 中用于在屏幕四角展示系统主动推送、复杂内容或需要用户行动点的全局反馈组件。本指南聚焦于 Notification 5.18.0 起提供的自动关闭进度条能力结合官方演示demo显示进度条 与其配套说明文档 show-with-progress.md讲解如何借助showProgress在通知框上渲染一个随自动关闭倒计时填充的进度条并用pauseOnHover控制悬停时是否暂停计时。读完本文你将掌握进度条的三级配置入口单条通知 / hooks 实例 / 全局notification.config、进度条的底层渲染与样式原理以及如何对进度条进行定制。功能概述为什么需要“自动关闭进度条”Notification 默认会在duration4.5 秒后自动关闭方便不打断用户主任务。但自动关闭是“无声”的——用户无法预判这条通知还剩下多少可见时间尤其是当通知承载了重要的即时信息时用户可能还没来得及阅读就消失了。showProgress正是在这一场景下引入的能力5.18.0在通知框底部渲染一条细进度条直观展示剩余展示时间。与之配套的pauseOnHover则控制当鼠标悬停在通知框上时是否暂停倒计时从而给用户留出从容阅读与操作的时间。官方对该 demo 的描述仅一句话show-with-progress.mdzh-CN显示自动关闭通知框的进度条。en-USShow progress bar for auto-closing notification.其完整可运行示例位于 components/notification/demo/show-with-progress.tsx并在 组件文档 中以“显示进度条”demo 的形式对外提供标注版本5.18.0。基础用法在通知上开启进度条推荐方式useNotification Hook官方 demo 使用notification.useNotification()创建api实体并通过api.open传入配置。完整代码如下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 typeprimary onClick{openNotification(true)} Pause on hover /Button Button typeprimary onClick{openNotification(false)} Donapos;t pause on hover /Button /Space / ); }; export default App;代码要点contextHolder必须渲染进组件树useNotification返回的[api, contextHolder]中contextHolder需要挂载在 JSX 中如上例放在按钮之前进度条等通知内容才真正渲染出来。这一方式也让通知能够读取所在位置的 Context如ConfigProvider的theme/locale。showProgress: true是开启进度条的唯一开关开启后通知框底部会出现随倒计时递减/递增的进度条。pauseOnHover通过按钮动态传入demo 用同一个openNotification工厂函数按布尔值生成点击回调从而在同一页面上对比「悬停暂停」与「悬停不暂停」两种交互的差异——这是该 demo 的核心演示目的。打开方式与单条通知参数在 components/notification/interface.ts 中单条通知的配置类型为ArgsProps其中与本次主题直接相关的字段如下参数说明类型默认值版本showProgress显示自动关闭通知框的进度条boolean-5.18.0pauseOnHover悬停时是否暂停计时器booleantrue5.18.0duration自动关闭延时秒配置为0 \| false则不会自动关闭number \| false4.5-可见pauseOnHover单条级别默认即为true而showProgress需要显式开启。另外注意进度条表达的是“自动关闭的倒计时”因此它是配合duration生效的——如果某条通知设置了duration: 0不自动关闭自然也就不存在自动关闭的进度可展示。打开方式二静态方法除 hooks 外Notification 还提供notification.open / success / error / info / warning等静态方法类型见 interface.ts 中NotificationInstance与StaticFn。静态方法同样接受ArgsProps因此也可在其中传showProgress与pauseOnHover。需要提示的是antd 官方在文档中已明确“静态方法不推荐”用于简单场景而 hooks 方式能正确处理 Context需要读取主题或 locale 时请使用useNotification。统一配置入口hooks 实例与全局 notification.configshowProgress/pauseOnHover并不仅限于单条通知还可以在两个更高层级统一声明从而避免重复书写。useNotification 级配置notification.useNotification(config)的 config 支持参数说明类型默认值版本showProgress显示自动关闭通知框的进度条boolean-5.18.0pauseOnHover悬停时是否暂停计时器booleantrue5.18.0duration该实例下通知的默认自动关闭延时number4.5-placement弹出位置stringtopRight-stack堆叠模式boolean \| { threshold }{ threshold: 3 }5.10.0maxCount最大显示数number-4.17.0例如要让某个业务区域内的所有通知都带进度条并悬停暂停可写成const [api, contextHolder] notification.useNotification({ showProgress: true, pauseOnHover: true, });之后通过api.open(...)弹出的通知默认即带进度条除非单条通知内显式覆盖。全局配置 notification.config如果希望整个应用包括静态方法弹出的通知统一开启进度条可以使用全局配置notification.config(options)notification.config({ placement: bottomRight, bottom: 50, duration: 3, showProgress: true, pauseOnHover: true, });该配置的完整字段见 index.zh-CN.md 的 “notification.config” 小节其中与本主题相关的参数同样为showProgress默认 -与pauseOnHover默认true均 5.18.0 引入。从源码结构看components/notification/index.tsx 维护了模块级defaultGlobalConfig静态方法每次调用时都会从其中取出showProgress、pauseOnHover等字段合并到通知上下文中实现“全局一次生效”。底层实现倒计时如何驱动一条原生progress理解参数行为有助于在实际项目中做出正确决策。在 components/notification/useNotification.tsx 中可以看到 antd 对 rc-notificationuseRcNotification的封装倒计时、悬停暂停、进度条渲染本身由底层rc-component/notification完成antd 通过useRcNotification({ ... duration, pauseOnHover, showProgress })将参数透传见 useNotification.tsxduration会先被归一化处理isNumber(duration) duration 0 ? duration : falseuseNotification.tsx非正数一律视为不自动关闭pauseOnHover在 hooks 实例层面有显式默认值trueuseNotification.tsx与 API 文档中“默认 true”保持一致。进度条不是用 div 模拟的而是渲染为原生progress元素。语义快照如 demo-semantic 测试快照中可以看到形如下方的 DOMprogress classant-notification-notice-progress ... max100 value100/progressantd 在样式层 components/notification/style/notification.ts 对${noticeCls}-progress即ant-notification-notice-progress做了视觉定制绝对定位于通知框底部position: absolute; bottom: 0高度由设计 TokennotificationProgressHeight控制默认2px见 components/notification/style/index.ts 的 token 生成逻辑宽度为通知内容宽度减去两侧圆角calc(100% - borderRadiusLG * 2)左右留出与borderRadiusLG一致的缩进底色统一为半透明黑rgba(0, 0, 0, 0.04)进度填充色取自 TokenprogressBg并同时兼容 WebKit::-webkit-progress-bar/::-webkit-progress-value与 Firefox::-moz-progress-bar两类伪元素实现。这意味着进度条是一个“所见即真实时间”的轻量原生控件底层倒计时推进value从而呈现平滑的关闭倒计时反馈。样式定制改高度、改颜色、逐语义结构覆盖当默认的 2px 进度条不符合视觉要求时可以分两层定制通过组件 Token 调整尺寸与色彩notificationProgressHeight控制进度条高度可在ConfigProvider的主题里覆盖 Notification 组件 tokenConfigProvider theme{{ components: { Notification: { notificationProgressHeight: 4, // 让进度条更醒目 }, }, }} App / /ConfigProvider仓库另提供 progress-color.tsx 演示如何自定义进度条颜色内部通过showProgress: true与较长duration: 20便于观察结合上文源码可推断进度条填充色读取的是进度类颜色 TokenprogressBg可通过主题 Token 体系调整其取值从而改变不同浏览器内核下进度条的颜色。通过 Semantic DOM 精细化定位在 6.0.0 引入的语义化结构中Notification 明确把progress列为可定制节点见 interface.ts 中NotificationSemanticType的classNames/styles均包含progress字段。这意味着你可以对进度条做“原子级”样式覆盖例如api.open({ title: 带样式覆盖的通知, showProgress: true, classNames: { progress: my-progress }, styles: { progress: { height: 6, borderRadius: 3 } }, });在渲染链路 PureList.tsx 中showProgress、duration、classNames/styles会被逐个整理并透传给底层通知项语义化 class如semantic-mark-progress与进度条原生 class 同时保留便于测试与精准覆盖。需要说明的是若仅需统一修改颜色/高度优先走组件 Token 方案而非逐条覆盖 style。实测验证进度条 demo 的自动化保障antd 为每个官方 demo 都生成了自动化快照测试进度条 demo 也不例外components/notification/tests/snapshots/demo.test.ts.snap 中保留了renders components/notification/demo/show-with-progress.tsx correctly的快照验证渲染出两个主按钮Pause on hover/Dont pause on hover及对应结构components/notification/tests/snapshots/demo-extend.test.ts.snap 中的extend context用例则确保 demo 在带ConfigProvider上下文的环境中仍能正常渲染antd 会自动为渲染结果补充css-var-test-id、acss-*等 hash class。此外语义化测试快照 demo-semantic.test.tsx.snap 稳定断言了progress class...-progress semantic-mark-progress max100 value100 /的存在。这些测试共同保障了“进度条功能 demo 代码”在后续迭代中不会静默回归。实用建议与注意事项pauseOnHover默认即开启。多数场景下这是更友好的行为——用户鼠标一旦移入通知倒计时暂停避免“想点按钮通知却先消失”。只有当你需要通知严格按duration到时消失例如短时效的提醒才应显式传入false。进度条与自动关闭语义绑定。进度条展示的是自动关闭剩余时间若通知配置为不自动关闭duration: false或0应避免同时开启showProgress否则会误导用户。不要依赖进度条的精确像素/颜色还原。它基于浏览器原生progress元素跨内核表现由 WebKit/Moz 伪元素分别控制在极旧的浏览器或非标准 UA 下可能出现样式差异涉及严格视觉还原时请以 style/notification.ts 的 CSS 为准做针对性增强。优先级关系单条api.open参数 useNotification实例配置 全局notification.config。全局开启后个别不需要进度条的通知可在单条上显式关闭showProgress: false。需要 Context 时选择 hooks进度条 demo 统一使用useNotification因为静态方法通过动态创建的 React 实体渲染无法感知调用处的ConfigProvider主题上下文详见组件文档 FAQ。若项目中已使用 App 包裹组件可直接通过App.useApp()获取带 context 的 notification 实例省去手动挂载contextHolder的步骤。从 v5.18.0 起Ant Design 用两个布尔参数加一条原生进度条低成本地补全了“自动关闭通知”最缺失的可感知反馈。无论是希望在页面级统一切换、还是逐条精细控制结合本文梳理的三级配置入口与源码级渲染原理都能在真实项目中稳定落地。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考