React MD v6.0.0 发布:现代化组件库的重大升级
项目简介
React MD 是一个基于 React 的 Material Design 组件库,它提供了丰富的 UI 组件和工具,帮助开发者快速构建符合 Material Design 规范的应用界面。最新发布的 v6.0.0 版本是一次重大升级,包含了超过 1200 次提交,带来了诸多新特性、破坏性变更和错误修复。
核心亮点
1. 全新的 Box 组件
Box 组件是这次更新中最实用的新增组件之一,它围绕 CSS 盒模型设计,支持 display: flex 和 display: grid 布局。通过 Box 组件,开发者可以构建大部分 DOM 结构或布局,而无需编写自定义样式。
值得注意的是,随着 Box 组件的引入,原有的 Grid、GridCell、GridList 和 GridListCell 组件已被移除。开发者现在可以使用 Box 组件来实现类似的网格布局效果。
2. 图标系统升级
Material 图标系统得到了全面更新,现在支持最新的 Material 图标,但仅通过 SVG 图标实现。如果开发者需要继续使用字体图标,可以使用新的 MaterialIcon 组件或保留的 FontIcon 组件。
新增的 MaterialSymbol 组件支持自定义重量、等级和光学尺寸,这些设置可以全局应用、针对应用特定部分或单独配置。
3. 改进的 Autocomplete 组件
Autocomplete 组件经过了彻底重做,现在提供了更好的用户体验,行为更类似于可编辑的 Select 组件。新版本的主要改进包括:
- 默认要求选择有效选项,并会重置到最后有效的选项或空字符串
- 支持多值选择,可选择显示内联芯片或复选框
- 新增圆形进度条支持
- 现在可以分别控制选中的选项和输入值
- 更直观的组件 API 设计
- 更强的类型安全性
4. 增强的 Toast 和 Alert 系统
Toast 和 Alert 系统进行了更新,现在可以从任何地方显示 Toast,而不仅限于使用 useAddToast 钩子的 React 组件中。开发者现在可以通过导入新的 addToast 函数来创建 Toast。
其他新特性包括:
- 支持主题颜色
- 允许为每个 Toast 单独配置显示时间
- 当用户悬停在 Toast 上时,超时计时会暂停
- 支持同时显示多个 Toast
- 通过自定义 Toast 渲染器属性提供更多定制选项
5. 暗黑模式改进
暗黑模式得到了增强,现在在切换至暗黑主题时,默认会显示交互状态。按钮等原生元素也会根据暗黑模式色彩方案进行更新。
6. 简化的 Slider 组件
Slider 组件进行了简化,现在只需要 value 和 setValue 即可使用。由于这些变化,RangeSlider 组件不再需要,其功能已合并到 Slider 组件中。
此外,Slider 组件现在支持在下方显示标记,帮助用户在范围内定位特定值。
7. 其他组件改进
- Tooltip 现在支持仅在文本溢出时显示
- 新增 objectFit 实用函数,用于样式化图片、视频和其他媒体类型
- Tab 组件支持垂直渲染和保持一致的标签面板高度
- Tree 组件新增了扩展模式等自定义选项
- CircularProgress 和 LinearProgress 组件现在支持多种主题颜色
开发者体验提升
1. 样式工具和类名实用函数
大多数组件现在都提供了类名实用函数,允许开发者在不使用组件本身的情况下应用样式。命名约定使用 camelCase 而非 PascalCase。
此外,新增了 cssUtils 辅助工具,用于常见样式处理。
2. 测试工具改进
新增了与 Jest 和 Vitest 集成的 polyfills 和测试工具,改善了测试体验。
3. 新增组件和钩子
v6.0.0 引入了多个新组件和钩子,包括但不限于:
- AsyncButton
- CircularProgressSuspense
- ColorSchemeProvider
- ClickableCard
- ErrorBoundary
- HighlightText
- Mark
- Navigation
- NoSsr
- SegmentedButton
- SkeletonPlaceholder
- Slide
- StickyTableSection
- TooltippedButton
- WindowSplitter
- 以及多个实用钩子如 useAsyncFunction、useCSSVariables 等
文档与样式改进
1. 全新文档网站
文档网站进行了重新设计,改进包括:
- 导航基于组件、钩子或功能而非包
- 示例和演示更专注于单一功能
- 大多数示例和演示可以直接在网站内编辑和预览
- 代码编辑器主题可在全局设置菜单中配置
2. 样式系统优化
样式系统进行了重写,始终使用最低的 CSS 特异性,使自定义样式更容易覆盖 react-md 的默认样式。
3. 焦点样式改进
几乎所有组件的 :focus 样式现在使用 :focus-visible 而非依赖 .keyboard mode &:focus,移除了对这些样式的 UserInteractionModeProvider 要求。
性能与兼容性
1. ID 处理改进
所有需要 id 的 react-md 组件现在默认使用 useId(),可以省略 id 属性。
2. SSR 支持增强
通过在新的 CoreProviders 中启用 ssr 模式,临时组件(如对话框和覆盖层)在服务器端渲染后会保持可见和挂载状态,直到首次卸载。
3. StrictMode 兼容
修复了所有 StrictMode 错误,react-md 现已准备好支持 React 19。
4. Portal 改进
Portal 现在默认将所有内容渲染在 <div id="rmd-portal-container" /> 内,而非 document.body,便于开发者工具检查和防止在 document.body 中渲染额外节点可能出现的问题。
构建与打包优化
1. ESM 支持
react-md 现在仅支持 ESM,移除了对传统 @import Sass 语法的支持。
2. 模块导入优化
新的 @react-md/core 包支持从特定路径导入,而非根桶文件导入,提高了开发速度。
3. CSS 变量组织
自定义属性现在会在开发者工具中自动分组,便于检查。
4. 体积优化
gzipped 后的文件大小有所减小:
- JavaScript: 从 92.51 kB 降至 82.77 kB
- SCSS: 从 18.08 kB 降至 16.55 kB
升级建议
对于计划升级到 react-md v6 的开发者,建议仔细阅读迁移指南,了解所有破坏性变更和新的最佳实践。这次重大更新虽然包含许多破坏性变更,但也带来了显著的性能改进、更好的开发者体验和更丰富的功能集。
PaddleOCR-VLPaddleOCR-VL 是一款顶尖且资源高效的文档解析专用模型。其核心组件为 PaddleOCR-VL-0.9B,这是一款精简却功能强大的视觉语言模型(VLM)。该模型融合了 NaViT 风格的动态分辨率视觉编码器与 ERNIE-4.5-0.3B 语言模型,可实现精准的元素识别。Python00- DDeepSeek-OCR暂无简介Python00
openPangu-Ultra-MoE-718B-V1.1昇腾原生的开源盘古 Ultra-MoE-718B-V1.1 语言模型Python00
HunyuanWorld-Mirror混元3D世界重建模型,支持多模态先验注入和多任务统一输出Python00
AI内容魔方AI内容专区,汇集全球AI开源项目,集结模块、可组合的内容,致力于分享、交流。03
Spark-Scilit-X1-13BFLYTEK Spark Scilit-X1-13B is based on the latest generation of iFLYTEK Foundation Model, and has been trained on multiple core tasks derived from scientific literature. As a large language model tailored for academic research scenarios, it has shown excellent performance in Paper Assisted Reading, Academic Translation, English Polishing, and Review Generation, aiming to provide efficient and accurate intelligent assistance for researchers, faculty members, and students.Python00
GOT-OCR-2.0-hf阶跃星辰StepFun推出的GOT-OCR-2.0-hf是一款强大的多语言OCR开源模型,支持从普通文档到复杂场景的文字识别。它能精准处理表格、图表、数学公式、几何图形甚至乐谱等特殊内容,输出结果可通过第三方工具渲染成多种格式。模型支持1024×1024高分辨率输入,具备多页批量处理、动态分块识别和交互式区域选择等创新功能,用户可通过坐标或颜色指定识别区域。基于Apache 2.0协议开源,提供Hugging Face演示和完整代码,适用于学术研究到工业应用的广泛场景,为OCR领域带来突破性解决方案。00- HHowToCook程序员在家做饭方法指南。Programmer's guide about how to cook at home (Chinese only).Dockerfile013
Spark-Chemistry-X1-13B科大讯飞星火化学-X1-13B (iFLYTEK Spark Chemistry-X1-13B) 是一款专为化学领域优化的大语言模型。它由星火-X1 (Spark-X1) 基础模型微调而来,在化学知识问答、分子性质预测、化学名称转换和科学推理方面展现出强大的能力,同时保持了强大的通用语言理解与生成能力。Python00- PpathwayPathway is an open framework for high-throughput and low-latency real-time data processing.Python00