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

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

Backdrops are full screen components that overlay other components. They are useful behind components that transition in on top of other content and can be used to dismiss that component.

The backdrop prevents clicking or tapping on the content behind it. It is transparent by default, so the below demo includes CSS to make it visible.

import Basic from '@site/static/usage/v9/backdrop/basic/index.mdx';

The backdrop can be customized by assigning CSS properties directly to the backdrop element. Common properties include background-color, background and opacity.

Content can be displayed above the backdrop by setting a z-index on the content, higher than the backdrop (defaults to 2).

import Styling from '@site/static/usage/v9/backdrop/styling/index.mdx';