跳至主要內容
版本:v8

UI 組件

Ionic 應用程式由稱為「組件」的高階建構模塊組成,可讓您快速建構應用程式的 UI。Ionic 內建許多組件,包括卡片、清單和標籤頁。一旦您熟悉了基礎知識,請參考API 索引以取得每個組件和子組件的完整清單。

動作表

動作表會顯示一組選項,可以確認或取消動作。

警示

警示是一種讓使用者選擇特定動作或一系列動作的好方法。

徽章

徽章是一個小型組件,通常會向使用者傳達數值。

按鈕

按鈕可讓使用者採取行動。它們是與應用程式互動和瀏覽的必要方式。

卡片

卡片是顯示重要內容的好方法,並且可以包含圖像、按鈕、文字等。

核取方塊

核取方塊可用於讓使用者知道他們需要做出二元決定。

晶片

晶片是一種顯示資料或動作的精簡方式。

內容

內容是與應用程式互動和瀏覽的典型方式。

日期和時間選擇器

日期和時間選擇器用於呈現一個介面,讓使用者可以輕鬆選擇日期和時間。

浮動操作按鈕

浮動操作按鈕是圓形按鈕,可在螢幕上執行主要動作。

圖示

精美設計的圖示,適用於 Web、iOS 和 Android 應用程式。

網格

網格是一個功能強大的行動優先系統,用於建構自訂版面配置。

無限滾動

無限滾動可讓您在使用者滾動瀏覽應用程式時載入新資料。

輸入

輸入提供使用者在您的應用程式中輸入資料的方式。

項目

項目是一個通用的 UI 容器,可以用作清單的一部分。

清單

清單可以顯示資訊列,例如聯絡人清單、播放清單或選單。

導覽

導覽是使用者在應用程式中的不同頁面之間移動的方式。

選單

選單是一種常見的導覽模式。它們可以永久顯示在螢幕上,或在需要時顯示。

模態視窗

模態視窗會滑入和滑出螢幕以顯示暫時的 UI,並且通常用於登入或註冊頁面。

彈出視窗

彈出視窗提供了一種在不更改內容的情況下呈現資訊或選項的簡單方法。

進度指示器

進度指示器會視覺化操作或活動的進度。

單選

單選輸入可讓您呈現一組互斥的選項。

重新整理

重新整理會在內容組件上提供下拉重新整理功能。

搜尋列

搜尋列用於搜尋或篩選項目,通常來自工具列。

重新排序

重新排序可讓使用者拖放以重新排序項目清單。

路由

路由允許根據目前的路徑進行導覽。

分段

分段提供一組互斥的按鈕,可用作篩選器或視圖切換器。

選擇

選擇與原生 HTML 選擇類似,但在排序和選擇方面有一些改進。

標籤頁

標籤頁啟用標籤式導覽,這是現代應用程式中的標準導覽模式。

快顯訊息

快顯訊息用於在應用程式內容上方顯示通知。它可以是暫時的或可關閉的。

切換

切換是一種二元選項的輸入,通常用於選項和開關。

工具列

工具列用於存放與您的應用程式相關的資訊和動作。