MUI X v6.11.0。所有新功能總覽

自從第一個 v6 穩定版本發布以來，我們不斷推出新的主要功能。現在我們已經達到 MUI X v6.11.0，現在是時候深入研究 MUI X v6 的最新新增功能，以及您為何應該立即取得最新版本的原因。

目錄

• 日期選擇器
  • 支援時區
  • 數位時鐘
• 資料網格
  • 欄標題篩選器
  • 複製與貼上
• 圖表 - alpha 版本
• Tree View 正移至 MUI X
• 意見回饋

日期選擇器

支援時區

不再需要煩惱以您選擇的時區顯示日期。🌎

您可以輕鬆地在不同的時區中顯示和選擇日期和時間，而無需擔心轉換邏輯或與後端保持一致性。

設定 timezone prop 以定義應顯示 Date、Time 或 DateTime 的時區。

<TimePicker
  value={value}
  onChange={setValue}
  timezone="Pacific/Honolulu" // Can be in any timezone of your choice
  label={'Rendered in "Pacific/Honolulu"'}
/>

查看完整說明，以取得更多關於在您的應用程式中使用此功能的資訊。

數位時鐘

數位時鐘是 Time Pickers 的指針時鐘的替代方案。最初的提案主要集中在行動裝置上，而新的介面是為桌上型電腦體驗設計的，以獲得更好的時間精確度。這個新增加的功能使我們的日期選擇器比以前更加通用和用戶友善。它在 Time Picker 和 Date Time Picker 上都作為桌上型電腦的預設變體提供。

查看 日期選擇器—數位時鐘文件 中的所有可能性，並告訴我們您的想法！

資料網格

欄標題篩選器

在欄標題上篩選讓使用者能夠快速篩選資料，而無需任何額外選單。使用 unstable_headerFilters prop 來啟用此功能。

新的篩選欄位顯示在標題下方，並與篩選面板同步。如果您偏好更簡潔的方式，可以使用 disableColumnFilter prop 停用預設篩選面板，並將篩選器設定為僅使用預設運算子。

如需更多關於如何使用和自訂篩選器的詳細資訊，請查看其文件頁面。

複製與貼上

在設定 experimentalFeatures={{ clipboardPaste: true }} prop 之後，您可以直接在您的資料網格之間複製和貼上資料。

這個新功能非常通用，您可以從其他欄位、其他網格交換資料，甚至直接與您選擇的試算表工具交換資料。

此功能與編輯 API 整合，因此貼上的資料可以使用 processRowUpdate prop 持續保存，以透過您常用的編輯驗證流程更新您的資料來源。回呼函數 clipboardPasteStart 和 clipboardPasteEnd 在剪貼簿貼上操作期間觸發，這對於圍繞事件的額外自訂可能很有用。

如需更多關於如何使用剪貼簿複製和貼上的詳細資訊，請查看 資料網格—剪貼簿文件。

圖表 - alpha 版本

我們很高興宣布 MUI X 即將擴展：一套全新的組件，用於建置和自訂圖表。

使用 MUI X Charts，您可以從各種圖表類型中選擇，包括折線圖、長條圖、圓餅圖、區域圖、散佈圖等等。每種圖表類型都經過周到細緻的設計，確保視覺呈現不僅美觀，而且在傳達複雜資料方面也非常有效。

而且它隨附由我們的設計師特別製作的華麗調色盤！

查看下面的影片，重點介紹我們的一些圖表

隨著我們朝向穩定版本邁進，我們致力於提升開發人員和使用者的整體體驗，因此您的意見回饋至關重要！

我們也將穩步擴展我們的產品組合，新增圖表類型，例如 Heatmap、Funnel、Gantt 等等。如果您希望我們優先處理特定的圖表視覺化，我們鼓勵您在 GitHub 上的相關 issue 投贊成票。您的意見可以直接影響我們的開發時程，所以請隨時告訴我們您最重視什麼！

立即開始使用圖表！

Tree View 正移至 MUI X

Tree View 正在從 lab 遷移到 MUI X，它很快就會有第一個 Alpha 版本！

Tree View 是一個以樹狀結構格式表示階層的組件。可以想像成檔案系統導覽器顯示資料夾和檔案，或是一個導航列表。

請繼續關注我們的下一篇部落格，以了解 Tree View 遷移的資訊。

我們決定將這個組件遷移到 MUI X，因為還有許多很棒的功能可以建置（例如核取方塊、拖放、虛擬化），而且它通常不是設計系統的重要組件。如果您想了解更多關於此決策的資訊，請前往 MUI Core 與 MUI X。

意見回饋

我們一直很高興收到意見回饋，所以如果您想分享您的痛點和使用案例，請透過此 Google 表單留下您的聯絡資訊。與往常一樣，歡迎您在 MUI X GitHub 儲存庫中請求新功能、回報錯誤並加入討論。如果您還沒有加入，請加入我們最近推出的 MUI Discord 伺服器中不斷成長的社群。

感謝！