Skip to main content

平台样式

Ionic 根据应用运行的设备提供特定于平台的样式。通过对组件进行样式设计以匹配设备指南，应用只需编写一次，但根据访问位置，用户的外观和感觉是原生的。

¥Ionic provides platform specific styles based on the device the application is running on. Styling the components to match the device guidelines allows the application to be written once but look and feel native to the user depending on where it is accessed.

Ionic 模式​

¥Ionic Modes

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

¥Ionic uses modes to customize the look of components. Each platform has a default mode, but this can be overridden through the global config. The following chart displays the default mode that is added to each platform:

平台模式描述
iosios在 iPhone、iPad 或 iPod 上查看将使用 iOS 风格。
androidmd在任何 Android 设备上查看都将使用 材料设计风格。
coremd任何不适合上述任何平台的平台都将使用 材料设计风格。

例如，在 Android 平台上查看的应用将默认使用 md（Material Design）模式。<html> 元素将添加 class="md"，并且所有组件都将使用 Material Design 样式：

¥For example, an app being viewed on an Android platform will use the md (Material Design) mode by default. The <html> element will have class="md" added to it and all of the components will use Material Design styles:

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

注意：平台和模式不一样。平台可以设置为使用应用 config 中的任何模式。

¥Note: The platform and the mode are not the same. The platform can be set to use any mode in the config of an app.

覆盖模式样式​

¥Overriding Mode Styles

每个 Ionic 组件都可以根据模式设置样式。html 元素同时具有 class 和 mode 属性，其值等于当前模式。这些可用于覆盖任何组件的样式。例如，要将 ion-badge 样式设置为仅在 ios 模式下具有 uppercase 文本：

¥Each Ionic component can be styled based on the mode. The html element has both a class and mode attribute with a value equal to the current mode. These can be used to override styles for any component. For example, to style an ion-badge to have uppercase text only in ios mode:

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

还有许多全局 CSS 变量可用于覆盖样式。要为 ios 应用设置背景颜色样式，可以编写以下内容：

¥There are also many global CSS variables that can be used to override the styles. To style the background color for an ios app, the following can be written:

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

有很多全局变量可以被模式覆盖，包括 Ionic 的颜色变量、主题变量 和 全局组件变量。

¥There are many global variables that can be overridden by mode, including Ionic's color variables, theme variables and global component variables.

目录