ion-backdrop
Backdropは、他のコンポーネントをオーバーレイするためフルスクリーンのコンポーネントです。これらは、他のコンテンツの上に遷移するコンポーネントのバックグラウンドで役立ち、そのコンポーネントを削除するために使用できます。
基本的な使い方
Backdropは、その後ろのコンテンツをクリックしたりタップしたりするのを防ぎます。デフォルトでは透明なので、下のデモではCSSで見えるようにしています。
スタイリング
バックドロップは、CSSプロパティをバックドロップ要素に直接割り当てることで、カスタマイズすることができます。一般的なプロパティには background-color
, background
, opacity
があります。
コンテンツに z-index
を設定し、背景よりも高い位置に表示させることができます(デフォルトは 2
です)。
プロパティ
stopPropagation
Description | true の場合、バックドロップはタップ時に伝搬を停止します。 |
Attribute | stop-propagation |
Type | boolean |
Default | true |
tappable
Description | true の場合、背景をクリックすることができ、ionBackdropTap イベントを発生させます。 |
Attribute | tappable |
Type | boolean |
Default | true |
visible
Description | true の場合、バックドロップが表示されます。 |
Attribute | visible |
Type | boolean |
Default | true |
イベント
Name | Description |
---|---|
ionBackdropTap | バックドロップがタップされたときに発行されます。 |
メソッド
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSSカスタムプロパティ
No CSS custom properties available for this component.
Slots
No slots available for this component.