Ionic-v4 中的侧边菜单 background-color
Sidemenu background-color in Ionic-v4
我有一个 Ionic-v4-app,其 side-menu 结构如下:
<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>
现在我想要整个 side-menu(header、列表、内容、所有内容)的背景。
但是我尝试的是不必要的,我不明白它是如何工作的。
我尝试了 ion-menu
的背景颜色和 header
和 content
的透明背景,但还是不行。
我知道我必须使用我必须使用像 --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;
}
}
我有一个 Ionic-v4-app,其 side-menu 结构如下:
<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>
现在我想要整个 side-menu(header、列表、内容、所有内容)的背景。
但是我尝试的是不必要的,我不明白它是如何工作的。
我尝试了 ion-menu
的背景颜色和 header
和 content
的透明背景,但还是不行。
我知道我必须使用我必须使用像 --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;
}
}