Sidemenu фоновый цвет в Ionic-v4

У меня есть приложение Ionic-v4 с боковым меню, структурированным так:

<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, но тоже не работает.

Я знаю, что я должен был использовать, я должен был использовать ионные переменные CSS, такие как --ion-background-color, но как?

1 ответ

Решение

Я думаю, что решение ниже поможет вам:-)

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;
  }
}
Другие вопросы по тегам