ion-backdrop
Contents
Backdropは、他のコンポーネントをオーバーレイするためフルスクリーンのコンポーネントです。これらは、他のコンテンツの上に遷移するコンポーネントのバックグラウンドで役立ち、そのコンポーネントを削除するために使用できます。
Usage
- Angular
- Javascript
- React
- Stencil
- Vue
<!-- 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;
}
<!-- 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 stop-propagation="false"></ion-backdrop>
<!-- Backdrop that sets dynamic properties -->
<ion-backdrop id="customBackdrop"></ion-backdrop>
var backdrop = document.getElementById('customBackdrop');
backdrop.visible = false;
backdrop.tappable = false;
backdrop.stopPropagation = false;
import React from 'react';
import { IonBackdrop, IonContent } from '@ionic/react';
export const BackdropExample: React.FC = () => (
<IonContent>
{/*-- Default backdrop --*/}
<IonBackdrop />
{/*-- Backdrop that is not tappable --*/}
<IonBackdrop tappable={false} />
{/*-- Backdrop that is not visible --*/}
<IonBackdrop visible={false} />
{/*-- Backdrop with propagation --*/}
<IonBackdrop stopPropagation={false} />
<IonBackdrop tappable={true} visible={true} stopPropagation={true} />
</IonContent>
);
import { Component, h } from '@stencil/core';
@Component({
tag: 'backdrop-example',
styleUrl: 'backdrop-example.css'
})
export class BackdropExample {
render() {
const enableBackdropDismiss = false;
const showBackdrop = false;
const shouldPropagate = false;
return [
// 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>
];
}
}
<template>
<!-- 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 stop-propagation="false"></ion-backdrop>
<!-- Backdrop that sets dynamic properties -->
<ion-backdrop
:tappable="enableBackdropDismiss"
:visible="showBackdrop"
:stop-propagation="shouldPropagate">
</ion-backdrop>
</template>
<script>
import { IonBackdrop } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonBackdrop },
setup() {
return {
enableBackdropDismiss: true,
showBackdrop: true,
shouldPropagate: true
}
}
});
</script>
Properties
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 |
Events
Name | Description |
---|---|
ionBackdropTap | Emitted when the backdrop is tapped. |