web-dev-qa-db-ja.com

Ionic 4つの透明なヘッダー

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に移動して、クラス '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
4
user3024827

やってみましたか？

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

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>

ionic doc ... Translucent から

属性：半透明タイプ：ブール値trueの場合、ヘッダーは半透明になります。注：ヘッダーの後ろのコンテンツをスクロールするには、コンテンツに全画面属性を設定する必要があります。デフォルトはfalseです。

2
chris cooley

これは私にとってはうまくいきました、ヘッダーは透明ですが、まだ空白が残っていました

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

しかし、イオンコンテンツ内でイオンツールバーを使用すると、背景の上からそれが削除されました

<ion-content>
  <ion-toolbar slot="fixed">
  </ion-toolbar>
</ion-content>
1
Gabriel Visconti
...    
<ion-toolbar color="translucent"> 
...

ヘッダーのボックスシャドウを削除する場合は、次のようにcssで実行できます。

.header::after {
  background-image: none;
}
1
Gary Großgarten

_ion-content_の上部にスペースがあり、コンテンツがヘッダーの下から始まっているという問題があったため、_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;
}
_
0
Sinandro

私はこれを試して、うまくいきます

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

コンテンツがヘッダーの下にあったため

0
Kangudie Muanza - Killmonger

CSSで

.productHeader {
    --background: transparent;
}

Ionic HTML

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

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

必ずion-contentにfullscreenを追加し、ヘッダーに表示される影を削除するためにno-borderを追加しました

0
Prabhu Anand

これを試してください
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;
0
Prashant Gupta

質問はionic 4.についてです。使用する必要があります。

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

ionic docs で使用されている--backgroundを参照してください

0
aboiledtiger