ionic-framework - 自定义组件中的 Ionic 4 颜色属性

Question

我们正在ionic 4 中进行自定义组件，我们希望它具有像属性这样的离子color属性来影响其内部离子组件......关于如何做到这一点的任何提示？, 没有像 `[color]=" 'blue-lagoon' "这样的常规绑定

标签： ionic-frameworkionic4

Answer 1

做到这一点很容易...

本教程中包含所有信息。

但总而言之，您需要执行以下步骤：

1.

转到这个页面，在这里你可以找到一个 ionic 的颜色生成器，你可以使用原色部分，输入你的十六进制颜色，下面是生成该颜色的代码：

例如生病使用 #5e3f53 所以生成它的代码将是：

--ion-color-primary: #5e3f53;
--ion-color-primary-rgb: 94,63,83;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #533749;
--ion-color-primary-tint: #6e5264;

2.

现在转到文件 src/theme/variables.scss 并粘贴到 :root{}

--ion-color-myCustom: #5e3f53;
--ion-color-myCustom-rgb: 94,63,83;
--ion-color-myCustom-contrast: #ffffff;
--ion-color-myCustom-contrast-rgb: 255,255,255;
--ion-color-myCustom-shade: #533749;
--ion-color-myCustom-tint: #6e5264;

3.

然后转到文件 src/global.scss 并粘贴以下代码：

.ion-color-myCustom {
  --ion-color-base: var(--ion-color-myCustom) !important;
  --ion-color-base-rgb: var(--ion-color-myCustom-rgb) !important;
  --ion-color-contrast: var(--ion-color-myCustom-contrast) !important;
  --ion-color-contrast-rgb: var(--ion-color-myCustom-contrast-rgb) !important;
  --ion-color-shade: var(--ion-color-myCustom-shade) !important;
  --ion-color-tint: var(--ion-color-myCustom-tint) !important;
}

4

现在，您可以在任何地方使用自定义颜色，显然使用您定义的名称。

就是这样。

或者，如果我猜您的帖子不允许使用颜色属性，请创建一个类、ID 或样式。

并且可以通过这种方式使用您的颜色：

我希望我有帮助:)