Ionic 4 透明透明 header

Question

我有一个 Ionic 4 应用程序，我想要一个透明的 header。 Ionic 文档指出 'fullscreen' 必须添加到 ion-content，并且 'translucent' 必须添加到 ion-toolbar。

这不起作用，并且始终将工具栏留在顶部。我也将此添加到 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>

我能找到实现透明 header 效果的唯一方法是当我转到 chrome 中的阴影 DOM 并向 class'inner-scroll'

但是在这个 class 中没有与背景颜色关联的变量，所以我无法使用此方法更改背景。

如何使这个透明 header/toolbar 起作用！？

解法：

对于遇到此问题的任何其他人 - 文档根本不清楚。获得完全透明的函数 header:

<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 组件样式。

Answer 1

你试过了吗？

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

Answer 2

如果你想在 ionic 4 中使用半透明 header，你需要将 "translucent" 属性添加到 header 标签，而不是工具栏标签。

<ion-header translucent="true">
  <ion-toolbar>
    <ion-title>Toolbar Title</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
    <!-- content here -->
</ion-content>

来自离子文档... Translucent

属性：半透明类型：布尔值如果为真，header 将是半透明的。注意：为了在 header 后面滚动内容，需要在内容上设置全屏属性。默认为假。

Answer 3

...    
<ion-toolbar color="translucent"> 
...

如果您想摆脱页眉的框阴影，您可以在 css 中执行此操作，例如：

.header::after {
  background-image: none;
}

Answer 4

试试这个
mypage.page.html

<ion-header no-border no-shadow>

  <ion-toolbar color="medium">
    <ion-title>My Page</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">

</ion-content>

现在把variable.scss中等颜色的文件改成

--ion-color-medium: #ffffff00;

Answer 5

我试了一下，效果很好

在variables.scss

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

在页面中

<ion-header translucent></ion-header>

<ion-content fullscreen>
    <div class="contenu"></div>
</ion-content>

我还想在 .scss 文件中注意到这一点。我做到了

 .contenu {
     position : absolute; 
     top : 0;
     left : 0;
     height: 100vh;
     width: 100vw;
  }

因为内容在header

下

Answer 6

我遇到了一个问题，ion-content 上面有 space，内容从 header 下面开始，所以我通过将 ion-toolbar 移动到我的ion-content 并使用 slot=fixed:

固定位置

<ion-content>

  <ion-toolbar slot="fixed">
    ...
  </ion-toolbar>

  ...

</ion-content>

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

Answer 7

这对我有用，header 是透明的，但仍有一些白色 space

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

但使用 ion-content 中的 ion-toolbar 将其从背景上方移除

<ion-content>
  <ion-toolbar slot="fixed">
  </ion-toolbar>
</ion-content>

Answer 8

在CSS

.productHeader {
    --background: transparent;
}

离子HTML

<ion-header no-border>
  <ion-toolbar class="productHeader">
   .
   .
   .
  </ion-toolbar>
</ion-header>

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

确保在 ion-content 中添加 fullscreen 为了去除 header 中出现的阴影，我添加了 no-border

Answer 9

这两种解决方案都不适合我（Ionic 5，Angular 11），但最终实现了：

ion-content {
  position: absolute;
  top: 0;
}

Answer 10

也许我来晚了一点，但对于使用 Ionic 5、6 或更高版本处于相同情况的任何人，您可以这样做：

ion-toolbar {
  --opacity: 0;
}

并且工具栏背景将是透明的。它在 ion-toolbar documentation

如果您需要 ion-content 与 header 重叠，请添加 fullscreen props(documentation)

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

Ionic 4 透明透明 header

Ionic 4 transparent transparent header

ionic-framework

angular

ionic4

Ionic 4 透明 透明 header

Ionic 4 transparent transparent header

ionic-framework

angular

ionic4

Ionic 4 透明透明 header