次のような構造のサイドメニューを備えたIonic-v4-appがあります。
<ion-app>
<ion-split-pane>
<ion-menu>
<ion-header>
<ion-toolbar>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
</ion-list>
</ion-content>
</ion-menu>
</ion-split-pane>
</ion-app>
ここで、サイドメニュー全体(ヘッダー、リスト、コンテンツ、すべて)の背景が必要です。
しかし、私が何をしようとしても不必要であり、それがどのように機能しているかわかりません。
ion-menu
の背景色と、header
とcontent
の透明な背景を試しましたが、機能しませんでした。
使用する必要があることはわかっていますionic --ion-background-color
のようなcss変数を使用する必要がありましたが、どうすればよいですか?
私は以下の解決策があなたを助けると信じています:-)
ion-menu {
--ion-background-color: var(--ion-color-primary);
--ion-text-color: var(--ion-color-primary-contrast);
ion-toolbar {
--background: var(--ion-color-primary);
}
ion-list {/* optional, but it needs when you use gradient as a background color.*/
background: transparent;
}
}