手風琴是一種垂直堆疊的互動式項目列表。每個項目可以「摺疊」,僅顯示摘要,或「展開」以顯示該項目的完整內容。
警示訊息是一種簡短的訊息,以顯著的方式提供上下文回饋。
自動完成是一種文字輸入,會根據使用者最初的輸入主動建議選項。建議的選項會與輸入欄位一起顯示在面板中。
頭像是使用者或實體的圖形化表示。它通常是照片、插圖或文字首字母。
徽章是一個緊湊的標籤,出現在主要介面區域旁邊,用於表示該區域的狀態或元數據。
橫幅是一個醒目的訊息,用於通知使用者有關變更或為頁面內容提供上下文。它通常顯示為頁面或區段中的第一個項目之一。
麵包屑是一個連結列表,顯示目前頁面在應用程式階層結構中的位置。它可以幫助使用者了解他們相對於其他頁面的位置,並提供方便的連結以導航到其他頁面。
按鈕是一個可點擊的互動式元素,可觸發回應。您可以在按鈕內放置文字和圖示。按鈕通常用於表單提交和切換元素的顯示。
日曆是一個日期選擇介面,可讓您使用日曆視圖選擇日期或日期範圍。它通常用於按日期篩選資訊。
卡片是一個內容容器,表示單一物件和相關操作。例如,文章或任務。
輪播是一個幻燈片,可在內容(如圖像或文字)之間循環顯示。輪播可能包含對上一個和下一個控制項的支援。
圖表是資料的圖形化表示。圖表可視覺化大量資訊,以幫助使用者了解資料點之間的趨勢和關係。
聊天是系統使用者之間聊天記錄的顯示。它包括許多子組件,用於組成不同類型的聊天項目。
核取方塊是一個正方形方塊,可以在勾選時啟用或停用。使用核取方塊從選項列表中選擇一個或多個選項。
晶片是一個緊湊的標籤,出現在主要介面區域旁邊,用於表示該區域的狀態或元數據。
程式碼用於顯示字串或小程式碼區塊。程式碼可以複製並插入程式碼編輯器中。
摺疊是一種垂直堆疊的互動式項目列表。每個項目可以「摺疊」,僅顯示摘要,或「展開」以顯示該項目的完整內容。
色彩選擇器是一種輸入,可讓使用者從預定義的顏色(色票)或顏色欄位中選擇。選取後,它將傳回 RGB、HEX 或 HSL 格式的顏色值。
組合方塊是一種自動完成輸入,會根據使用者最初的輸入主動建議選項。它可讓您篩選選項列表並從預定義的選項中進行選擇。這些選項會與輸入欄位一起顯示在面板中。
上下文選單是一個選單,提供一組與使用者點擊內容的目前狀態相關的操作。上下文選單通常在滑鼠右鍵(預設)或左鍵點擊時出現。
資料網格是一個表格,可視覺化資料集,並包含用於篩選、排序、範本、列選擇、列分組、列釘選和可移動列的選項。資料網格通常與動態或大型資料集一起使用。
日期選擇器是一個日期選擇介面,可讓您使用日曆視圖選擇日期或日期範圍。它通常用於按日期篩選資訊。
詳細資訊是一個可展開的面板,顯示內容摘要,並在點擊時展開以顯示更多說明文字。它通常用於使密集內容更容易瀏覽。
對話框是一個提示,出現在其他內容之上,其中包含緊急資訊或決策。對話框會有意中斷使用者流程,並需要使用者輸入才能關閉。
揭露是一個可展開的面板,顯示內容摘要,並在點擊時展開以顯示更多說明文字。它通常用於使密集內容更容易瀏覽。
分隔線是內容區段或項目組之間的分隔符號。它通常包含一條水平線。
抽屜是從螢幕邊緣滑出的面板。它通常用於導覽、選單,或顯示使用者目前所在頁面的詳細資訊。
可展開是一個垂直堆疊的互動式項目列表。每個項目可以「摺疊」,僅顯示摘要,或「展開」以顯示該項目的完整內容。
彈性是一個版面配置容器,使用彈性盒模型 (flexbox) 來定位其子元素。
頁尾是頁面底部的區塊,顯示相關內容的連結、版權或法律資訊。
表單用於收集使用者輸入,以便提交到應用程式。它通常由表單元素組成,包括輸入框、按鈕、核取方塊和單選按鈕。
格線是一個容器,用於建構版面配置,使其與使用者定義的欄和列系統對齊。
標題是在 Web 應用程式或網站中顯示的標題或副標題。標題的大小通常會根據其代表內容的重要性而有所不同。
主視覺是大型橫幅或圖片,作為頁面上的第一個項目之一出現。它是一個主要視覺元素,用於將使用者注意力集中在關鍵內容或促銷活動上。
圖示是一種視覺符號,指示介面元素的用途。它用於表示想法、內容類型和動作。
圖片是用於嵌入圖片的元素。它通常用於根據裝置功能和視窗大小,以不同大小和格式顯示圖片。
標籤是一個文字標題或描述,用於說明表單欄位所需的輸入類型。標籤通常位於表單欄位旁邊。
版面配置是一個版面配置容器,用於將子元素定位在預定區域中。它通常用於在應用程式中的各個頁面之間應用一致的內容定位。
連結是指向網路位置的參照。點擊連結將引導您前往目的地,例如文件、資產或電子郵件地址。
列表是相關項目的群組。列表可以是有序列表 (使用數字) 或無序列表 (使用項目符號)。
列表框是一個垂直的互動式元素列表,使用者可以從中選擇。
載入中是一種視覺指示器,顯示背景中正在進行的程序的狀態。它通常用於告知使用者必須等待,介面才能準備好進行互動。
選單是使用者可以選擇的互動式選項列表。選項預設為隱藏,並在使用者與元素互動時顯示。選單通常用於顯示動作或導覽。它與「選擇」 (Select) 不同,因為它不是表單輸入。
強制回應視窗是一個全螢幕覆蓋層,位於頁面內容之上。它用於將注意力集中在重要的任務或訊息上,並需要使用者輸入才能關閉。
導覽是一個容器,用於列出導覽連結。它通常用於將使用者引導至應用程式中的其他頁面,或作為目前頁面的目錄。
通知是告知使用者系統狀態更新或變更的訊息。它可以顯示在內容上方或內嵌於內容中。
頁面是一個版面配置容器,用於將子元素定位在預定區域中。它通常用於在應用程式中的各個頁面之間應用一致的內容定位。
分頁是終端使用者在已分成多個頁面的資料之間導覽的控制項,例如列表或文件。
Pill 是一種精巧的標籤,會出現在主要介面區域旁邊,用於表示該區域的狀態或metadata。
Popover 是一種訊息框,會顯示關於元素的額外資訊。它可以透過滑鼠懸停、點擊或輕觸出現。
Progress 是一種視覺指示器,可顯示使用者在完成一系列步驟的進度。它通常用於讓使用者專注於完成任務。
Radio 是一種圓形元素,可在勾選時啟用或停用。它用於從選項列表中選擇單個選項。
Rating 是一種小工具,可讓使用者提交和查看意見回饋。這是視覺化產品或項目周圍情感的直接方式。
Search 是一種輸入框,可讓使用者透過輸入單字或詞組來尋找內容。
Select 是一種輸入類型,可讓使用者從選項列表中選擇一個或多個選項。選項預設為隱藏,並在使用者與元素互動時顯示。它會在預設摺疊狀態中顯示目前選取的選項。
Separator 是內容區段或項目群組之間的分隔線。它通常包含一條水平線。
Slider 是一種表單元素,用於從某個值範圍內選擇一個值。它通常用於透過沿著水平軌道移動滑桿手柄來調整設定。
Spinner 是一種視覺指示器,可顯示背景中正在進行的程序的狀態。它通常用於告知使用者必須等待介面準備好進行互動。
Stack 是一種版面配置容器,用於在其子元素之間應用一致的間距。
Table 是一種元素,可將資料集視覺化為行和列。它通常用於以易於掃描的方式嵌入結構化資料。
Tabs 是一種在多個資訊視圖之間導航的方式。它用於在較小的區域中放入更多資訊。
Tag 是一種精巧的標籤,會出現在主要介面區域旁邊,用於表示該區域的狀態或metadata。
Text 是一種樣式組件,可以一致的字型大小和粗細呈現字元、單字或段落字串。
Textarea 是一種表單元素,可接受多行文字。
Text field 是一種表單元素,可接受單行文字或多行文字。
Title 是描述頁面或區段內容的文字。它的大小通常會根據它所代表的內容的重要性而有所不同。
Toast 是一種簡短訊息,用於通知使用者系統狀態的更新或變更。它會出現在內容上方。
Tooltip 是一種訊息框,會顯示關於元素的額外資訊。它可以透過滑鼠懸停、點擊或輕觸出現。
Typography 是一種字型大小和粗細的系統,用於組織內容。