# mdui v2 Documentation

mdui is an front-end component library based on Material Design 3, using Web Components, supporting dynamic colors, dark mode, and lightweight efficiency.

## 開發指南

- [概述](https://www.mdui.org/zh-tw/docs/2/index.md): mdui 是基於 Web Components 的高品質元件庫，包含 50+ 種 Material Design 元件。支援深色模式、在地化與 TypeScript 型別宣告。透過 CDN 或 npm 快速上手，提供完整文件與互動範例，助您輕鬆打造現代化 Web 應用程式。
- [安裝](https://www.mdui.org/zh-tw/docs/2/getting-started/installation.md): mdui 支援使用 npm/pnpm 套件管理器或 CDN 方式安裝。提供全量匯入與按需匯入選項，按需匯入能顯著減少專案體積。詳細說明全域建置與 ES 模組版本使用方法，協助您輕鬆將元件庫整合到現代化網頁專案。
- [快速入門](https://www.mdui.org/zh-tw/docs/2/getting-started/usage.md): mdui 基於 Web Components 標準開發。詳細解說 HTML 屬性、JavaScript 屬性、方法、事件、插槽、CSS Part 及 CSS 自訂屬性的運用。介紹元件更新機制與 Shadow DOM 樣式自訂方法，協助您快速掌握 Web Components 開發精髓。
- [TypeScript 支援](https://www.mdui.org/zh-tw/docs/2/getting-started/typescript-support.md): mdui 完全使用 TypeScript 編寫並提供完善的型別宣告。所有元件與函式皆具備完整型別定義，讓您在編輯器中獲得優異的自動完成與型別檢查體驗。支援從元件檔案或主套件匯入型別，能顯著提升開發效率與程式碼維護品質。
- [IDE 支援](https://www.mdui.org/zh-tw/docs/2/getting-started/ide-support.md): mdui 為 VS Code 和 WebStorm 提供深度最佳化支援。透過 npm 設定或外掛程式擴充獲得程式碼補全、懸停說明、屬性列舉值等智能提示。提供完整的 HTML 資料與 CSS 資料支援，協助開發者在開發過程中顯著提升工作效率。
- [在地化](https://www.mdui.org/zh-tw/docs/2/getting-started/localization.md): mdui 內建多國語言支援。支援延遲載入、預先載入及靜態匯入語言套件。目前包含 50+ 官方語言套件並支援從 CDN 載入。提供完善的在地化狀態事件，協助開發者打造高品質的全球化網頁應用程式。
- [常見問題](https://www.mdui.org/zh-tw/docs/2/getting-started/faq.md): 彙整 mdui 社群高頻常見問題及官方專家解答。涵蓋自閉合標籤用法、元件載入前隱藏策略等開發關鍵問題。提供完整解決方案與優質程式碼範例，協助您快速排查並解決開發過程中的各種常見困境，優雅地優化您的開發工作流。

## AI 輔助開發

- [LLMs.txt](https://www.mdui.org/zh-tw/docs/2/ai/llms.md): mdui 提供 llms.txt 和 llms-full.txt，為大語言模型提供準確的上下文資訊。每個文件頁面皆提供 Markdown 版本，支援直接貼上、檔案上傳及線上讀取等多種靈活使用方式。顯著提升 AI 回答準確度，優化 AI 輔助開發流程。
- [MCP 伺服器](https://www.mdui.org/zh-tw/docs/2/ai/mcp.md): @mdui/mcp 為 Cursor 等 AI 智慧體提供 MCP 伺服器整合。支援查詢元件屬性、Material Icons 圖示庫、CSS 自訂屬性與文件內容。實現 AI 輔助開發的深度整合，顯著提升自動化程式碼編寫體驗，讓 AI 更懂開發者需求。

## 樣式

- [深色模式](https://www.mdui.org/zh-tw/docs/2/styles/dark-mode.md): mdui 全部元件均內建深色模式支援，支援自動跟隨系統主題或手動設定主題。透過新增 CSS 類別或使用 setTheme/getTheme 函式精確控制主題切換。支援局部與全域主題覆蓋，靈活適配各種網頁應用程式的視覺體驗需求。
- [動態配色](https://www.mdui.org/zh-tw/docs/2/styles/dynamic-color.md): mdui 支援基於基礎顏色自動生成完整的淺色與深色調色盤。提供 setColorScheme 與 getColorFromImage 專業函式。支援從圖片提取核心主色，自動生成和諧配色方案，協助您打造極具個人特色的網頁應用程式主題。
- [文章排版](https://www.mdui.org/zh-tw/docs/2/styles/prose.md): mdui 提供 mdui-prose 與 mdui-table CSS 工具類別，用於最佳化文章與表格排版效果。快速獲得優雅的字型、行高、間距及邊框樣式，無需額外撰寫 CSS。顯著提升 Markdown 內容與動態生成內容的整體閱讀舒適度。
- [設計令牌](https://www.mdui.org/zh-tw/docs/2/styles/design-tokens.md): mdui 透過全域 CSS 自訂屬性實現完善的設計令牌系統。包含顏色、圓角、排版、動畫、陰影等 100+ 種令牌。支援自定義修改以打造統一的設計語言，元件樣式會隨令牌變更而自動更新，實現設計與開發的高度同步。

## 與框架整合

- [搭配 React 使用](https://www.mdui.org/zh-tw/docs/2/frameworks/react.md): mdui 基於 Web Components 技術，在 React 專案中可直接作為 HTML 標籤使用。提供完整的 TypeScript 型別支援，讓事件處理與屬性繫結能無縫運作。詳細解說在 React 中進行自定義事件監聽與屬性同步的最佳實踐指南。
- [搭配 Vue 使用](https://www.mdui.org/zh-tw/docs/2/frameworks/vue.md): mdui 在 Vue 框架中設定十分簡單，僅需設定範本編譯器識別元件標籤。提供 Vue 3 整合範例，詳細解說 v-model 雙向繫結與自定義事件監聽的實作方式。支援完整的 TypeScript 型別檢查與支援 IDE 的智能補全提示效能。
- [搭配 Angular 使用](https://www.mdui.org/zh-tw/docs/2/frameworks/angular.md): mdui 在 Angular 框架中需配置 CUSTOM_ELEMENTS_SCHEMA 以支援 Web Components。提供詳細的整合指南與環境配置範例。支援相依注入、雙向繫結等 Angular 特性，並具備完整的 TypeScript 型別支援與開發提示。
- [搭配其他框架使用](https://www.mdui.org/zh-tw/docs/2/frameworks/others.md): mdui 基於 Web Components 標準，可整合到任何現代網頁框架中。支援 Svelte、Preact、Next.js、Nuxt 等主流框架。提供通用整合方法以及針對常見框架所彙整的最佳實踐指南，助您快速完成專案環境搭建。

## 元件

- [頭像元件 Avatar](https://www.mdui.org/zh-tw/docs/2/components/avatar.md): 頭像元件用於展現使用者個人資料、品牌識別或特定對象。支援圖片資源、Material Icons 圖示及純文字三種表現形式。開發者可自由設定大小、形狀（圓形或正方形）及圖片填充比例。常用於使用者評論、個人清單及卡片等場景。
- [徽章元件 Badge](https://www.mdui.org/zh-tw/docs/2/components/badge.md): 徽章元件用於在其他元件角落展示計數、通知或狀態標記等資訊。支援 small 與 large 兩種尺寸，可靈活顯示數字、文字或小圓點。通常緊鄰導覽項或按鈕使用，協助使用者快速察覺未讀計數、新訊息提示等重要更新。
- [底部應用程式列元件 BottomAppBar](https://www.mdui.org/zh-tw/docs/2/components/bottom-app-bar.md): 底部應用程式列為行動端提供便捷的導覽與主要操作。可高度整合浮動動作按鈕、導覽項及操作選單。支援捲動自動隱藏、固定位置、自定義顏色與外觀。為使用者提供符合人體工學的行動端主要操作區域。
- [按鈕元件 Button](https://www.mdui.org/zh-tw/docs/2/components/button.md): 按鈕元件支援 elevated、filled、tonal、outlined 與 text 五種樣式，及完整的互動狀態（懸停、聚焦、停用、載入），並內建圖示支援與連結導向。符合 Material Design 3 規範，提供完善的無障礙存取與表單驗證。
- [圖示按鈕元件 ButtonIcon](https://www.mdui.org/zh-tw/docs/2/components/button-icon.md): 圖示按鈕專用於次要操作，支援標準、填滿、色調、外框四種樣式，並可設定為核取模式或外部連結。提供完整的互動狀態回饋、停用與載入動畫呈現。適用於工具列、卡片快速動作等場景，以輕量化設計保持使用者介面的潔淨感。
- [卡片元件 Card](https://www.mdui.org/zh-tw/docs/2/components/card.md): 卡片是強大的多功能容器，用於清晰展示與單一主題相關的資訊內容與互動操作。支援提升、填滿、外框三種外觀樣式，且可設定可點擊、連結引導或停用狀態。能靈活地組織各類媒體內容，是建構內容聚合介面的核心基礎單元。
- [核取方塊元件 Checkbox](https://www.mdui.org/zh-tw/docs/2/components/checkbox.md): 核取方塊允許使用者從多個選項中進行任意選擇，支援選中、未選中及不確定三種視覺狀態。支援自定義圖示、停用及完善的表單驗證功能。廣泛應用於各種問卷表單、系統權限設定及需要進行多項選擇的互動場景中。
- [標籤元件 Chip](https://www.mdui.org/zh-tw/docs/2/components/chip.md): 標籤元件用於表示輸入、選擇、篩選或觸發操作，支援輔助、篩選、輸入、建議四種主要變體。提供可刪除、可核取、可點擊及帶有圖示等豐富功能，廣泛應用於內容分類、關鍵字標籤輸入及篩選條件展示等各種互動場景。
- [環形進度條元件 CircularProgress](https://www.mdui.org/zh-tw/docs/2/components/circular-progress.md): 環形進度條以圓環旋轉方式直覺地展示任務完成進度。支援確定數值和不確定旋轉動畫（載入中）兩種狀態。開發者可依照介面需求自定義大小、顏色及寬度樣式。卓越地適用於按鈕載入狀態、頁面重新整理及局部資料載入提示等互動。
- [收合區塊元件 Collapse](https://www.mdui.org/zh-tw/docs/2/components/collapse.md): 收合區塊透過將分層內容進行分組展示，能有效節省頁面垂直空間。支援手風琴模式、自定義觸發元素及停用狀態。可單獨使用或組合形成複雜的收合系統，常用於 FAQ 常見問題、系統設定分組、內容管理及側邊工具欄等場景。
- [對話框元件 Dialog](https://www.mdui.org/zh-tw/docs/2/components/dialog.md): 對話框用於展示重要資訊、確認關鍵操作或獲取使用者輸入。支援圖示、標題、說明內容、模態及全螢幕模式。包含自定義頁首、操作按鈕及關閉策略設定。此外，我們還提供了極其便利的 alert、confirm 與 prompt 程式化呼叫函式。
- [分隔線元件 Divider](https://www.mdui.org/zh-tw/docs/2/components/divider.md): 分隔線元件用於視覺化地分隔內容區塊或清單項目。支援水平與垂直顯示模式，並提供多樣化的縮排選項。可根據設計風格自定義顏色與間距。是建構介面清晰層次感與邏輯群組不可或缺的基礎布局元素，讓介面結構一目了然。
- [下拉元件 Dropdown](https://www.mdui.org/zh-tw/docs/2/components/dropdown.md): 下拉元件能在游標位置或點擊處彈出選單或自定義內容。支援點擊、懸停、聚焦及右鍵選單等多門觸發方式，並具備智慧位置自適應功能。可設定開啟延遲、點擊保持及游標隨動開啟，為網頁應用程式實現豐富且流暢的互動體驗。
- [浮動動作按鈕元件 Fab](https://www.mdui.org/zh-tw/docs/2/components/fab.md): 浮動動作按鈕 (FAB) 用於突顯頁面核心操作，支援一般與擴充型態，及三種尺寸規格。可設定圖示、樣式與顏色，提供連結、停用及載入狀態。通常懸浮於內容上方，方便使用者在任何時候快速存取關鍵功能。
- [圖示元件 Icon](https://www.mdui.org/zh-tw/docs/2/components/icon.md): 圖示元件用於直覺地傳達操作意圖，完整支援 Material Icons 全系列及自定義的 SVG 圖示。透過 CSS 可輕鬆設定顏色、大小、旋轉及縮放等外觀樣式。配合按鈕、選單與導覽元件使用，能顯著增強介面的視覺符號識別度與易用性。
- [版面配置元件 Layout](https://www.mdui.org/zh-tw/docs/2/components/layout.md): 版面配置元件用於快速建構網頁整體的結構布局。支援組織頂部應用程式列、側邊導覽列、導覽抽屜及主要內容區塊。提供極其靈活的回應式網格系統，開發者可自定義斷點、欄位數及間距規格，協助您高效打造穩固的頁面框架體系。
- [線性進度條元件 LinearProgress](https://www.mdui.org/zh-tw/docs/2/components/linear-progress.md): 線性進度條以橫向條狀形式直覺地展示任務進度。支援確定數值和不確定（緩衝動畫）兩種主要模式。開發者可依需求自定義顏色、高度與外觀樣式。常用於檔案上傳、資料下載載入、表單提交及系統處理程序提示等應用場景。
- [清單元件 List](https://www.mdui.org/zh-tw/docs/2/components/list.md): 清單元件以垂直方式展示相關聯的項目集合，支援單行、雙行及三行等顯示模式。可彈性配置頭像、圖示、操作按鈕、超連結及停用狀態。支援圓角樣式、對齊方式及高度自定義的內容區域，卓越地適用於導覽選單、聯絡人清單等。
- [選單元件 Menu](https://www.mdui.org/zh-tw/docs/2/components/menu.md): 選單以垂直清單形式展示操作選項，通常由下拉元件觸發顯示。支援單選、多選、分組、圖示、快速鍵提示、停用項目及巢狀子選單。可靈活定製內容、超連結及緊湊版面配置，適用於右鍵上下文選單、導覽選單及動作選單等場景。
- [底部導覽列元件 NavigationBar](https://www.mdui.org/zh-tw/docs/2/components/navigation-bar.md): 底部導覽列專為行動裝置介面設計，提供在多個主要頁面間的快速切換能力，通常包含 3-5 個導覽項目。標籤名稱會根據項目數量自動調整顯示，支援圖示、啟用狀態色彩與徽章提示功能。支援捲動時自動隱藏以擴大檢視空間。
- [導覽抽屜元件 NavigationDrawer](https://www.mdui.org/zh-tw/docs/2/components/navigation-drawer.md): 導覽抽屜提供從螢幕側邊滑出的優雅導覽設計。支援模態與非模態兩種運作模式，且可靈活配置於畫面左側或右側。內容可包括使用者資訊、清單導覽項目及分隔線等元素。完美適配行動裝置的手勢操作與桌面端應用的固定導覽需求。
- [側邊導覽列元件 NavigationRail](https://www.mdui.org/zh-tw/docs/2/components/navigation-rail.md): 側邊導覽列為桌面及平板應用提供緊湊的垂直導覽。支援自定義元素排序、分隔線樣式與垂直對齊。顯示明確圖示與標籤，並內建啟用狀態指示器與徽章提示。可在容器內局部顯示或全域配置，優化大螢幕下的操作佈局。
- [單選按鈕元件 Radio](https://www.mdui.org/zh-tw/docs/2/components/radio.md): 單選按鈕用於在多個互斥選項中選擇其中一項，確保使用者每次僅能提交一個確定結果。支援自定義圖示、停用狀態與表單驗證。常與標籤組合使用，廣泛適用於性別選擇、問卷調查、單一方案選取等需要唯一選擇的互動場景。
- [範圍滑桿元件 RangeSlider](https://www.mdui.org/zh-tw/docs/2/components/range-slider.md): 範圍滑桿讓使用者能直覺地選擇具體的數值區間，支援雙滑桿獨立拖移、精確步進控制、刻度顯示及即時數值提示。可依照設計需求隱藏提示或自定義數值顯示格式。廣泛應用於電子商務價格範圍、時間區間選取及系統參數調節等場景。
- [選擇框元件 Select](https://www.mdui.org/zh-tw/docs/2/components/select.md): 選擇框讓使用者能從下拉選單中進行單選或多選操作。支援標籤、佔位符、說明文字、一鍵清空及欄位驗證功能。可配置前綴/後綴、自定義圖示及選單彈出位置。廣泛用於各類複雜表單、條件篩選及數據輸入場景，提升輸入效率。
- [分段按鈕元件 SegmentedButton](https://www.mdui.org/zh-tw/docs/2/components/segmented-button.md): 分段按鈕支援單選與多選兩種模式，用於提供選項切換、檢視切換或資料排序。支援圖示、連結、停用及載入狀態回饋，並可配置全寬顯示與自訂樣式。是建構選項控制與檢視導覽介面中不可或缺的基礎元件，提升互動體驗。
- [滑桿元件 Slider](https://www.mdui.org/zh-tw/docs/2/components/slider.md): 滑桿是互動性極佳的數值選擇元件，支援單一數值、離散值、精確步進控制及數值刻度顯示。內建表單驗證、停用、自動聚焦等豐富的互動特性。可自定義數值展示格式，完美適用於音量調節、螢幕亮度控制及價格範圍篩選等動態場景。
- [消息條元件 Snackbar](https://www.mdui.org/zh-tw/docs/2/components/snackbar.md): 消息條元件提供簡短的操作回饋或訊息提示，可包含動作按鈕並在設定時間後自動消失。支援多行文字內容、自定義背景顏色及靈活的顯示位置。mdui 還提供便捷的 snackbar 程式化呼叫函式，助開發者快速顯示即時通知。
- [切換開關元件 Switch](https://www.mdui.org/zh-tw/docs/2/components/switch.md): 切換開關用於快速切換單一設定的開啟或關閉狀態，並提供即時且直覺的視覺回饋。支援停用、表單驗證及自定義圖示等功能。開發者可依需求定製顏色、大小與外觀形狀。常用於系統設置頁面、功能權限控制等各種功能開關場景。
- [分頁元件 Tabs](https://www.mdui.org/zh-tw/docs/2/components/tabs.md): 分頁元件允許使用者在單一區域內切換多個不同的內容檢視。支援 primary 與 secondary 兩種外觀樣式及多種對齊位置配置。可自由新增圖示、徽章、自定義內容資訊，並提供清晰的啟用標記，適合用於分類導覽與內容分段展示。
- [文字欄位元件 TextField](https://www.mdui.org/zh-tw/docs/2/components/text-field.md): 文字欄位支援單行與多行輸入需求，類型涵蓋文字、密碼、電子郵件、數字及網址等。支援標籤、佔位符、說明文字、錯誤提示、圖示、清除按鈕及自動調整高度功能。提供完善的輸入驗證與無障礙功能支援，確保卓越的使用者體驗。
- [工具提示元件 Tooltip](https://www.mdui.org/zh-tw/docs/2/components/tooltip.md): 工具提示元件會在目標元素懸停、聚焦或點擊時顯示補充性質的文字資訊。支援純文字與富文本內容，並提供多樣化的觸發方式與顯示位置配置。可彈性設定開啟與關閉延遲、箭頭樣式與主題色調，有效協助使用者理解介面功能。
- [頂部應用程式列元件 TopAppBar](https://www.mdui.org/zh-tw/docs/2/components/top-app-bar.md): 頂部應用程式列為網頁提供標題顯示、功能導覽、搜尋及操作入口。支援多種視覺樣式、摺疊動畫效果、固定位置及隨捲動而變化的漸變效果。可定製圖示與操作按鈕，統一應用程式的頭部外觀，提供核心的功能控制與導覽中心。

## 函式

- [jq 工具庫](https://www.mdui.org/zh-tw/docs/2/functions/jq.md): mdui 內建極輕量級 JavaScript 工具庫，提供與 jQuery 類似的開發 API，體積卻僅其六分之一。支援強大的鏈式呼叫、DOM 遍歷、事件處理及動畫功能。無需額外引入 jQuery 即可大幅簡化並最佳化原生 JavaScript 操作流程。
- [dialog 函式](https://www.mdui.org/zh-tw/docs/2/functions/dialog.md): dialog 函式提供 mdui-dialog 元件的程式化封裝。開發者無需手動編寫 HTML 結構，直接呼叫函式即可開啟高品質對話框。支援自定義標題、說明內容及多樣化操作按鈕。回傳 Promise 物件，讓您能以非同步方式輕鬆處理使用者的互動結果。
- [alert 函式](https://www.mdui.org/zh-tw/docs/2/functions/alert.md): alert 函式是原生 window.alert 的現代化替代方案，基於 mdui-dialog 實現，視覺美觀。無需編寫 HTML，直接呼叫即可顯示系統警告框。支援自定義標題、說明及確認按鈕文字。樣式與專案內容統一，且完全不阻塞網頁頁面的渲染程序。
- [confirm 函式](https://www.mdui.org/zh-tw/docs/2/functions/confirm.md): confirm 函式基於 mdui-dialog，是用於替代 window.confirm 的優質方案。無需編寫 HTML 即可開啟確認框。支援自定義標題、說明與按鈕文字。透過 Promise 異步回傳使用者選擇結果，大幅簡化異步流程開發。助您輕鬆實現專業的互動機制。
- [prompt 函式](https://www.mdui.org/zh-tw/docs/2/functions/prompt.md): prompt 函式基於 mdui-dialog 實現，是原生 window.prompt 的高品質替代方案。提供內置文字輸入欄位的對話框，支援設定預設值、輸入類型及自定義驗證規則。開發者無需編寫 HTML，即可透過 Promise 輕鬆獲取使用者提交的輸入內容。
- [snackbar 函式](https://www.mdui.org/zh-tw/docs/2/functions/snackbar.md): snackbar 函式提供 mdui-snackbar 元件的程式化呼叫介面。無需手動編寫任何 HTML 結構，即可快速顯示各類提示訊息。支援自定義訊息內容、操作按鈕樣式、顯示位置及自動關閉延遲等。廣泛用於執行操作回饋與即時系統狀態提示場景。
- [getTheme 函式](https://www.mdui.org/zh-tw/docs/2/functions/getTheme.md): getTheme 函式用於獲取目前頁面或特定 DOM 元素的主题設定。主題類型包含 light、dark 與 auto 三種模式。支援接收選擇性的 CSS 選擇器、原生元素或 JQ 物件。方便開發者根據環境主題動態調整應用程式的邏輯處理與樣式表現。
- [setTheme 函式](https://www.mdui.org/zh-tw/docs/2/functions/setTheme.md): setTheme 函式用於動態設定網頁頁面或指定特定元素的主題風格。支援 light、dark 與 auto 三種模式。可為整份文件或是局部區塊設定主題，並完美支援局部主題覆蓋功能。協助開發者實現極其靈活且具一致性的現代主題切換體驗。
- [getColorFromImage 函式](https://www.mdui.org/zh-tw/docs/2/functions/getColorFromImage.md): getColorFromImage 函式能從影像中提取核心主色調，並以十六進位元值回傳。配合 setColorScheme 實現高品質動態配色。根據內容自動生成和諧配色方案，讓主題與視覺內容完美協調，打造更具沉浸感的應用體驗。
- [setColorScheme 函式](https://www.mdui.org/zh-tw/docs/2/functions/setColorScheme.md): setColorScheme 函式根據輸入的顏色值自動設定配色方案。生成主色、次色、錯誤色等完整調色盤。支援全域與局部設定，並允許使用自定義顏色陣列。協助開發者快速實現品牌色彩高度客製化，確保應用程式視覺風格的一致性。
- [removeColorScheme 函式](https://www.mdui.org/zh-tw/docs/2/functions/removeColorScheme.md): removeColorScheme 函式用於移除配色方案。呼叫後頁面將恢復使用預設配色。可為指定元素或整個頁面移除。方便動態切換主題或重置樣式配置，確保介面外觀能回歸初始狀態。當您需要退出特定配色或一鍵還原樣式時，是極佳的開發工具。
- [loadLocale 函式](https://www.mdui.org/zh-tw/docs/2/functions/loadLocale.md): loadLocale 函式用於載入語言套件。支援延遲載入、預先載入及靜態匯入。配合 setLocale 實現應用在地化切換。內容 en-us 語系無需額外載入，並支援按需載入模式以顯著優化應用加載效能與使用者體驗。
- [setLocale 函式](https://www.mdui.org/zh-tw/docs/2/functions/setLocale.md): 動態設定應用程式的語言代碼，支援非同步載入機制。呼叫 setLocale 後會自動觸發所有元件的文本內容更新，無需手動重新整理網頁即可實現無縫的在地化切換。完整支援多國語言代碼，詳細資訊請參閱官方在地化文件說明。
- [getLocale 函式](https://www.mdui.org/zh-tw/docs/2/functions/getLocale.md): 獲取目前應用程式所設定的語言代碼。用於偵測目前的語系環境、動態載入語言資源或調整條件式版面配置等開發操作。回傳值為標準語言代碼字串（如 zh-tw、en、ja 等），協助開發者實現靈活且精確的在地化邏輯處理。
- [throttle 函式](https://www.mdui.org/zh-tw/docs/2/functions/throttle.md): 建立節流化函式，確保在指定的時間間隔內最多僅執行一次回呼。極其適用於最佳化頁面捲動、視窗尺寸變化等高頻率事件處理，能顯著提升應用效能。透過有效控制函式執行頻率，避免事件處理函式被過度頻繁地調用。
- [observeResize 函式](https://www.mdui.org/zh-tw/docs/2/functions/observeResize.md): 高效監聽 DOM 元素的尺寸變化，基於現代化 ResizeObserver API 實現。當目標元素尺寸改變時觸發回呼函式，完美適配於回應式佈局、自適應容器及動態圖表等場景。支援回傳取消觀察方法，便於進行資源清理與效能最佳化。
- [breakpoint 函式](https://www.mdui.org/zh-tw/docs/2/functions/breakpoint.md): 快速判斷目前視窗尺寸所對應的斷點值。mdui 提供 xs、sm、md、lg、xl 與 xxl 六個標準斷點。支援判斷寬度是否大於、小於、等於或處於特定斷點範圍。協助開發者在 JavaScript 層面輕鬆實作複雜的回應式佈局邏輯。

## 獨立程式庫

- [圖示元件庫 @mdui/icons](https://www.mdui.org/zh-tw/docs/2/libraries/icons.md): 這是 mdui 提供的獨立 Material Icons 圖示元件庫。完美收錄 Google 官方所有圖示，支援按需匯入使用，相比 mdui-icon 元件能極大減少專案打包體積，並提供高度靈活的圖示樣式客製化支援，助您打造高品質視覺體驗。