Skip to main content
Version: v6

ion-backdrop

shadow

Contents

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.

Usage

<!-- Default backdrop -->
<ion-backdrop></ion-backdrop>

<!-- Backdrop that is not tappable -->
<ion-backdrop tappable="false"></ion-backdrop>

<!-- Backdrop that is not visible -->
<ion-backdrop visible="false"></ion-backdrop>

<!-- Backdrop with propagation -->
<ion-backdrop stopPropagation="false"></ion-backdrop>

<!-- Backdrop that sets dynamic properties -->
<ion-backdrop
[tappable]="enableBackdropDismiss"
[visible]="showBackdrop"
[stopPropagation]="shouldPropagate">
</ion-backdrop>
import { Component } from '@angular/core';

@Component({
selector: 'backdrop-example',
templateUrl: 'backdrop-example.html',
styleUrls: ['./backdrop-example.css'],
})
export class BackdropExample {
enableBackdropDismiss = false;
showBackdrop = false;
shouldPropagate = false;
}

Properties

stopPropagation

DescriptionIf true, the backdrop will stop propagation on tap.
Attributestop-propagation
Typeboolean
Defaulttrue

tappable

DescriptionIf true, the backdrop will can be clicked and will emit the ionBackdropTap event.
Attributetappable
Typeboolean
Defaulttrue

visible

DescriptionIf true, the backdrop will be visible.
Attributevisible
Typeboolean
Defaulttrue

Events

NameDescription
ionBackdropTapEmitted when the backdrop is tapped.
View Source