イオン3：グラデーションの背景

Question

$background-colorをvariables.scssに設定することで、イオンアプリの背景色を変更するのは簡単ですが、グラデーションや画像では機能しません。私はこれに関する正式な文書や有用な質問と回答を見つけることができなかったことに驚いた。

$background-colorを非カラーに設定すると、現在背景色に基づいて色を計算する多くのイオンコンポーネントの1つから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だけで、あなたのヘッダー/ナビゲーションバーとフッター/タブ間のスペースを占めるが、実際に画面全体を埋めるためにイオンでスタイリングされていることと思うかもしれません。グラデーションは上から下に移動します。 成功。