前端UI组件【免费下载链接】Metro-UI-CSSA progressive front-end framework for creating high-performance responsive reactive web applications!项目地址https://gitcode.com/gh_mirrors/me/Metro-UI-CSS点击查看免费下载本文是 Metro UI CSS 前端框架中 Info Box 组件的专项技术指南聚焦该组件在信息提示、告警、确认对话框等场景下的完整使用方法涵盖 HTML 声明式初始化、jQuery/静态 API 调用、全部插件参数、事件回调、CSS 变量主题定制与两种高级变体info-box2、more-info-box。读完本文你将能够独立实现一个带遮罩、自动隐藏、可动态创建与销毁的模态信息框并掌握其底层实现原理。组件概览Info Box 是 Metro UI CSS 提供的一个多用途模态对话框组件用于向用户展示**信息info、告警alert、警告warning和成功success**消息。它支持自定义内容、遮罩层overlay以及自动关闭默认将元素定位在屏幕正中央适合作为轻量级提示、操作结果反馈或简单确认交互的载体。在仓库中该组件的源码位于 source/components/info-box/共包含 4 个文件文件作用README.md组件官方文档本文主体依据info-box.js组件核心逻辑默认配置、结构创建、事件、静态 APIinfo-box.less组件样式含 CSS 变量与两个变体index.js模块入口负责加载依赖与注册组件依赖关系从 index.js 可以看到组件入口依次导入../../farbe/index.jsFarbe 颜色处理模块、../../colors-css/index.jsColors CSS 模块随后才导入本组件的 JS 与 LESS。因此使用 Info Box 前项目中必须已经包含Metro UI core、Farbe 模块和Colors CSS 模块这三个基础依赖。基础用法HTML 声明式初始化Info Box 遵循 Metro UI CSS 的data-role声明式初始化约定只要在元素上添加data-roleinfo-box框架初始化时会自动将其实例化为 Info Box 组件。!-- 默认设置的 info box -- div>// 以默认配置初始化 $(#myInfoBox).infobox(); // 传入自定义配置 $(#myInfoBox).infobox({ type: alert, width: 400, overlay: true, overlayClickClose: true, autoHide: 5000 });静态 API 动态创建无需预先在 HTML 中书写任何结构直接用Metro.infobox.create()即可动态创建并默认打开一个 Info BoxMetro.infobox.create( Your message here, success, { overlayClickClose: true, autoHide: 3000 } );对应源码实现在 info-box.js 的Metro.infobox.create它动态向body追加一个div内部放入.info-box-content将removeOnClose: true与type合并进用户传入的 options并标记_runtime: true然后调用el.infobox(ib_options)完成初始化、设置内容最后在open ! false时自动打开。这意味着动态创建的 Info Box 在关闭时会自动从 DOM 中移除适合一次性提示场景。插件参数详解以下为 README.md 给出的完整参数表与 info-box.js 中InfoBoxDefaultConfig的默认值一一对应参数类型默认值说明infoboxDeferrednumber0组件初始化前的延迟毫秒数typestringInfo Box 类型success、info、alert、warningwidthnumber480Info Box 宽度像素heightstring/numberautoInfo Box 高度overlaybooleantrue是否在 Info Box 背后显示遮罩层overlayColorstring#000000遮罩层颜色overlayAlphanumber0.5遮罩层不透明度0-1overlayClickClosebooleanfalse点击遮罩层是否关闭 Info BoxautoHidenumber0自动关闭延迟毫秒数0 表示不自动关闭removeOnClosebooleanfalse关闭时是否从 DOM 中移除该元素closeButtonbooleantrue是否显示关闭按钮clsBoxstringInfo Box 追加的额外 CSS 类clsBoxContentstring内容容器追加的额外 CSS 类clsOverlaystring遮罩层追加的额外 CSS 类关键参数的源码级说明type从setType方法可以看到切换类型时会执行element.removeClass(success info alert warning).addClass(t)即类型通过互斥的 CSS 类实现确保同一时刻只应用一种语义样式overlayColor与overlayAlpha在_overlay方法中若overlayColor为字符串transparent遮罩直接追加transparent类实现完全透明否则调用Farbe.Routines.parse()解析颜色、Farbe.Routines.toRGBA()结合overlayAlpha生成带透明度的 RGBA 背景。这正是组件依赖 Farbe 模块的原因overlayClickClose在open方法中只有该选项为true时才会为遮罩绑定点击关闭事件同时注意$(.overlay).length 0的判断避免重复追加遮罩autoHideopen方法中Number.parseInt(o.autoHide) 0时设置setTimeout自动调用close()removeOnClose在close方法中为true时执行this.destroy()并从 DOM 移除元素适用于动态创建的一次性实例Metro.infobox.create默认强制开启width/height直接通过element.css()设置样式层还通过max-width: calc(100vw - 100px)与max-height: calc(100vh - 100px)见 info-box.less约束在小屏幕上不会溢出视口。事件回调组件通过Metro.Component的事件系统对外暴露以下回调默认值均为Metro.noop事件触发时机onOpenInfo Box 打开时onCloseInfo Box 关闭时onInfoBoxCreateInfo Box 创建完成后从源码看三个事件的触发点分别为_create中完成结构与事件绑定后通过_fireEvent(info-box-create, ...)触发创建事件open方法中在元素变为可见后触发_fireEvent(open)close方法中在隐藏元素后触发_fireEvent(close)。此外在_createEvents中组件为.closer和.js-dialog-close用于确认对话框中的“取消”按钮统一绑定了点击关闭逻辑并监听窗口resize事件调用reposition()保证窗口尺寸变化时 Info Box 始终居中。API 方法组件实例方法方法说明open()打开 Info Box显示元素并触发onOpenclose()关闭 Info Box隐藏元素、移除遮罩、触发onClosesetContent(content)设置内容容器的 HTML并重新居中定位setType(type)切换类型success、info、alert、warningreposition()重新将 Info Box 定位到屏幕中央isOpen()返回 Info Box 是否处于打开状态reposition/_setPosition的实现为top (window高度 - 元素外高) / 2、left (window宽度 - 元素外宽) / 2即严格的视口水平、垂直居中。isOpen则通过元素上的data(open)标志判断而非实时读取可见性样式。静态 API 方法方法说明Metro.infobox.open(element, content, type)打开 Info Box可选地同时设置内容与类型Metro.infobox.close(element)关闭 Info BoxMetro.infobox.setContent(element, content)设置内容并重新居中Metro.infobox.setType(element, type)设置类型并重新居中Metro.infobox.isOpen(element)返回 Info Box 是否打开Metro.infobox.create(content, type, options, open)动态创建 Info Boxopen默认true所有静态方法内部都会先通过Metro.utils.isMetroObject(el, infobox)校验元素是否已初始化为 Info Box未初始化则返回false随后经Metro.getPlugin(el, infobox)获取组件实例再调用对应实例方法。这也解释了为什么官方示例页 examples/info-box.html 中可以用Metro.getPlugin(#info-box, info-box).open()直接驱动已有实例。全局配置如果需要为所有 Info Box 统一设置默认值可以调用Metro.infoBoxSetup()Metro.infoBoxSetup({ width: 400, overlayClickClose: true, // 其他参数 });从源码看Metro.infoBoxSetup通过$.extend({}, InfoBoxDefaultConfig, options)浅合并到默认配置对象InfoBoxDefaultConfig上此后所有新初始化的 Info Box 都会以此为基础。另外组件还支持全局声明式配置若globalThis.metroInfoBoxSetup在脚本加载前已被定义组件会自动读取并应用它对应 info-box.js 中的if (typeof globalThis.metroInfoBoxSetup ! undefined)分支。因此也可以在页面中提前放置script window.metroInfoBoxSetup { overlayClickClose: true, autoHide: 4000 }; /script使用 CSS 变量定制主题Info Box 采用 CSS 变量驱动主题可同时覆盖浅色与深色模式.dark-side作用域。基础 Info Box 变量变量默认值浅色深色模式说明--info-box-border-radius6px6px边框圆角--info-box-backgroundvar(--default-background)var(--default-background)背景色--info-box-colorvar(--default-color)var(--default-color)文字颜色--info-box-border-colorvar(--border-color)var(--border-color)边框颜色More Info Box 变体变量变量默认值浅色深色模式说明--more-info-box-border-radius6px6px边框圆角--more-info-box-backgroundvar(--default-background)渐变linear-gradient背景--more-info-box-colorvar(--default-color)var(--default-color)文字颜色--more-info-box-icon-colorrgba(0,0,0,0.15)rgba(0,0,0,0.15)图标颜色--more-info-box-more-backgroundrgba(0,0,0,0.1)rgba(0,0,0,0.1)“更多”区域背景--more-info-box-more-colorrgba(255,255,255,0.8)rgba(255,255,255,0.8)“更多”区域文字颜色--more-info-box-border-colorvar(--border-color)var(--border-color)边框颜色这些变量的默认值定义在 info-box.less 的:root与.dark-side作用域中其中深色模式下--more-info-box-background被替换为linear-gradient(to right, rgba(255, 238, 238, 0.15), rgba(255, 252, 252, 0.1))。自定义单个实例样式CSS 变量的作用域特性允许你针对单个 Info Box 覆写/* 为指定 info box 定制样式 */ #myCustomInfoBox { --info-box-background: #e3f2fd; --info-box-color: #0d47a1; --info-box-border-color: #bbdefb; --info-box-border-radius: 10px; }将该id应用到data-roleinfo-box元素上即可生效。可用 CSS 类基础类.info-box— Info Box 主容器position: fixed置于视口中央z-index 使用z-index-modal层级.info-box-content— 内容容器默认padding: 20px.closer— 右上角关闭按钮默认渲染为 × 符号类型修饰类.success— 成功消息样式.info— 信息消息样式.alert— 告警消息样式.warning— 警告消息样式扩展变体.info-box2— 更简化的变体包含标题title与数值value区块见 info-box.less 中.info-box2的定义纵向 flex 布局标题为 9px 大写文本数值区支持primary-value/secondary-value主次数值对比.more-info-box— 带图标与“更多”区域的变体固定高度 128px右侧 64px 图标hover 时放大 1.2 倍底部通栏more区域适合展示大数值指标加跳转链接的场景。实战示例告警消息// 展示一条警告消息10 秒后自动关闭 Metro.infobox.create( h4Warning/h4pYour session will expire in 5 minutes./p, warning, { autoHide: 10000, closeButton: true } );确认对话框利用.js-dialog-close内置的点击关闭绑定可以快速搭建一个确认对话框——无需额外编写关闭逻辑div idconfirmDialog>赞分享前端UI组件【免费下载链接】Metro-UI-CSSA progressive front-end framework for creating high-performance responsive reactive web applications!项目地址https://gitcode.com/gh_mirrors/me/Metro-UI-CSS点击查看免费下载相关推荐Metro UI CSS Dropdown Button 组件完整实战指南从基础用法到源码级原理Metro UI CSS Dropdown Button 组件完整实战指南从基础用法到源码级原理 Dropdown Button 是 Metro UI CSS前端UI组件Metro UI CSS Carousel 组件完全指南从基础轮播到源码级配置详解Metro UI CSS Carousel 组件完全指南从基础轮播到源码级配置详解 Metro UI CSS 的 Carousel 组件是一个基于 data前端UI组件Metro UI CSS Color Picker 组件完全指南从基础用法到源码级原理Metro UI CSS Color Picker 组件完全指南从基础用法到源码级原理 导读 本文围绕 Metro UI CSS 开源前端框架中的 Color前端UI组件上一篇VideoDownloadHelper实践开源视频下载插件的多平台应用方案下一篇如何免费下载网络视频VideoDownloadHelper Chrome插件完整使用指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考