ion-backdrop

shadow

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

基本的な使い方

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

src/app/example.component.html

<ion-backdrop [visible]="true"></ion-backdrop>
<div class="ion-page">
  <ion-header>
    <ion-toolbar>
      <ion-title>Backdrop</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    <ion-item>
      <ion-checkbox>Checkbox</ion-checkbox>
    </ion-item>
    <ion-button expand="block">Button</ion-button>
  </ion-content>
</div>

src/app/example.component.css

ion-backdrop {
  background: var(--ion-color-dark);
  opacity: 0.3;
}

src/app/example.component.ts

import { Component } from '@angular/core';
import {
  IonBackdrop,
  IonButton,
  IonCheckbox,
  IonContent,
  IonHeader,
  IonItem,
  IonTitle,
  IonToolbar,
} from '@ionic/angular/standalone';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonBackdrop, IonButton, IonCheckbox, IonContent, IonHeader, IonItem, IonTitle, IonToolbar],
})
export class ExampleComponent {}

スタイリング

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

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

src/app/example.component.html

<ion-backdrop [visible]="true"></ion-backdrop>
<div class="ion-page">
  <ion-header>
    <ion-toolbar>
      <ion-title>Backdrop</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam
      perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, provident
      expedita vero!
    </p>
  </ion-content>
</div>
<div id="box">
  <ion-checkbox color="light"></ion-checkbox>
  <ion-button class="ion-margin-start" color="light">Clickable</ion-button>
</div>

src/app/example.component.css

ion-backdrop {
  opacity: 0.9;
  background: var(--ion-color-primary);
}

#box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ion-background-color, #fff);
  width: 90%;
  height: 100px;
  border-radius: 10px;
}

src/app/example.component.ts

import { Component } from '@angular/core';
import {
  IonBackdrop,
  IonButton,
  IonCheckbox,
  IonContent,
  IonHeader,
  IonTitle,
  IonToolbar,
} from '@ionic/angular/standalone';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  imports: [IonBackdrop, IonButton, IonCheckbox, IonContent, IonHeader, IonTitle, IonToolbar],
})
export class ExampleComponent {}

プロパティ

stopPropagation

Description	If true, the backdrop will stop propagation on tap.
Attribute	stop-propagation
Type	boolean
Default	true

tappable

Description	If true, the backdrop will can be clicked and will emit the ionBackdropTap event.
Attribute	tappable
Type	boolean
Default	true

visible

Description	If true, the backdrop will be visible.
Attribute	visible
Type	boolean
Default	true

イベント

Name	Description	Bubbles
ionBackdropTap	Emitted when the backdrop is tapped.	true

メソッド

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.