イオンナビを透明にするには？

イオンのヘッダーやナビを透明にしたいので、写真のようにすることができます。しかし、背景色を透明に設定しても問題は解決しません。コンテンツは「フルスクリーン」である必要があります。可能であれば、コンテンツはステータスバーの後ろにある必要があります。イオンナビを透明にするには？

出典

2016-08-10 rakete

まず、ページの背景にフルイメージを設定してから、すべてのコンポーネントのボタンとヘッダーにcss opacityプロパティを設定する必要があります。例。不透明度：0.5; –

あなたにはいくつかのことが必要です。最初に、Dennisが言ったように、ヘッダを透明にするためのチュートリアルを書きました。詳細はhereで確認できます。

だから、最初のあなたは、基本的には、ツールバーにbackground:transparent !importantを追加した、あなたのnav-barにtransparent入力プロパティを追加します。
また、ion-headerにno-borderを追加して、アンドロイドに表示されるボーダーシャドウを削除することもできます。
次に、上部パディングを.scroll-contentに削除すると、ヘッダーのパディングは無視されます。これを行うには、top-padding: 0を追加してください。
スライドにグラデーションレイヤーを追加する場合は、によって自動的に生成される.slide-zoomで作業する必要があります。高さを100％、幅として設定して、何かを追加することができますbackground: linear-gradient(0deg, rgba(226, 135, 106, 0.84) 0%, rgba(255, 93, 152, 0.85) 100%) !important;
弾丸のスタイルを変更するには、.swiper-pagination-bulletと.swiper-pagination-bullet-activeを使用する必要があります。

私はあなたが望むものを達成しようとして実際に簡単な例を書いた：

これはあなたが望むことならば、私はpublished a repoので、あなたがそれを参照として使用することができます。

出典

2017-05-10 18:35:17

あなたのリンクとあなたの所属を開示してくれてありがとう。あなたがまだそれをしていないなら、私は[スパマーにならないでください]（https://stackoverflow.com/help/promotion）を読むことをお勧めします。あなたは現在それに従っていますが、ルールあります。 –

こんにちは@qpaystaxesありがとう！私は実際にルールについて知らなかった。私はその投稿を編集して、さらに詳しく開示しました。乾杯！ –

Thisあなたが探しているものです：デフォルトで

、コンテンツは、ヘッダーとフッターの間に配置されています。ただし、fullscreen="true"を使用すると、コンテンツはスクロールしてのヘッダーとフッターの下に表示されます。一見すると、フルスクリーンオプションはデフォルトと違って見えることはありませんが、ヘッダに透過効果を追加すると、コンテンツがヘッダの下に表示されます。

だから、私は本当に素敵な解決策を発見したこの

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

出典

2016-08-10 09:24:29 sebaferreras

私の現在の問題：Ionicはスクロールコンテンツの子を自動的に作成します。これにはパディングトップがあります。私はこのCSSを解決することができますが、この子要素を無効にすることをお勧めしますか？あなたはやり方を知っていますか？ – rakete

イオン含有量からトップパディングを除去するには、イオン含有量から 'padding'属性指令を削除してください。 – user1275105

ようなあなたのコンテンツにfullscreen="true"を追加する必要があります。あなたは簡単にイオンヘッダを編集することができTutorial

を：<ion-header no-border> （アンドロイドデバイスのボーダーを削除してください）
を追加してください。属性t oナビゲーションバー：<ion-navbar transparent>

出典

2017-05-09 07:08:39

イオンナビを透明にするには？

答えて

関連する問題