前端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点击查看免费下载导读Tabs选项卡是 Metro UI CSS 中组织页面内容的核心组件之一它通过data-roletabs声明式初始化帮助开发者把相关联的内容分区展示在独立的页签中。本指南以 source/components/tabs/README.md 为骨架结合 tabs.js、tabs.less 源码与 examples/tabs.html 实战示例系统讲解 Tabs 的四种视觉风格、五种定位布局、Linked Tabs 联动、编程式初始化、全部 16 个插件参数、5 个公开 API 方法、5 个生命周期事件以及 CSS 变量驱动的主题定制读完即可在项目中直接落地一套完整的多页签界面。本文只讨论经典 Tabs 组件Material 风格的变体属于独立组件data-rolematerialtabs相关说明见 source/components/tabs-material/README.md。Tabs 组件是什么职责与依赖Tabs 组件提供一个标签化界面用于把内容组织进相互独立的页签中。它支持多种样式、位置和交互特性包括可扩展expand的移动端友好布局、多组页签联动linked tabs以及完全可定制的样式。组件在框架中的注册位置与依赖关系如下注册入口source/components/index.js 中通过import ./tabs/index.js挂载组件入口source/components/tabs/index.js 依次导入../../farbe/index.jsFarbe 颜色处理、../hamburger/index.js汉堡菜单、tabs.js与tabs.less依赖项Farbe颜色处理与 Hamburger 组件移动端菜单功能。这两项依赖会被 index.js 自动引入无需开发者手动加载额外资源。快速上手声明式初始化Tabs 组件遵循 Metro UI CSS 的约定在 HTML 中使用data-roletabs标记配合指向内容区块的锚点链接即可完成初始化。基本用法如下内容块须包在.tabs-targets容器内!-- Basic tabs with content targets -- ul>ul idtabs >!-- Text style tabs -- ul>!-- 示例底部居中 -- ul>ul>!-- Multiple tab sets that synchronize with each other -- ul>const tabs Metro.makePlugin(#myTabs, tabs, { type: pills, expand: true, updateUri: true, onTabOpen: function(tab, target) { console.log(Tab opened:, target); } });获取已存在组件实例则使用Metro.getPluginsource/core/metro.js该方法读取元素上缓存的数据并返回插件对象。此外框架支持通过全局对象globalThis.metroTabsSetup预先配置默认参数——tabs.js 中若检测到该对象存在会调用Metro.tabsSetup(...)合并到TabsDefaultConfig适合在框架加载前批量覆盖默认值。参数解析机制框架的_setOptionsFromDOMsource/core/component.js会把元素上的data-*属性逐一映射到同名 options若该 key 存在于默认配置中则尝试用JSON.parse解析为真实类型失败则保留字符串。因此布尔值可写data-expandtrue数值可写data-tabs-deferred100字符串直接书写即可。插件参数总表以下 16 个参数构成 Tabs 组件的完整配置面默认值取自 tabs.js 的TabsDefaultConfig与 README 参数表一一对应参数类型默认值说明tabsDeferrednumber0组件初始化前的延迟毫秒数经_createExec以 setTimeout 执行expandbooleanfalse是否始终横向展开并铺满宽度expandPointstringnull触发响应式展开的媒体查询断点如(min-width: 768px)typestringdefault页签样式default/text/group/pills/n8nupdateUribooleanfalse切换页签时是否同步更新浏览器 URL 的 hashpositionstringtop位置top/bottom/left/rightalignstringleft对齐left/center/rightgroup 类型不受影响linkstring多组页签联动标识符clsTabsstring追加到 tabs 容器.tabs的额外 CSS 类clsTabsListstring追加到页签列表.tabs-list的额外 CSS 类clsTabsListItemstring追加到每个页签项li的额外 CSS 类clsTabsListItemActivestring追加到激活页签项的额外 CSS 类参数在结构创建中的落点从 tabs.js 可以追踪各参数的实际作用position拼出tabs-{pos}、type拼出tabs-{type}、align拼出align-{align}clsTabs/clsTabsList/clsTabsListItem分别addClass到容器、列表与每个liclsTabsListItemActive则在_open时追加到激活项tabs.js。expand与expandPoint共同决定是否添加.tabs-expand。updateUri可书签化的 URL hash当updateUri: true时切换页签会把#目标id写入location.hashtabs.js同时组件监听hashchange事件通过_findTabByTarget找到对应页签并打开tabs.js。由此刷新页面后 URL hash 能恢复上次的激活页签实现可书签化状态。API 方法详解组件公开 5 个可编程调用的方法实现均位于 tabs.js方法签名行为next()无参切换到当前激活项的下一个兄弟li不存在则不动作prev()无参切换到当前激活项的上一个兄弟li不存在则不动作openByTarget(target)string按href如#profile打开对应页签openByIndex(index)number按零基索引打开页签open(tab)number \| string统一入口数字按 1 基索引内部减 1字符串委托给openByTargetdestroy()无参注销 resize/hashchange、点击等监听并移除 DOM方法使用示例摘自 READMEconst tabs Metro.getPlugin(#myTabs, tabs); // Navigate to next/previous tabs tabs.next(); tabs.prev(); // Open specific tabs tabs.openByTarget(#profile); tabs.openByIndex(1); tabs.open(2); // Opens second tab (1-based) tabs.open(#home); // Opens tab with href#home实现要点对应源码行号next/prev通过 jQuery 风格active_tab.next(li)/.prev(li)定位兄弟项并调用_opentabs.jsopenByIndex先校验Metro.utils.isValue(tabs[index])再打开越界安全tabs.jsopen对数字执行openByIndex(tab - 1)对字符串执行openByTargettabs.jsdestroy使用命名空间{ ns: this.id }精确移除 resize 监听避免误伤全局事件tabs.js。事件系统组件通过_fireEventsource/core/component.js触发 5 类事件事件名经过 camelCase 转换后既会以 DOM 事件形式在元素上触发element.fire(...)也会调用onXxx配置回调。事件名与回调对应如下事件回调触发时机onTabonTab点击任意页签链接时tabs.jsonTabOpenonTabOpen页签打开时tabs.jsonTabCloseonTabClose上一激活页签关闭时tabs.jsonBeforeTabonBeforeTab页签切换前回调返回非true时阻止切换tabs.jsonTabsCreateonTabsCreate组件创建完成时tabs.js声明式用法在 HTML 上绑定回调名函数定义在全局作用域ul>ul>/* Custom tab styling */ #myTabs { --tabs-item-marker: #ff6b35; --tabs-item-background-active: #fff3f0; --tabs-border-radius: 12px; } /* Custom color scheme */ .tabs-custom { --tabs-item-marker: #28a745; --tabs-item-background-hover: #e8f5e8; --tabs-item-background-active: #d4edda; }注意.tabs-custom这类自定义类需要同时配合clsTabs参数或直接写在ul上才能生效——组件会把容器类tabs加在外层包裹 div上而data-roletabs所在的ul获得的是tabs-list。若想通过类名定位整个容器可在ul上使用data-cls-tabstabs-custom之类的参数或在编程式初始化中传入clsTabs。图标支持与更多内置特性README 的 Additional Notes 部分还说明了以下能力均可从源码得到印证图标页签页签链接支持 Metro UI 图标类[class*mif-]或自定义.icon元素样式见 tabs.lessmif-*图标左右留 4px 边距.icon固定 20×20px、圆角展示移动端标题折叠状态下.expand-title显示当前激活页签标题tabs.js多组联动link参数实现多组 tabs 同步见上文Linked Tabs键盘与无障碍README 声明组件支持键盘导航与无障碍特性内容自动显隐_open会先隐藏_targets收集的所有目标再显示当前目标tabs.js、tabs.js其中带.divider类的项会被排除tabs.js外部链接支持如果页签href不是#开头如https://...点击后组件执行location.href href进行跳转而非切换页签tabs.js。最佳实践基于 README 建议并对照源码实现给出以下落地建议使用有意义的 href页签链接的href既是内容目标也是openByTarget与 URL hash 联动的依据应使用语义化 id如#profile便于深链接提供 ARIA 标签为页签容器与内容区补充适当的 ARIA 标注保障无障碍访问标签文案简洁保持页签标题简短、可描述配合.expand-title在窄屏的展示效果同一界面风格统一避免在同一页面混用text与pills等多种类型保持视觉一致性移动端优先需要横向常驻展示时设置data-expandtrue希望在桌面展开、移动端折叠时使用expandPoint配合断点多尺寸测试Tabs 在窄屏下会自动折叠为汉堡菜单务必在手机、平板、桌面多个视口验证可书签化希望刷新后保留激活页签、支持分享 URL 时开启updateUri联动页签数量一致使用link时保持各组页签数量相同并在每组使用不同的内容目标 id。参考与进一步阅读组件文档source/components/tabs/README.md核心实现source/components/tabs/tabs.js、source/components/tabs/tabs.less组件注册source/components/tabs/index.js、source/components/index.js实战示例examples/tabs.html组件测试tests/tabs.test.js通过 Latte 框架加载examples/tabs.html校验页面无脚本错误框架支撑source/core/component.js组件生命周期与事件分发、source/core/metro.jsgetPlugin/makePlugin相关变体Material 风格页签见 source/components/tabs-material/README.md赞分享前端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 Pagination 组件完全指南参数、事件、样式定制与分页算法解析Metro UI CSS Pagination 组件完全指南参数、事件、样式定制与分页算法解析 Pagination分页组件是 Metro UI CSS前端UI组件Metro UI CSS Wizard Classic 组件详解参数、事件、API 与样式定制实战指南Metro UI CSS Wizard Classic 组件详解参数、事件、API 与样式定制实战指南 Wizard Classic 是 Metro UI C前端UI组件Metro UI CSS Switch 组件深度指南用法、参数、事件与源码级样式定制Metro UI CSS Switch 组件深度指南用法、参数、事件与源码级样式定制 Metro UI CSS 的 Switch 组件提供了一种比原生复选框更前端UI组件上一篇Kumo中Components与Blocks的本质区别什么时候该导入什么时候该复制源码下一篇Metaflow R 包入门指南安装、环境配置与第一个数据科学流程实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考