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

Question

我们正在使用ionic 4中的自定义组件，我们希望它具有诸如color属性之类的离子属性，以影响其内部离子成分... 有关如何可以做到吗？，而无需像`[color] =“'blue-lagoon'”

这样的常规绑定

Answer 1

做到这一点很容易...

此tutorial中的所有信息。

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

1。

转到此page，在这里您可以找到离子的颜色生成器，可以使用原色部分，将您的十六进制颜色放入其中，并在下面生成该颜色的代码：

例如不适使用＃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

现在，您可以在任意位置使用自定义颜色，显然可以使用您定义的颜色。

就是这样。

或者，如果不允许color属性（我想您的情况是这样），请创建类，id或样式。

并可以通过以下方式使用您的颜色：

我希望我有所帮助：）