离子3:渐变背景

Question

这是很容易通过设置来改变离子App的背景色$background-color中variables.scss,但它不会与梯度或图像的工作.我很惊讶我找不到任何官方文件,也没有很多有用的问题和答案.

如果设置$background-color为非颜色,则当前会从许多基于背景颜色计算颜色的离子组件中获取Sass错误.

Answer 1

所以这就是我最终做的事情,首先是src/theme/variables.scss:

$app-background: linear-gradient(to bottom, color($colors, light) 0%, color($colors, dark) 100%);
$background-color: transparent;
$toolbar-background: transparent;

普通背景和工具栏必须是透明的,以显示下面的渐变.我们应用渐变src/app/app.scss:

ion-content {
    background: $app-background;
}

你可能认为ion-content只占用标题/导航栏和页脚/标签之间的空间,但实际上是由Ionic设计的,以填满整个屏幕.所以你从上到下得到了渐变.成功.