Skip to main content
Version: v6

ion-backdrop

shadow

コンテンツ

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

使い方

<!-- 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;
}

プロパティ

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

イベント

NameDescription
ionBackdropTapEmitted when the backdrop is tapped.

メソッド

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.

View Source