Sidemenu background-color in Ionic-v4

为君一笑 提交于 2020-01-13 12:59:46

问题


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.

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

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


回答1:


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


来源:https://stackoverflow.com/questions/52311143/sidemenu-background-color-in-ionic-v4

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!