javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(overlays): enableBackdropDismiss => backdropDismiss

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-08-13 09:16:32 +02:00
parent 42ca99d111
commit bd5a4a0294
24 changed files with 156 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/action-sheet/action-sheet-interface.ts
View File

@@ -4,7 +4,7 @@ export interface ActionSheetOptions {
subHeader?: string;
cssClass?: string | string[];
buttons: (ActionSheetButton | string)[];
enableBackdropDismiss?: boolean;
backdropDismiss?: boolean;
translucent?: boolean;
}

4
core/src/components/action-sheet/action-sheet.tsx
View File

@@ -63,7 +63,7 @@ export class ActionSheet implements OverlayInterface {
/**
* If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@Prop() enableBackdropDismiss = true;
@Prop() backdropDismiss = true;
/**
* Title for the action sheet.
@@ -224,7 +224,7 @@ export class ActionSheet implements OverlayInterface {
const buttons = allButtons.filter(b => b.role !== 'cancel');
return [
<ion-backdrop tappable={this.enableBackdropDismiss}/>,
<ion-backdrop tappable={this.backdropDismiss}/>,
<div class="action-sheet-wrapper" role="dialog">
<div class="action-sheet-container">
<div class="action-sheet-group">

26
core/src/components/action-sheet/readme.md
View File

@@ -16,19 +16,19 @@ A button's `role` property can either be `destructive` or `cancel`. Buttons with
## Properties
| Property | Attribute | Description | Type |
| ----------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------- | --------------------- |
| `buttons` | -- | An array of buttons for the action sheet. | `ActionSheetButton[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
| `enableBackdropDismiss` | `enable-backdrop-dismiss` | If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `enterAnimation` | -- | Animation to use when the action sheet is presented. | `AnimationBuilder` |
| `header` | `header` | Title for the action sheet. | `string` |
| `keyboardClose` | `keyboard-close` | If the actionSheet should close the keyboard | `boolean` |
| `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `AnimationBuilder` |
| `overlayId` | `overlay-id` | Unique ID to be used with the overlay. Internal only | `number` |
| `subHeader` | `sub-header` | Subtitle for the action sheet. | `string` |
| `translucent` | `translucent` | If true, the action sheet will be translucent. Defaults to `false`. | `boolean` |
| `willAnimate` | `will-animate` | If true, the action sheet will animate. Defaults to `true`. | `boolean` |
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------- |
| `backdropDismiss` | `backdrop-dismiss` | If true, the action sheet will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `buttons` | -- | An array of buttons for the action sheet. | `ActionSheetButton[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
| `enterAnimation` | -- | Animation to use when the action sheet is presented. | `AnimationBuilder` |
| `header` | `header` | Title for the action sheet. | `string` |
| `keyboardClose` | `keyboard-close` | If the actionSheet should close the keyboard | `boolean` |
| `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `AnimationBuilder` |
| `overlayId` | `overlay-id` | Unique ID to be used with the overlay. Internal only | `number` |
| `subHeader` | `sub-header` | Subtitle for the action sheet. | `string` |
| `translucent` | `translucent` | If true, the action sheet will be translucent. Defaults to `false`. | `boolean` |
| `willAnimate` | `will-animate` | If true, the action sheet will animate. Defaults to `true`. | `boolean` |
## Events

2
core/src/components/action-sheet/test/basic/index.html
View File

@@ -140,7 +140,7 @@
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
enableBackdropDismiss: false,
backdropDismiss: false,
buttons: [{
text: 'Archive',
handler: () => {

2
core/src/components/action-sheet/test/preview/index.html
View File

@@ -135,7 +135,7 @@
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
enableBackdropDismiss: false,
backdropDismiss: false,
buttons: [{
text: 'Archive',
handler: () => {

2
core/src/components/action-sheet/test/translucent/index.html
View File

@@ -97,7 +97,7 @@
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
enableBackdropDismiss: false,
backdropDismiss: false,
buttons: [{
text: 'Archive',
handler: () => {

2
core/src/components/alert/alert-interface.ts
View File

@@ -8,7 +8,7 @@ export interface AlertOptions {
mode?: string;
inputs?: AlertInput[];
buttons?: (AlertButton | string)[];
enableBackdropDismiss?: boolean;
backdropDismiss?: boolean;
translucent?: boolean;
}

4
core/src/components/alert/alert.tsx
View File

@@ -80,7 +80,7 @@ export class Alert implements OverlayInterface {
/**
* If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@Prop() enableBackdropDismiss = true;
@Prop() backdropDismiss = true;
/**
* If true, the alert will be translucent. Defaults to `false`.
@@ -436,7 +436,7 @@ export class Alert implements OverlayInterface {
}
return [
<ion-backdrop tappable={this.enableBackdropDismiss}/>,
<ion-backdrop tappable={this.backdropDismiss}/>,
<div class="alert-wrapper">

32
core/src/components/alert/readme.md
View File

@@ -25,22 +25,22 @@ Alerts can also include several different inputs whose data can be passed back t
## Properties
| Property | Attribute | Description | Type |
| ----------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------- | -------------------------- |
| `buttons` | -- | Array of buttons to be added to the alert. | `(AlertButton | string)[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
| `enableBackdropDismiss` | `enable-backdrop-dismiss` | If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `enterAnimation` | -- | Animation to use when the alert is presented. | `AnimationBuilder` |
| `header` | `header` | The main title in the heading of the alert. | `string` |
| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` |
| `keyboardClose` | `keyboard-close` | | `boolean` |
| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `AnimationBuilder` |
| `message` | `message` | The main message to be displayed in the alert. | `string` |
| `mode` | `mode` | | `Mode` |
| `overlayId` | `overlay-id` | | `number` |
| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string` |
| `translucent` | `translucent` | If true, the alert will be translucent. Defaults to `false`. | `boolean` |
| `willAnimate` | `will-animate` | If true, the alert will animate. Defaults to `true`. | `boolean` |
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------------- |
| `backdropDismiss` | `backdrop-dismiss` | If true, the alert will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `buttons` | -- | Array of buttons to be added to the alert. | `(AlertButton | string)[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
| `enterAnimation` | -- | Animation to use when the alert is presented. | `AnimationBuilder` |
| `header` | `header` | The main title in the heading of the alert. | `string` |
| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` |
| `keyboardClose` | `keyboard-close` | | `boolean` |
| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `AnimationBuilder` |
| `message` | `message` | The main message to be displayed in the alert. | `string` |
| `mode` | `mode` | | `Mode` |
| `overlayId` | `overlay-id` | | `number` |
| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string` |
| `translucent` | `translucent` | If true, the alert will be translucent. Defaults to `false`. | `boolean` |
| `willAnimate` | `will-animate` | If true, the alert will animate. Defaults to `true`. | `boolean` |
## Events

2
core/src/components/backdrop/usage/angular.md
View File

@@ -28,7 +28,7 @@ import { Component } from '@angular/core';
styleUrls: ['./backdrop-example.css'],
})
export class BackdropExample {
enableBackdropDismiss = false;
backdropDismiss = false;
showBackdrop = false;
shouldPropagate = false;
}

2
core/src/components/loading/loading.tsx
View File

@@ -62,7 +62,7 @@ export class Loading implements OverlayInterface {
/**
* If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`.
*/
@Prop() enableBackdropDismiss = false;
@Prop() backdropDismiss = false;
/**
* If true, a backdrop will be displayed behind the loading indicator. Defaults to `true`.

29
core/src/components/loading/readme.md
View File

@@ -18,21 +18,20 @@ The loading indicator can be dismissed automatically after a specific amount of
## Properties
| Property | Attribute | Description | Type |
| ----------------------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| `content` | `content` | Optional text content to display in the loading indicator. | `string` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
| `dismissOnPageChange` | `dismiss-on-page-change` | If true, the loading indicator will dismiss when the page changes. Defaults to `false`. | `boolean` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` |
| `enableBackdropDismiss` | `enable-backdrop-dismiss` | If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`. | `boolean` |
| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `AnimationBuilder` |
| `keyboardClose` | `keyboard-close` | If true, the loading will blur any inputs and hide the keyboard | `boolean` |
| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `AnimationBuilder` |
| `overlayId` | `overlay-id` | | `number` |
| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the loading indicator. Defaults to `true`. | `boolean` |
| `spinner` | `spinner` | The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. | `string` |
| `translucent` | `translucent` | If true, the loading indicator will be translucent. Defaults to `false`. | `boolean` |
| `willAnimate` | `will-animate` | If true, the loading indicator will animate. Defaults to `true`. | `boolean` |
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| `backdropDismiss` | `backdrop-dismiss` | If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`. | `boolean` |
| `content` | `content` | Optional text content to display in the loading indicator. | `string` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` |
| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `AnimationBuilder` |
| `keyboardClose` | `keyboard-close` | If true, the loading will blur any inputs and hide the keyboard | `boolean` |
| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `AnimationBuilder` |
| `overlayId` | `overlay-id` | | `number` |
| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the loading indicator. Defaults to `true`. | `boolean` |
| `spinner` | `spinner` | The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. | `string` |
| `translucent` | `translucent` | If true, the loading indicator will be translucent. Defaults to `false`. | `boolean` |
| `willAnimate` | `will-animate` | If true, the loading indicator will animate. Defaults to `true`. | `boolean` |
## Events

2
core/src/components/loading/test/basic/index.html
View File

@@ -25,7 +25,7 @@
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...', spinner: 'hide'})">Show Loading with no spinner</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({enableBackdropDismiss: true})">Show Backdrop Click Loading</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
<ion-loading-controller></ion-loading-controller>

2
core/src/components/loading/test/preview/index.html
View File

@@ -25,7 +25,7 @@
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...', spinner: 'hide'})">Show Loading with no spinner</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({enableBackdropDismiss: true})">Show Backdrop Click Loading</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
<ion-loading-controller></ion-loading-controller>

2
core/src/components/modal/modal-interface.ts
View File

@@ -4,7 +4,7 @@ export interface ModalOptions {
component: ComponentRef;
componentProps?: ComponentProps;
showBackdrop?: boolean;
enableBackdropDismiss?: boolean;
backdropDismiss?: boolean;
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
cssClass?: string | string[];

4
core/src/components/modal/modal.tsx
View File

@@ -63,7 +63,7 @@ export class Modal implements OverlayInterface {
/**
* If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@Prop() enableBackdropDismiss = true;
@Prop() backdropDismiss = true;
/**
* If true, a backdrop will be displayed behind the modal. Defaults to `true`.
@@ -209,7 +209,7 @@ export class Modal implements OverlayInterface {
const dialogClasses = createThemedClasses(this.mode, 'modal-wrapper');
return [
<ion-backdrop visible={this.showBackdrop} tappable={this.enableBackdropDismiss}/>,
<ion-backdrop visible={this.showBackdrop} tappable={this.backdropDismiss}/>,
<div role="dialog" class={dialogClasses}></div>
];
}

26
core/src/components/modal/readme.md
View File

@@ -14,19 +14,19 @@ Modals can be created using a [Modal Controller](../../modal-controller/ModalCon
## Properties
| Property | Attribute | Description | Type |
| ----------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------- |
| `componentProps` | -- | The data to pass to the modal component. | `ComponentProps` |
| `component` | `component` | The component to display inside of the modal. | `ComponentRef` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
| `delegate` | -- | | `FrameworkDelegate` |
| `enableBackdropDismiss` | `enable-backdrop-dismiss` | If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `enterAnimation` | -- | Animation to use when the modal is presented. | `AnimationBuilder` |
| `keyboardClose` | `keyboard-close` | | `boolean` |
| `leaveAnimation` | -- | Animation to use when the modal is dismissed. | `AnimationBuilder` |
| `overlayId` | `overlay-id` | | `number` |
| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the modal. Defaults to `true`. | `boolean` |
| `willAnimate` | `will-animate` | If true, the modal will animate. Defaults to `true`. | `boolean` |
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------- |
| `backdropDismiss` | `backdrop-dismiss` | If true, the modal will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `componentProps` | -- | The data to pass to the modal component. | `ComponentProps` |
| `component` | `component` | The component to display inside of the modal. | `ComponentRef` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
| `delegate` | -- | | `FrameworkDelegate` |
| `enterAnimation` | -- | Animation to use when the modal is presented. | `AnimationBuilder` |
| `keyboardClose` | `keyboard-close` | | `boolean` |
| `leaveAnimation` | -- | Animation to use when the modal is dismissed. | `AnimationBuilder` |
| `overlayId` | `overlay-id` | | `number` |
| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the modal. Defaults to `true`. | `boolean` |
| `willAnimate` | `will-animate` | If true, the modal will animate. Defaults to `true`. | `boolean` |
## Events

2
core/src/components/picker/picker-interface.ts
View File

@@ -10,7 +10,7 @@ export interface PickerOptions {
buttons?: PickerButton[];
columns?: PickerColumn[];
cssClass?: string | string[];
enableBackdropDismiss?: boolean;
backdropDismiss?: boolean;
}
export interface PickerColumn {

4
core/src/components/picker/picker.tsx
View File

@@ -76,7 +76,7 @@ export class Picker implements OverlayInterface {
/**
* If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@Prop() enableBackdropDismiss = true;
@Prop() backdropDismiss = true;
/**
* If true, the picker will animate. Defaults to `true`.
@@ -270,7 +270,7 @@ export class Picker implements OverlayInterface {
return [
<ion-backdrop
visible={this.showBackdrop}
tappable={this.enableBackdropDismiss}
tappable={this.backdropDismiss}
/>,
<div class="picker-wrapper" role="dialog">

26
core/src/components/picker/readme.md
View File

@@ -9,19 +9,19 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a
## Properties
| Property | Attribute | Description | Type |
| ----------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------- |
| `buttons` | -- | Array of buttons to be displayed at the top of the picker. | `PickerButton[]` |
| `columns` | -- | Array of columns to be displayed in the picker. | `PickerColumn[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the picker. | `number` |
| `enableBackdropDismiss` | `enable-backdrop-dismiss` | If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `enterAnimation` | -- | Animation to use when the picker is presented. | `AnimationBuilder` |
| `keyboardClose` | `keyboard-close` | If the keyboard should be able to close the picker. Defaults to true. | `boolean` |
| `leaveAnimation` | -- | Animation to use when the picker is dismissed. | `AnimationBuilder` |
| `overlayId` | `overlay-id` | | `number` |
| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the picker. Defaults to `true`. | `boolean` |
| `willAnimate` | `will-animate` | If true, the picker will animate. Defaults to `true`. | `boolean` |
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------- |
| `backdropDismiss` | `backdrop-dismiss` | If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `buttons` | -- | Array of buttons to be displayed at the top of the picker. | `PickerButton[]` |
| `columns` | -- | Array of columns to be displayed in the picker. | `PickerColumn[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the picker. | `number` |
| `enterAnimation` | -- | Animation to use when the picker is presented. | `AnimationBuilder` |
| `keyboardClose` | `keyboard-close` | If the keyboard should be able to close the picker. Defaults to true. | `boolean` |
| `leaveAnimation` | -- | Animation to use when the picker is dismissed. | `AnimationBuilder` |
| `overlayId` | `overlay-id` | | `number` |
| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the picker. Defaults to `true`. | `boolean` |
| `willAnimate` | `will-animate` | If true, the picker will animate. Defaults to `true`. | `boolean` |
## Events

2
core/src/components/popover/popover-interface.ts
View File

@@ -4,7 +4,7 @@ export interface PopoverOptions {
component: ComponentRef;
componentProps?: ComponentProps;
showBackdrop?: boolean;
enableBackdropDismiss?: boolean;
backdropDismiss?: boolean;
translucent?: boolean;
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;

4
core/src/components/popover/popover.tsx
View File

@@ -74,7 +74,7 @@ export class Popover implements OverlayInterface {
/**
* If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`.
*/
@Prop() enableBackdropDismiss = true;
@Prop() backdropDismiss = true;
/**
* The event to pass to the popover animation.
@@ -233,7 +233,7 @@ export class Popover implements OverlayInterface {
const wrapperClasses = createThemedClasses(this.mode, 'popover-wrapper');
return [
<ion-backdrop tappable={this.enableBackdropDismiss}/>,
<ion-backdrop tappable={this.backdropDismiss}/>,
<div class={wrapperClasses}>
<div class="popover-arrow"></div>
<div class="popover-content"></div>

34
core/src/components/popover/readme.md
View File

@@ -16,23 +16,23 @@ To present a popover, call the `present` method on a popover instance. In order
## Properties
| Property | Attribute | Description | Type |
| ----------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `Color` |
| `componentProps` | -- | The data to pass to the popover component. | `ComponentProps` |
| `component` | `component` | The component to display inside of the popover. | `ComponentRef` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
| `delegate` | -- | | `FrameworkDelegate` |
| `enableBackdropDismiss` | `enable-backdrop-dismiss` | If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `enterAnimation` | -- | Animation to use when the popover is presented. | `AnimationBuilder` |
| `event` | -- | The event to pass to the popover animation. | `any` |
| `keyboardClose` | `keyboard-close` | | `boolean` |
| `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `AnimationBuilder` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` |
| `overlayId` | `overlay-id` | | `number` |
| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the popover. Defaults to `true`. | `boolean` |
| `translucent` | `translucent` | If true, the popover will be translucent. Defaults to `false`. | `boolean` |
| `willAnimate` | `will-animate` | If true, the popover will animate. Defaults to `true`. | `boolean` |
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| `backdropDismiss` | `backdrop-dismiss` | If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `Color` |
| `componentProps` | -- | The data to pass to the popover component. | `ComponentProps` |
| `component` | `component` | The component to display inside of the popover. | `ComponentRef` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string | string[]` |
| `delegate` | -- | | `FrameworkDelegate` |
| `enterAnimation` | -- | Animation to use when the popover is presented. | `AnimationBuilder` |
| `event` | -- | The event to pass to the popover animation. | `any` |
| `keyboardClose` | `keyboard-close` | | `boolean` |
| `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `AnimationBuilder` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` |
| `overlayId` | `overlay-id` | | `number` |
| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the popover. Defaults to `true`. | `boolean` |
| `translucent` | `translucent` | If true, the popover will be translucent. Defaults to `false`. | `boolean` |
| `willAnimate` | `will-animate` | If true, the popover will animate. Defaults to `true`. | `boolean` |
## Events