使用精美元件更快交付
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

表單元件

此 Form 元件建構於 React Aria 的 Form 元件之上，提供易於存取的表單處理功能，並內建提交、驗證和錯誤管理機制。

內建驗證

您可以使用原生的 HTML 驗證屬性，或建立自訂的驗證規則。

即時驗證

您可以在使用者輸入時驗證表單資料。

伺服器整合

Form 元件可以與 React Server Actions 無縫協作。

表單函式庫支援

您也可以使用流行的表單函式庫，例如 react-hook-form 和 formik。

內建無障礙功能

Form 元件會自動處理 ARIA 屬性和鍵盤導覽，讓您的表單可供所有人使用。

綱要驗證

Form 元件支援來自綱要驗證函式庫（例如 Zod）的錯誤。您可以使用 Zod 的 flatten 方法取得每個欄位的錯誤訊息，並將其作為伺服器回應的一部分傳回。

主要功能

  • 伺服器整合：與 React Server Actions 無縫協作
  • 綱要驗證：支援 Zod 綱要驗證
  • 表單函式庫支援：支援流行的表單函式庫，例如 react-hook-form 和 formik
  • 無障礙功能：內建無障礙功能，包括 ARIA 屬性和鍵盤導覽

請查看我們的 表單文件，深入了解所有功能和特性。

抽屜元件

新的 抽屜 元件會在螢幕邊緣顯示滑動面板，其中包含補充內容，並具有內建的無障礙功能、焦點管理和鍵盤導覽。

主要功能

  • 多種位置：可以放置在螢幕的任何邊緣（左、右、上、下）
  • 可自訂的大小：提供從 xs 到 5xl 的預設大小，以及全寬選項
  • 背景選項：支援透明、不透明或模糊的背景樣式
  • 焦點管理：自動處理焦點陷阱和還原
  • 鍵盤導覽：內建支援 Esc 鍵關閉和鍵盤導覽
  • 表單驗證：支援表單輸入的內建驗證狀態和自訂驗證規則

請參閱 抽屜文件，了解更多詳細資訊和範例。

輸入 OTP 元件

輸入 OTP 元件提供一個易於存取的方式來輸入一次性密碼，並具有內建的焦點管理和鍵盤導覽功能。它是建立在 input-otp 函式庫的基礎上，由 @guilherme_rodz 開發。

主要功能

  • 焦點管理：自動處理焦點陷阱和還原
  • 鍵盤導覽：內建支援 Esc 鍵關閉和鍵盤導覽
  • 可自訂的動畫：支援透過 Framer Motion 進行自訂動態動畫
  • 表單整合：與表單元素無縫協作，同時保持正確的焦點管理

請參閱輸入 OTP 文件以了解更多詳細資訊和範例。

警示元件

警示元件允許使用者向使用者顯示訊息。它的設計考慮到可存取性，並包含焦點管理、鍵盤導航和螢幕閱讀器支援等功能。

主要功能

  • 焦點管理：自動處理焦點陷阱和還原
  • 鍵盤導覽：內建支援 Esc 鍵關閉和鍵盤導覽
  • 可自訂的動畫：支援透過 Framer Motion 進行自訂動態動畫
  • 表單整合：與表單元素無縫協作，同時保持正確的焦點管理

請參閱警示文件以了解更多詳細資訊和範例。

基於集合的元件虛擬化

選擇、自動完成和 清單框元件現在支援虛擬化，以改善大型集合的效能。

注意：虛擬化策略基於 @tanstack/react-virtual 套件，該套件透過僅呈現可視視窗中的項目來有效率地呈現大型清單。

請參閱自動完成文件以了解更多詳細資訊和範例。

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 Hook

我們建立了自己的 use-theme Hook，以取代 use-dark-theme Hook，讓使用者可以在執行階段變更主題。

請參閱深色模式文件以了解更多詳細資訊和範例。

可拖曳的模式視窗

新增對可拖曳模式視窗的支援。

注意：模式視窗只能從標題部分拖曳。

路由改進

NextUI 現在提供增強的路由功能，具有更好的 TypeScript 支援以及與常見路由解決方案的整合

  • 路徑類型安全：所有基於路由器的元件現在在使用 TypeScript 時都支援路徑智慧感知
  • 路由器選項支援：為所有連結元件新增 routerOptions 屬性，以控制導航行為
  • 增強的路由器設定：透過 TypeScript 進行路由器選項的全局類型設定
  • 改進的基礎路徑支援：透過 NextUIProvider 中的新 useHref 屬性來更好地處理基礎路徑
  • 框架特定的最佳化：內建支援 Next.js (App 和 Pages Router)、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) 組件 - 追蹤進度 這裡
  • 檔案上傳 (File Upload) 組件 - 追蹤進度 這裡
  • 升級 至最新 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 中完成。
  • 提升所有頁面的整體開發者體驗 (DX)，由 @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 中完成。

錯誤修正:

增強功能:

雜項:

特別感謝 NextUI 團隊成員 @wingkwong、@macci001、@vinroger、@ryo-manba、@winchesHe、@tianenpang 和所有為此版本做出貢獻的協作者。

如需完整變更列表，請參閱版本說明。

感謝您的閱讀，祝您編碼愉快！🚀

社群

我們很高興看到社群採用 NextUI、提出問題並提供回饋。無論是功能請求、錯誤報告還是展示專案，都請踴躍參與！

貢獻

我們隨時歡迎針對 NextUI 提交 PR，請參閱我們的貢獻指南，以了解如何為此專案做出貢獻。