使用美观的组件更快地交付
NextUI Pro
返回博客
avatar
Junior Garcia@jrgarciadev

NextUI v2.6.0 🔥

NextUI v2.6.0

NextUI 版本 v2.6.0 带来了 4 个新组件：Form、Drawer、Input OTP 和 Alert，支持 React 19 和 Next.js 15，以及大量的错误修复和改进。

v2.6.0 中的新功能？

立即使用以下方法之一进行升级:

  1. 使用 cli 升级 NextUI
  • 首先，将 Framer Motion 升级到至少 v11.9.0
  • 然后，升级 NextUI
  1. 使用 pnpm 升级 NextUI

表单组件

构建于 React Aria 的 Form 组件之上，Form 组件提供了可访问的表单处理，内置了提交、验证和错误管理功能。

内置验证

您可以使用原生 HTML 验证属性或创建自定义验证规则。

实时验证

您可以在用户输入时验证表单数据。

服务器集成

Form 组件可以与 React Server Actions 无缝协作。

表单库支持

您还可以使用流行的表单库，如 react-hook-form 和 formik。

内置可访问性

Form 组件会自动处理 ARIA 属性和键盘导航，使您的表单对所有人可用

Schema 验证

Form 组件支持来自诸如 Zod 等模式验证库的错误。您可以使用 Zod 的 flatten 方法获取每个字段的错误消息，并将其作为服务器响应的一部分返回。

主要特性

  • 服务器集成：与 React Server Actions 无缝协作
  • Schema 验证：支持 Zod schema 验证
  • 表单库支持：支持诸如 react-hook-form 和 formik 等流行的表单库
  • 可访问性：内置可访问性功能，包括 ARIA 属性和键盘导航

请查阅我们的 表单文档，深入了解所有功能和特性。

抽屉组件

新的 Drawer 组件从屏幕边缘显示一个滑出面板，其中包含补充内容，具有内置的可访问性、焦点管理和键盘导航。

主要特性

  • 多种放置位置：可以放置在屏幕的任何边缘（左、右、上、下）
  • 可自定义的大小：具有从 xs 到 5xl 的预设大小，外加全宽选项
  • 背景选项：支持透明、不透明或模糊的背景样式
  • 焦点管理：自动处理焦点捕获和恢复
  • 键盘导航：内置支持 Esc 键关闭和键盘导航
  • 表单验证：支持表单输入的内置验证状态和自定义验证规则

请查看 抽屉文档，了解更多详细信息和示例。

输入 OTP 组件

Input OTP 组件提供了一种可访问的方式来输入一次性密码，它内置了焦点管理和键盘导航功能。它基于 input-otp 库构建，作者是 @guilherme_rodz。

主要特性

  • 焦点管理：自动处理焦点捕获和恢复
  • 键盘导航：内置支持 Esc 键关闭和键盘导航
  • 可自定义的动画：支持通过 Framer Motion 实现自定义运动动画
  • 表单集成：与表单元素无缝协作，同时保持正确的焦点管理

有关更多详细信息和示例，请参阅 Input OTP 文档。

Alert 组件

Alert 组件允许用户向用户显示消息。它在设计时考虑了可访问性，并包括焦点管理、键盘导航和屏幕阅读器支持等功能。

主要特性

  • 焦点管理：自动处理焦点捕获和恢复
  • 键盘导航：内置支持 Esc 键关闭和键盘导航
  • 可自定义的动画：支持通过 Framer Motion 实现自定义运动动画
  • 表单集成：与表单元素无缝协作，同时保持正确的焦点管理

有关更多详细信息和示例，请参阅 Alert 文档。

基于集合的组件虚拟化

Select、Autocomplete 和 Listbox 组件现在支持虚拟化，以提高大型集合的性能。

注意：虚拟化策略基于 @tanstack/react-virtual 包，该包通过仅渲染视口中可见的项目来有效渲染大型列表。

有关更多详细信息和示例，请参阅 Autocomplete 文档。

React 19 支持和库升级

  • 为了准备 React 19，NextUI 现在与 React 19 RC 和 Next.js 15 兼容。
  • React Aria 包升级并修复了 React Aria、React Flow、React Hook Form、React Router、React Server、React Use、Tanstack Query、Tanstack Virtual 和 Tanstack Table 的确切版本
  • Framer Motion 现在仅在启用动画时添加到最终捆绑包中，并且我们还添加了对 Framer motion v12 的支持

新的 use-theme 钩子

我们创建了自己的 use-theme 钩子，它取代了 use-dark-theme 钩子，允许用户在运行时更改主题。

有关更多详细信息和示例，请参阅 暗黑模式文档。

可拖动模态框

添加了对可拖动模态框的支持。

注意：模态框只能从标题部分拖动。

路由改进

NextUI 现在提供了增强的路由功能，具有更好的 TypeScript 支持以及与流行的路由解决方案的集成

  • 路径类型安全：所有基于路由器的组件现在在使用 TypeScript 时都支持路径智能提示
  • 路由器选项支持：为所有链接组件添加了 routerOptions 属性，用于控制导航行为
  • 增强的路由器配置：通过 TypeScript 对路由器选项进行全局类型配置
  • 改进的基本路径支持：通过 NextUIProvider 中的新 useHref 属性更好地处理基本路径
  • 特定于框架的优化：内置支持 Next.js（App 和 Pages 路由器）、React Router、Remix 和 TanStack Router

有关更多详细信息，请参阅 路由文档。

API 改进

NextUIProvider

  • useHref (新增) - 将路由器特定的 href 转换为可在 DOM 元素上使用的原生 href。例如，如果您的路由器接受相对路径或自定义链接格式，useHref 将根据 RouterProvider 的配置生成完整的原生 href。
  • navigate (修改) - ((path: Href, routerOptions?: RouterOptions) => void) | undefined - 我们添加了路由器选项
  • reduceMotion (新增) - 控制整个应用程序的动态偏好，允许开发者尊重用户对减少动态效果的设置。可用的选项有：
    • "always" - 始终禁用动态效果
    • "never" - 始终启用动态效果
    • "user" - 尊重用户系统对动态效果的偏好

DatePicker

  • selectorButtonPlacement (新增) - 控制选择器按钮的放置位置
  • showMonthAndYearPickers (新增) - 控制月份和年份选择器下拉菜单的可见性

Tabs

  • tabRef (新增) - 允许通过 ref 访问底层的选项卡元素

Popover

  • shouldCloseOnScroll (新增) - 控制在滚动时是否应关闭弹出框

Table

  • isKeyboardNavigationDisabled (新增) - 禁用表格中的键盘导航

Textarea

  • isClearable (新增) - 为文本区域添加清除按钮功能

Select

  • hideEmptyContent (新增) - 控制空内容消息的可见性
  • 为提高大型数据集的性能，增加了虚拟化支持

Autocomplete & Listbox

  • 为提高大型数据集的性能，增加了虚拟化支持
  • 增加了对可拖动模态框的支持（可从头部拖动）

有关更多详细信息，请参阅NextUIProvider 文档。

接下来是什么？

  • 品牌重塑 - 我们正在准备对 NextUI 进行品牌重塑，以确保长期可持续性并避免潜在的命名冲突
  • 更新 NextUI Pro - 我们正在开发与 Next.js 15 和 React 19 兼容的新版本 NextUI Pro。请在此处关注进度 此处
  • Tailwind CSS v4 支持 - 在此处了解更多信息
  • React 19 内部 API 迁移 - 在此处了解更多信息
  • Toast 组件 - 关注进度 这里
  • Rating 组件 - 关注进度 这里
  • 文件上传 组件 - 关注进度 这里
  • 升级 到最新的 React Aria - 阅读更多 这里
  • 完成 Figma 组件 - 关注进度 这里

🚨 破坏性更改

我们尽量将破坏性更改保持在最低限度，但有时为了改善开发者体验，有必要对 API 进行更改。

表格主题组数据选择器

表格主题的嵌套组选择器已更新为需要显式元素选择器。您需要在组数据的自定义样式中添加 /tr 或 /th。

圆形进度主题位置

圆形进度的 Tailwind 变体已从 circular-progress 移动到 progress。您需要更新您的 Tailwind CSS 配置 tailwind.config.js

发布更改

特性:

文档:

  • 通过为代码块实现 useIntersectionObserver 提高了性能 - 现在它们只在视口中可见时加载
  • 通过样式更改增强了可读性，以提供更多空间和更好的视觉层次结构
  • 改进了 API 表格的设计
    • 将描述移到了标题后立即显示的工具提示中
    • 减小了字体大小以方便浏览
    • 改进了配色方案以提高对比度
  • 通过 @wingkwong 在 PR #3796 中修复了损坏的链接
  • 通过 @wingkwong 在 PR #4030 中修复了 canary storybook 链接
  • 通过 @wingkwong 在 PR #3823 中修复了暗模式页面中的拼写错误
  • 通过 @wingkwong 在 PR #4209 中修复了 classNames 和 itemClasses 的类型
  • 通过 @PentSec 在 PR #3928 中修复了登录页面中的拼写错误
  • 通过 @dperconti 在 PR #3516 中修复了日期选择器页面中的拼写错误
  • 通过 @Choneas 在 PR #3838 中修复了 Select 页面中不正确的突出显示行
  • 通过 @nnmax 在 PR #3878 中修复了代码块中意外的翻译
  • 修复安装页面中错误的 yarn 命令，由 @AzpektDev 在 PR #4132 中完成。
  • 添加了合乎道德的广告，由 @jrgarciadev 在 PR #3803 中完成。
  • 添加了表单指南，由 @ryo-manba 在 PR #3882 中完成。
  • 增强了所有页面的整体开发者体验，由 @wingkwong 在 PR #4055 中完成。
  • 支持了 Autocomplete 的虚拟化，由 @jrgarciadev 和 @vinroger 在 PR #4094 和 PR #3444 中完成。
  • 支持了 Select 的虚拟化，由 @vinroger 在 PR #4203 中完成。
  • 支持了 Listbox 的虚拟化，由 @vinroger 在 PR #4206 中完成。
  • 优化了代码折叠，由 @winchesHe 在 PR #4202 中完成。
  • 同步了来自 nextui-cli v0.3.5 的 API，由 @winchesHe 在 PR #4173 中完成。

Bug 修复:

增强功能:

杂项:

特别感谢 NextUI 团队成员 @wingkwong, @macci001, @vinroger, @ryo-manba, @winchesHe, @tianenpang 以及其他贡献者为本次发布所做的贡献。

有关更改的完整列表，请参阅发行说明。

感谢阅读，祝您编码愉快！🚀

社区

我们很高兴看到社区采用 NextUI，提出问题并提供反馈。无论是功能请求、错误报告还是展示项目，请积极参与！

贡献

我们一直欢迎在 NextUI 上提交 PR，请参阅我们的贡献指南，了解如何为该项目做出贡献。