Ionic-v4中的Sidemenu背景色 [英] Sidemenu background-color in Ionic-v4

问题描述

我有一个Ionic-v4-app，其侧面菜单的结构如下:

I have a Ionic-v4-app with an side-menu structured like that:

<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>

现在，我希望整个侧面菜单(标题，列表，内容，所有内容)都有背景.

Now I want the have a background for the whole side-menu (header, list, content, everything).

但是我的尝试是不必要的，我不知道它是如何工作的.

But it is unnecessary what I try, I don’t get how it is working.

我尝试了ion-menu的背景色和header和content的透明背景，但是也没有用.

I tried a background color for ion-menu and transparent background for header and content, but also not working.

我知道我必须使用我必须使用像--ion-background-color这样的离子css变量，但是如何?

I know that i had to use i had to use ionic css variables like --ion-background-color, but how?

推荐答案

我相信以下解决方案可以帮助您:-)

I believe below solution would help you :-)

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中的Sidemenu背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！