跳到主要内容
版本:v7

主题基础

Ionic Framework 被设计为一张白板,可以轻松定制和修改以适应品牌需求,同时遵循不同平台的标准。现在为 Ionic 应用构建主题比以往任何时候都更容易。由于该框架使用 CSS 构建,它附带了一系列预制默认样式,非常易于更改和修改。

颜色​

Ionic 有九种默认颜色,可用于更改许多组件的颜色。每种颜色实际上是多个属性的集合,包括在整个 Ionic 中使用的 shade(暗色调)和 tint(亮色调)。

更改颜色时,设置所有相关属性非常重要。这可以通过 Color Generator 工具轻松完成,但如果需要,也可以手动编写。有关 Ionic 颜色的更多信息,请参阅 Colors。

    平台标准​

    Ionic 组件会根据运行应用的平台调整其外观和行为。我们称之为 自适应样式。这使得开发者能够使用同一代码库为多个平台构建应用,同时在特定平台上保持"原生"外观。

    Ionic 有两种 模式,用于根据 平台 自定义组件的外观:ios 和 md。每个平台都有默认模式,但这可以轻松配置。有关基于平台自定义应用的更多信息,请参阅 Platform Styles。

    CSS 变量​

    Ionic Framework 组件使用 CSS 属性(变量)进行主题化。CSS 变量为原本静态的语言添加了动态值。这传统上需要使用 CSS 预处理器(如 Sass)。只需更改 Ionic Framework 提供的任何 CSS 变量 的值,即可轻松更改应用的外观。

    CSS 阴影部分​

    CSS 阴影部分 的加入是为了更容易地完全自定义 Ionic Framework 的 Shadow 组件。过去,使用 Shadow DOM 的组件无法直接设置其 shadow 树内元素的样式。随着 Shadow parts 的加入,不再需要为 Shadow 组件内部元素的每个属性都使用 CSS 变量。有关使用 parts 自定义 Ionic Framework 组件的更多信息,请参阅 CSS 阴影部分 指南。

    品牌化​

    Ionic 提供了应用颜色,可用于为主题化应用以匹配品牌或配色方案。默认主题使用浅色背景,但从背景颜色到文本颜色的一切都是完全可自定义的。有关品牌化的更多信息,请参阅 Themes。