时间戳

首页 > 解决方案 > Ionic 中 Angular 属性和自定义 CSS 属性之间的区别

ionic-framework - Ionic 中 Angular 属性和自定义 CSS 属性之间的区别

问题描述

您能否举一个 CSS 自定义属性的使用示例

--ion-grid-padding
--ion-grid-padding-lg

与角。

具体来说，我没有看到 和 之间的细微size-sm差别--ion-grid-padding-lg？

我不明白我应该在哪里以及在什么文件中使用自定义 CSS 属性（以及如何正确使用它们）。

标签： ionic-frameworkionic4

解决方案

您可以在文件 variable.css 中定义您的自定义 css 属性，例如：

--my-custom-opacity: 0.8;

在与您的页面关联的 css 文件或 global.css 中，您可以使用以下方法访问此属性：

.my-css-class {
   opacity: var(--my-custom-opacity);
}

您的 html 元素将被赋予 0.8 的不透明度。

如果您需要更新此属性以在单个页面上更改（并在其他地方保持不变），您可以使用主机标记更新它：

:host {
   --my-custom-opacity: 0.6;
}

在这种情况下，您的元素将仅在此页面上被赋予 0.6 的不透明度。

这是在代码中的多个位置应用 css 值并在必要时更新的简单方法。

希望有帮助！

推荐阅读