作者:yolo_bean | 来源:互联网 | 2023-02-03 15:04
我尝试改变离子2中离子标题的颜色.
我有以下代码:
Title
颜色ion-title
不要改变.我尝试了几件事:
Title
Title
第二个我的标题是正确的颜色,但标题很大.所以我在variables.scss中添加它:
$toolbar-ios-height: 5rem; // ios
$toolbar-md-height: 5rem; // android
但没有任何改变.有人有解决方案吗?或者我是否必须使用p
或h
标签来改变颜色?
1> sebaferreras..:
color="..."
从ion-title
元素中删除并在variables.scss
文件中使用此sass变量:
$toolbar-md-title-text-color: #777;
$toolbar-ios-title-text-color: #777;
$toolbar-wp-title-text-color: #777;
如果要使用指定颜色变量中包含的颜色
$colors: (
primary: #488aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
...
custom: #777
);
你可以这样使用map-get
:
$toolbar-md-title-text-color: map-get($colors, custom);
$toolbar-ios-title-text-color: map-get($colors, custom);
$toolbar-wp-title-text-color: map-get($colors, custom);
注意:
自从3.0.0版本的Ionic 更多信息以来,已经弃用了仅使用color
属性设置颜色.
更新:
[...]导航栏上的所有元素都会改变颜色,我们可以更改离子标题吗?或者有第二个变量来改变其他元素?
您可以在app.scss
文件中添加此样式规则(使其成为全局),它只会更改标题而不会更改其他内容:
.toolbar-title.toolbar-title-md,
.toolbar-title.toolbar-title-ios,
.toolbar-title.toolbar-title-wp { color: map-get($colors, custom); }
坦克的答案,它的作品!
2> Thomas Degro..:
我知道这个问题已经得到解答,但另一种在标题中设置文本颜色的方法是在variables.scss文件中,
$colors: (
calm: (
base: #000,
contrast: #ffc900
),
etc..
);
Some Text
base将是您的背景颜色,对比度将是您的文本/图标颜色