Skip to main content
Version: v5

ion-backdrop

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

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

tappable

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

visible

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

Events

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

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

No CSS custom properties available for this component.

Slots

No slots available for this component.

View Source