时间戳

首页 > 解决方案 > Ionic 4 透明透明标头

angular - Ionic 4 透明透明标头

问题描述

我有一个 Ionic 4 应用程序，我想要一个透明的标题。离子文档指出必须将“全屏”添加到离子内容中，并且必须将“半透明”添加到离子工具栏。

这不起作用，并且总是将工具栏留在顶部。我也将其添加到 css 中：

ion-toolbar {
   --background: transparent;
   --ion-color-base: transparent !important;
}

<ion-header>
  <ion-toolbar translucent >
    <ion-buttons slot="start"  (click)="goBack()">
        <ion-icon name="arrow-back"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen >
</ion-content>

我能找到实现透明标题效果的唯一方法是当我转到 chrome 中的 Shadow DOM 并将背景属性添加到类“inner-scroll”时

但是，此类中没有与背景颜色相关的变量，因此我无法使用此方法更改背景。

我怎样才能使这个透明的标题/工具栏工作！？

解决方案：

对于遇到此问题的其他任何人-文档根本不清楚。要获得完全透明的功能标头：

<ion-header>
  <ion-toolbar translucent>
    <ion-back-button></ion-back-button>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen> </ion-content>

否在css中添加以下内容：

ion-toolbar {
--ion-toolbar-background-color: transparent;
--ion-toolbar-text-color: white;
}

该文档仅指定了 HTML 方面的内容，但在 Ionic 中使用新的 Shadow DOM，必须使用变量来更改大多数 Ionic 组件样式。

标签： angularionic-frameworkionic4

解决方案

你试过这个吗？

ion-toolbar {
   --background-color: transparent;
   --ion-color-base: transparent !important;
 }

推荐阅读