跳至主要內容
版本:v8

平台樣式

Ionic 根據應用程式執行的裝置提供平台特定的樣式。將元件樣式設定為符合裝置指南,讓應用程式可以編寫一次,但根據使用者存取的位置,外觀和感覺都像是原生應用程式。

Ionic 模式

Ionic 使用模式來自訂元件的外觀。每個平台都有預設的模式,但可以透過全域設定覆寫。下圖顯示新增至每個平台的預設模式

平台模式描述
iosios在 iPhone、iPad 或 iPod 上檢視將使用 iOS 樣式
androidmd在任何 Android 裝置上檢視將使用 Material Design 樣式
coremd不符合上述任何平台的平台將使用 Material Design 樣式

例如,在 Android 平台上檢視的應用程式預設會使用 md (Material Design) 模式。<html> 元素將會加上 class="md",並且所有元件都會使用 Material Design 樣式

<html class="md"></html>

注意:平台模式並不相同。平台可以在應用程式的設定中設定為使用任何模式。

覆寫模式樣式

每個 Ionic 元件都可以根據模式進行樣式設定。html 元素同時具有 classmode 屬性,其值等於目前的模式。這些可以用來覆寫任何元件的樣式。例如,若要設定 ion-badge 的樣式,使其僅在 ios 模式中顯示 uppercase 文字

.ios ion-badge {
text-transform: uppercase;
}

還有許多全域 CSS 變數可用來覆寫樣式。若要設定 ios 應用程式的背景顏色,可以寫入以下內容

.ios {
--ion-background-color: #222;
}

有許多全域變數可以依模式覆寫,包括 Ionic 的色彩變數主題變數全域元件變數