跳到主要内容
版本:v7

平台样式

Ionic 根据应用运行的设备提供特定平台的样式。为组件设置样式以匹配设备指南,使应用可以一次编写,但根据用户访问的平台给用户带来原生外观和感觉。

Ionic 模式

Ionic 使用 模式 来自定义组件的外观。每个 平台 都有一个默认 模式,但这可以通过全局 config 覆盖。下表显示了添加到每个 平台 的默认 模式

平台模式描述
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>

注意:平台模式 是不同的。平台可以在应用的 config 中设置为使用任何模式。

覆盖模式样式

每个 Ionic 组件都可以根据模式设置样式。html 元素同时具有 classmode 属性,其值等于当前模式。这些可用于覆盖任何组件的样式。例如,要在 ios 模式下设置 ion-badge 的文本为 uppercase(大写):

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

还有一些全局 CSS 变量可用于覆盖样式。要为 ios 应用设置背景颜色,可以编写以下代码:

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

有许多全局变量可以按模式覆盖,包括 Ionic 的颜色变量主题变量全局组件变量