跳到主要内容
版本:v7

Platform Styles

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 属性,其值等于当前模式。这些属性可用于覆盖任何组件的样式。例如,仅在 ios 模式下将 ion-badge 的文本样式设置为 uppercase

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

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

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

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