我们正在使用ionic 4中的自定义组件,我们希望它具有诸如color
属性之类的离子属性,以影响其内部离子成分... 有关如何可以做到吗?,而无需像`[color] =“'blue-lagoon'”
答案 0 :(得分:0)
做到这一点很容易...
此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或样式。
并可以通过以下方式使用您的颜色:
我希望我有所帮助:)