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
- 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. |
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.