Question

我有一个Ionic 4应用，我想要一个透明的标题。 Ionic文档指出，“全屏”必须添加到离子含量中，而“半透明”必须添加到离子工具栏中。

这不起作用，并且始终将工具栏放在顶部。我也将此添加到了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并将background属性添加到“ 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组件样式。

Answer 1

如果要在ionic 4中使用半透明标头，则需要在标头标签（而不是工具栏标签）中添加“半透明”属性。

<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

属性：半透明类型：布尔值如果为true，则标题为半透明。注意：为了将内容滚动到标题后面，需要在内容上设置全屏属性。默认为false。

Answer 2

您尝试过吗？

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

Answer 3

// Explicitly specify the return value to the Base type
var nodes = xmlDoc.Root.Elements().Select<XElement, Base>((e, index) => {
    string type = (e.Attribute("type") != null)?e.Attribute("type").Value:null;
    if(type != null) {
        if(type.Equals("Der1")) {
            // If you have something like an order property, you can assign it to index
            return new Der1() { Attr1 =  e.Attribute("attr1").Value };
        }
        else if(type.Equals("Der2")) {
            return new Der2() { Attr2 =  e.Attribute("attr2").Value };
        }
        else {
            return null;
        }
    } else {
        // You can also throw an Exception and handle it.
        return null;
    }
}).ToList();

如果您想摆脱标题的阴影，可以在css中执行以下操作：

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

Answer 4

尝试这个
mypage.page.html

df['g'] = np.where(df.running_bid_max.ge(df.ask_price_target_good), df['time'], pd.NaT)

df['l'] = np.where(df.running_bid_min.le(df.ask_price_target_bad), df['time'], pd.NaT)

现在将中等颜色的 variable.scss 文件更改为

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

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

因为内容在标题下

Answer 6

我遇到一个问题，lea rdi, [0x000368ff]在其顶部留有空格，并且内容从标题的下方开始，因此我将ion-content移动到我的ion-toolbar并通过使用ion-content：

slot=fixed

<ion-content>

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

  ...

</ion-content>

Answer 7

问题是关于离子4的。您应该使用：

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

请参见-ionic docs中使用的--background

Answer 8

这对我有用，标题是透明的，但仍有空白

ModelStateEntry modelStateEntry

但是使用离子工具栏将离子含量从背景上方移除

var

Answer 9

在CSS中

.productHeader {
    --background: transparent;
}

离子HTML

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

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

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

Answer 10

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

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

Ionic 4透明透明接头

10 个答案: