Skip to main content
Version: v9

ion-backdrop

shadow

Backdropは、他のコンポーネントをオーバーレイするためフルスクリーンのコンポーネントです。これらは、他のコンテンツの上に遷移するコンポーネントのバックグラウンドで役立ち、そのコンポーネントを削除するために使用できます。

基本的な使い方​

Backdropは、その後ろのコンテンツをクリックしたりタップしたりするのを防ぎます。デフォルトでは透明なので、下のデモではCSSで見えるようにしています。

スタイリング​

バックドロップは、CSSプロパティをバックドロップ要素に直接割り当てることで、カスタマイズすることができます。一般的なプロパティには background-color, background, opacity があります。

コンテンツに z-index を設定し、背景よりも高い位置に表示させることができます(デフォルトは 2 です)。

プロパティ​

stopPropagation​

Descriptiontrueの場合、バックドロップはタップ時に伝搬を停止します。
Attributestop-propagation
Typeboolean
Defaulttrue

tappable​

Descriptiontrueの場合、背景をクリックすることができ、ionBackdropTapイベントを発生させます。
Attributetappable
Typeboolean
Defaulttrue

visible​

Descriptiontrueの場合、バックドロップが表示されます。
Attributevisible
Typeboolean
Defaulttrue

イベント​

NameDescriptionBubbles
ionBackdropTapバックドロップがタップされたときに発行されます。true

メソッド​

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.