import Props from '@ionic-internal/component-api/v8/backdrop/props.md'; import Events from '@ionic-internal/component-api/v8/backdrop/events.md'; import Methods from '@ionic-internal/component-api/v8/backdrop/methods.md'; import Parts from '@ionic-internal/component-api/v8/backdrop/parts.md'; import CustomProps from '@ionic-internal/component-api/v8/backdrop/custom-props.mdx'; import Slots from '@ionic-internal/component-api/v8/backdrop/slots.md';

import EncapsulationPill from '@components/page/api/EncapsulationPill';

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

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

import Basic from '@site/static/usage/v8/backdrop/basic/index.md';

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

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

import Styling from '@site/static/usage/v8/backdrop/styling/index.md';