新增你的專案

組件詞彙表

網路上最常見的 UI 組件

手風琴

查看全部

手風琴是一種垂直堆疊的互動式項目列表。每個項目可以「摺疊」,僅顯示摘要,或「展開」以顯示該項目的完整內容。

117組件214故事

警示訊息

查看全部

警示訊息是一種簡短的訊息,以顯著的方式提供上下文回饋。

56組件246故事

自動完成

查看全部

自動完成是一種文字輸入,會根據使用者最初的輸入主動建議選項。建議的選項會與輸入欄位一起顯示在面板中。

31組件106故事

頭像

查看全部

頭像是使用者或實體的圖形化表示。它通常是照片、插圖或文字首字母。

79組件327故事

徽章

查看全部

徽章是一個緊湊的標籤,出現在主要介面區域旁邊,用於表示該區域的狀態或元數據。

62組件279故事

橫幅

查看全部

橫幅是一個醒目的訊息,用於通知使用者有關變更或為頁面內容提供上下文。它通常顯示為頁面或區段中的第一個項目之一。

37組件136故事

麵包屑

查看全部

麵包屑是一個連結列表,顯示目前頁面在應用程式階層結構中的位置。它可以幫助使用者了解他們相對於其他頁面的位置,並提供方便的連結以導航到其他頁面。

42組件99故事

按鈕

查看全部

按鈕是一個可點擊的互動式元素,可觸發回應。您可以在按鈕內放置文字和圖示。按鈕通常用於表單提交和切換元素的顯示。

295組件1381故事

日曆

查看全部

日曆是一個日期選擇介面,可讓您使用日曆視圖選擇日期或日期範圍。它通常用於按日期篩選資訊。

21組件156故事

卡片

查看全部

卡片是一個內容容器,表示單一物件和相關操作。例如,文章或任務。

140組件618故事

輪播

查看全部

輪播是一個幻燈片,可在內容(如圖像或文字)之間循環顯示。輪播可能包含對上一個和下一個控制項的支援。

25組件51故事

圖表

查看全部

圖表是資料的圖形化表示。圖表可視覺化大量資訊,以幫助使用者了解資料點之間的趨勢和關係。

24組件122故事

聊天

查看全部

聊天是系統使用者之間聊天記錄的顯示。它包括許多子組件,用於組成不同類型的聊天項目。

10組件11故事

核取方塊

查看全部

核取方塊是一個正方形方塊,可以在勾選時啟用或停用。使用核取方塊從選項列表中選擇一個或多個選項。

98組件457故事

晶片

查看全部

晶片是一個緊湊的標籤,出現在主要介面區域旁邊,用於表示該區域的狀態或元數據。

22組件106故事

程式碼

查看全部

程式碼用於顯示字串或小程式碼區塊。程式碼可以複製並插入程式碼編輯器中。

70組件238故事

摺疊

查看全部

摺疊是一種垂直堆疊的互動式項目列表。每個項目可以「摺疊」,僅顯示摘要,或「展開」以顯示該項目的完整內容。

22組件74故事

色彩選擇器

查看全部

色彩選擇器是一種輸入,可讓使用者從預定義的顏色(色票)或顏色欄位中選擇。選取後,它將傳回 RGB、HEX 或 HSL 格式的顏色值。

13組件44故事

組合方塊

查看全部

組合方塊是一種自動完成輸入,會根據使用者最初的輸入主動建議選項。它可讓您篩選選項列表並從預定義的選項中進行選擇。這些選項會與輸入欄位一起顯示在面板中。

18組件118故事

上下文選單

查看全部

上下文選單是一個選單,提供一組與使用者點擊內容的目前狀態相關的操作。上下文選單通常在滑鼠右鍵(預設)或左鍵點擊時出現。

10組件58故事

資料網格

查看全部

資料網格是一個表格,可視覺化資料集,並包含用於篩選、排序、範本、列選擇、列分組、列釘選和可移動列的選項。資料網格通常與動態或大型資料集一起使用。

2組件5故事

日期選擇器

查看全部

日期選擇器是一個日期選擇介面,可讓您使用日曆視圖選擇日期或日期範圍。它通常用於按日期篩選資訊。

21組件87故事

詳細資訊

查看全部

詳細資訊是一個可展開的面板,顯示內容摘要,並在點擊時展開以顯示更多說明文字。它通常用於使密集內容更容易瀏覽。

10組件25故事

對話框

查看全部

對話框是一個提示,出現在其他內容之上,其中包含緊急資訊或決策。對話框會有意中斷使用者流程,並需要使用者輸入才能關閉。

65組件283故事

揭露

查看全部

揭露是一個可展開的面板,顯示內容摘要,並在點擊時展開以顯示更多說明文字。它通常用於使密集內容更容易瀏覽。

4組件12故事

分隔線

查看全部

分隔線是內容區段或項目組之間的分隔符號。它通常包含一條水平線。

37組件116範例

抽屜

查看全部

抽屜是從螢幕邊緣滑出的面板。它通常用於導覽、選單,或顯示使用者目前所在頁面的詳細資訊。

26組件83範例

可展開

查看全部

可展開是一個垂直堆疊的互動式項目列表。每個項目可以「摺疊」,僅顯示摘要,或「展開」以顯示該項目的完整內容。

15組件53範例

彈性

查看全部

彈性是一個版面配置容器,使用彈性盒模型 (flexbox) 來定位其子元素。

17組件46範例

頁尾

查看全部

頁尾是頁面底部的區塊,顯示相關內容的連結、版權或法律資訊。

48組件139範例

表單

查看全部

表單用於收集使用者輸入,以便提交到應用程式。它通常由表單元素組成,包括輸入框、按鈕、核取方塊和單選按鈕。

55組件127範例

格線

查看全部

格線是一個容器,用於建構版面配置,使其與使用者定義的欄和列系統對齊。

37組件163範例

頁首

查看全部

頁首是頁面頂部的區塊,顯示網站名稱和導覽。

75組件209範例

標題

查看全部

標題是在 Web 應用程式或網站中顯示的標題或副標題。標題的大小通常會根據其代表內容的重要性而有所不同。

41組件108範例

主視覺

查看全部

主視覺是大型橫幅或圖片,作為頁面上的第一個項目之一出現。它是一個主要視覺元素,用於將使用者注意力集中在關鍵內容或促銷活動上。

46組件136範例

圖示

查看全部

圖示是一種視覺符號,指示介面元素的用途。它用於表示想法、內容類型和動作。

301組件1091範例

圖片

查看全部

圖片是用於嵌入圖片的元素。它通常用於根據裝置功能和視窗大小,以不同大小和格式顯示圖片。

65組件183範例

輸入框

查看全部

輸入框是一種表單元素,接受單行文字。

178組件872範例

標籤

查看全部

標籤是一個文字標題或描述,用於說明表單欄位所需的輸入類型。標籤通常位於表單欄位旁邊。

56組件178範例

版面配置

查看全部

版面配置是一個版面配置容器,用於將子元素定位在預定區域中。它通常用於在應用程式中的各個頁面之間應用一致的內容定位。

50組件175範例

連結

查看全部

連結是指向網路位置的參照。點擊連結將引導您前往目的地,例如文件、資產或電子郵件地址。

110組件373範例

列表

查看全部

列表是相關項目的群組。列表可以是有序列表 (使用數字) 或無序列表 (使用項目符號)。

184組件705範例

列表框

查看全部

列表框是一個垂直的互動式元素列表,使用者可以從中選擇。

19組件78範例

載入中

查看全部

載入中是一種視覺指示器,顯示背景中正在進行的程序的狀態。它通常用於告知使用者必須等待,介面才能準備好進行互動。

39組件91範例

選單

查看全部

選單是使用者可以選擇的互動式選項列表。選項預設為隱藏,並在使用者與元素互動時顯示。選單通常用於顯示動作或導覽。它與「選擇」 (Select) 不同,因為它不是表單輸入。

64組件281範例

強制回應視窗

查看全部

強制回應視窗是一個全螢幕覆蓋層,位於頁面內容之上。它用於將注意力集中在重要的任務或訊息上,並需要使用者輸入才能關閉。

83組件344範例

導覽

查看全部

導覽是一個容器,用於列出導覽連結。它通常用於將使用者引導至應用程式中的其他頁面,或作為目前頁面的目錄。

62組件196範例

通知

查看全部

通知是告知使用者系統狀態更新或變更的訊息。它可以顯示在內容上方或內嵌於內容中。

30組件98範例

頁面

查看全部

頁面是一個版面配置容器,用於將子元素定位在預定區域中。它通常用於在應用程式中的各個頁面之間應用一致的內容定位。

134組件439範例

分頁

查看全部

分頁是終端使用者在已分成多個頁面的資料之間導覽的控制項,例如列表或文件。

49組件152範例

Pill

查看全部

Pill 是一種精巧的標籤,會出現在主要介面區域旁邊,用於表示該區域的狀態或metadata。

28組件172範例

Popover

查看全部

Popover 是一種訊息框,會顯示關於元素的額外資訊。它可以透過滑鼠懸停、點擊或輕觸出現。

49組件257範例

Progress

查看全部

Progress 是一種視覺指示器,可顯示使用者在完成一系列步驟的進度。它通常用於讓使用者專注於完成任務。

84組件324範例

Radio

查看全部

Radio 是一種圓形元素,可在勾選時啟用或停用。它用於從選項列表中選擇單個選項。

107組件379範例

Rating

查看全部

Rating 是一種小工具,可讓使用者提交和查看意見回饋。這是視覺化產品或項目周圍情感的直接方式。

13組件55範例

Search

查看全部

Search 是一種輸入框,可讓使用者透過輸入單字或詞組來尋找內容。

70組件205範例

Select

查看全部

Select 是一種輸入類型,可讓使用者從選項列表中選擇一個或多個選項。選項預設為隱藏,並在使用者與元素互動時顯示。它會在預設摺疊狀態中顯示目前選取的選項。

113組件585範例

Separator

查看全部

Separator 是內容區段或項目群組之間的分隔線。它通常包含一條水平線。

27組件89範例

Slider

查看全部

Slider 是一種表單元素,用於從某個值範圍內選擇一個值。它通常用於透過沿著水平軌道移動滑桿手柄來調整設定。

37組件162範例

Spinner

查看全部

Spinner 是一種視覺指示器,可顯示背景中正在進行的程序的狀態。它通常用於告知使用者必須等待介面準備好進行互動。

38組件110範例

Stack

查看全部

Stack 是一種版面配置容器,用於在其子元素之間應用一致的間距。

31組件132範例

Switch

查看全部

Switch 是一種用於開啟或關閉設定的控制項。

36組件122範例

Table

查看全部

Table 是一種元素,可將資料集視覺化為行和列。它通常用於以易於掃描的方式嵌入結構化資料。

104組件465範例

Tabs

查看全部

Tabs 是一種在多個資訊視圖之間導航的方式。它用於在較小的區域中放入更多資訊。

62組件199範例

Tag

查看全部

Tag 是一種精巧的標籤,會出現在主要介面區域旁邊,用於表示該區域的狀態或metadata。

127組件426範例

Text

查看全部

Text 是一種樣式組件,可以一致的字型大小和粗細呈現字元、單字或段落字串。

102組件369範例

Textarea

查看全部

Textarea 是一種表單元素,可接受多行文字。

136組件593範例

Text field

查看全部

Text field 是一種表單元素,可接受單行文字或多行文字。

122組件549範例

Title

查看全部

Title 是描述頁面或區段內容的文字。它的大小通常會根據它所代表的內容的重要性而有所不同。

27組件88範例

Toast

查看全部

Toast 是一種簡短訊息,用於通知使用者系統狀態的更新或變更。它會出現在內容上方。

36組件132範例

Toggle

查看全部

Toggle 是一種用於開啟或關閉設定的控制項。

55組件171範例

Tooltip

查看全部

Tooltip 是一種訊息框,會顯示關於元素的額外資訊。它可以透過滑鼠懸停、點擊或輕觸出現。

72組件248範例

Typography

查看全部

Typography 是一種字型大小和粗細的系統,用於組織內容。

38組件179範例