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 使用 模式 来自定义组件的外观。每个 平台 都有一个默认的 模式，但可以通过全局 配置 覆盖。下表显示了添加到每个 平台 的默认 模式：

🌐 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 设备上查看将使用 Material Design 样式。
coremd任何不符合上述平台的其他平台将使用 Material Design 样式。

例如，在 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>

注意：平台和模式不是同一个概念。平台可以在应用的配置中设置使用任何模式。

🌐 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 属性，其值等于当前模式。这些可以用于覆盖任何组件的样式。例如，要仅在 ios 模式下使 ion-badge 显示 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.

目录