前端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 的 TimePicker 组件允许用户通过滚轮式wheel-based交互界面选择时间值时、分、秒并支持自定义步进值step与显示格式。本指南以 source/components/timepicker/README.md 为骨架结合 timepicker.js 源码、timepicker.less 样式定义与 examples/time-picker.html 实例完整讲解 TimePicker 的依赖关系、HTML 用法、全部插件参数、API 方法、事件回调、全局配置与 CSS 变量定制帮助你直接上手并把该组件嵌入自己的表单与业务界面。组件概述与依赖关系TimePicker 组件通过滚轮式的选择列表hours / minutes / seconds 三列让用户快速选取时间每个部分时、分、秒都可以独立显示或隐藏并且可以自定义步进值例如小时按 2 步进、分钟按 5 步进。依据 README 与源码该组件依赖以下基础库Metro UI Core组件框架核心提供Metro.Component、Metro.getPlugin、Metro.timePickerSetup等基础设施Dom library提供$Dom选择器、事件绑定与动画工具如$.animate、$.each。从源码看TimePicker 还复用了WheelPicker的视觉结构与滚轮交互逻辑select-block、select-wrapper、action-block等结构均继承自 source/components/wheelpicker/wheelpicker.less。在 source/components/timepicker/index.js 中可以看到组件的装配方式import ../wheelpicker/index.js; import ./timepicker.js; import ./timepicker.less;该 index.js 还会经由 source/components/index.jsimport ./timepicker/index.js;被打包进 Metro UI CSS 的整体发布产物因此只要在你的页面中引入lib/metro.js与lib/metro.css即可直接使用data-roletime-picker无需额外加载单独文件。基本用法TimePicker 的声明方式非常简洁给input元素添加data-roletime-picker即可自动初始化!-- 基本用法 -- input>!-- 带标签 -- input>// 获取插件实例 const timepicker Metro.getPlugin(#my-timepicker, time-picker); // 获取当前值字符串 const currentValue timepicker.val(); // 设置新值字符串 timepicker.val(14:30:00); // 获取时间对象 const timeObj timepicker.time(); // 返回 {h: 14, m: 30, s: 0} // 从对象设置时间 timepicker.time({h: 15, m: 45, s: 30}); // 获取时间Date 对象 const dateObj timepicker.date(); // 从 Date 对象设置时间 const date new Date(); date.setHours(10); date.setMinutes(20); timepicker.date(date); // 打开 / 关闭选择器 timepicker.open(); timepicker.close(); // 启用 / 禁用选择器 timepicker.enable(); timepicker.disable();注意date()在获取时会基于当前内部值构造 Date 对象datetime().hour(...).minute(...).second(...).ms(0)而设置时会读取 Date 的getHours/getMinutes/getSeconds与本地时区相关。此外组件支持通过changeAttribute响应属性变化见 timepicker.jsdata-value属性变化时调用val(newValue)更新值disabled属性变化时调用toggleState()切换状态。disable()/enable()分别给 input 写入data-disabled标记并为其父容器.time-picker添加/移除disabled类。事件回调事件参数触发时机onSet{val, elementVal}时间被设置时val为内部数组elementVal为写入 input 的字符串onOpen{val}时间选择器打开时onClose{val}时间选择器关闭时onScroll{target, list, picker}滚动时间列表时target为当前选中的lilist为该列表picker为组件容器onTimePickerCreate{element}组件创建完成后事件回调的触发逻辑可以在源码中找到对应位置_set()中触发set事件并携带{val, elementVal}timepicker.jsopen()/close()分别触发open/close事件timepicker.js 与 timepicker.js滚动防抖 150ms 后触发onScrolltimepicker.js。事件可通过data-on-set等data-*属性声明也可在Metro.timePickerSetup全局配置中注入函数。全局配置与 Metro UI CSS 其他组件一致TimePicker 支持通过Metro.timePickerSetup进行全局配置源码见 timepicker.jsMetro.timePickerSetup({ hoursStep: 2, minutesStep: 5, seconds: false, showLabels: true });全局配置会与默认配置深度合并$.extend({}, TimePickerDefaultConfig, options)页面中所有 TimePicker 实例都会以此为基底单实例的data-*属性与局部 options 优先级更高。此外源码还支持通过全局变量globalThis.metroTimePickerSetup在脚本加载前预置全局配置见 timepicker.jsscript window.metroTimePickerSetup { minutesStep: 5, seconds: false }; /script script src../lib/metro.js/script使用 CSS 变量定制样式TimePicker 的样式由 Less 编译而来见 timepicker.less并大量使用 CSS 变量以便于运行时定制。README 列出的相关变量如下变量默认值说明--border-color随主题变化各元素的边框颜色--wheel-picker-border-radius4px时间选择器的圆角--picker-font-size随主题变化基础值 16px时间元素的字体大小--datepicker-border-radius4px操作按钮区块的圆角结合 wheelpicker.less 还可以看到更多可定制变量--wheel-picker-color文字颜色亮色主题#191919暗色主题#dbdfe7、--wheel-picker-selected-background选中项背景亮色rgba(175,175,175,.5)暗色rgba(78,81,88,.5)、--picker-height默认var(--control-height, 36px)等。定制示例针对某个容器作用域覆盖.my-custom-timepicker { --wheel-picker-border-radius: 8px; --picker-font-size: 1.2rem; --wheel-picker-selected-background: rgba(0, 123, 255, 0.3); }应用方式input classmy-custom-timepicker>input classlarge pill-input>!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 link href../lib/metro.css relstylesheet titleTimepicker - Metro UI CSS/title /head body div classcontainer h1Timepicker 示例/h1 div input>赞分享前端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 DatePicker 组件实战指南从滚轮式日期选择到源码级定制Metro UI CSS DatePicker 组件实战指南从滚轮式日期选择到源码级定制 导读 DatePicker 是 Metro UI CSS 中基于 W前端UI组件AntdUI时间选择器TimePicker的时间选择与格式配置AntdUI时间选择器TimePicker的时间选择与格式配置 ? 引言为什么需要专业的时间选择器 在日常的WinForm应用开发中时间选择是一个高频需UI组件桌面应用PagingKit无Storyboard实现纯代码创建灵活分页菜单的技巧PagingKit无Storyboard实现纯代码创建灵活分页菜单的技巧 PagingKit是一款功能强大的iOS分页菜单库它提供了高度可定制的菜单UI比上一篇Apache SkyWalking 9.4.0 版本解析OAP 缓存与状态机制、ElasticSearch 调优及生态扩展下一篇Roc 编译器快照测试实战从 simple_lambda_constraint_success.md 理解双向类型检查如何约束 Lambda 内的数字字面量创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考