web-dev-qa-db-ja.com

サイドメニューの背景-Ionic-v4の色

次のような構造のサイドメニューを備えた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変数を使用する必要がありましたが、どうすればよいですか？

cssionic-frameworkbackgroundbackground-colorside-menu
4
AnDoDri

私は以下の解決策があなたを助けると信じています:-)

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;
  }
}
18
Ken P.