Skip to main content
Version: v5

ion-popover

A Popover is a dialog that appears on top of the current page. It can be used for anything, but generally it is used for overflow actions that don't fit in the navigation bar.

Presenting

To present a popover, call the present method on a popover instance. In order to position the popover relative to the element clicked, a click event needs to be passed into the options of the present method. If the event is not passed, the popover will be positioned in the center of the viewport.

Customization

Popover uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a higher specificity selector.

We recommend passing a custom class to cssClass in the create method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. View the Usage section for an example of how to pass a class using cssClass.

/* DOES NOT WORK - not specific enough */
.popover-content {
background: #222;
}

/* Works - pass "my-custom-class" in cssClass to increase specificity */
.my-custom-class .popover-content {
background: #222;
}

Any of the defined CSS Custom Properties can be used to style the Popover without needing to target individual elements:

.my-custom-class {
--background: #222;
}

If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read Style Placement in the Angular section below for more information.

Usage

import { Component } from '@angular/core';
import { PopoverController } from '@ionic/angular';
import { PopoverComponent } from '../../component/popover/popover.component';

@Component({
selector: 'popover-example',
templateUrl: 'popover-example.html',
styleUrls: ['./popover-example.css'],
})
export class PopoverExample {
constructor(public popoverController: PopoverController) {}

async presentPopover(ev: any) {
const popover = await this.popoverController.create({
component: PopoverComponent,
cssClass: 'my-custom-class',
event: ev,
translucent: true,
});
await popover.present();

const { role } = await popover.onDidDismiss();
console.log('onDidDismiss resolved with role', role);
}
}

Style Placement

In Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Popover can be presented from within a page, the ion-popover element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the src/global.scss file or you can register a new global style file by adding to the styles build option in angular.json.

Properties

animated

Descriptiontrueの場合、ポップオーバーはアニメーションを行います。
Attributeanimated
Typeboolean
Defaulttrue

backdropDismiss

Descriptiontrueの場合、バックドロップがクリックされたときにポップオーバーが解除される。
Attributebackdrop-dismiss
Typeboolean
Defaulttrue

component

DescriptionThe component to display inside of the popover.
Attributecomponent
TypeFunction | HTMLElement | null | string
Defaultundefined

componentProps

DescriptionThe data to pass to the popover component.
Attributeundefined
Typeundefined | { [key: string]: any; }
Defaultundefined

cssClass

DescriptionAdditional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
Attributecss-class
Typestring | string[] | undefined
Defaultundefined

enterAnimation

Descriptionポップオーバーが表示されたときに使用するアニメーションです。
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

event

Descriptionポップオーバー・アニメーションに渡すイベントです。
Attributeevent
Typeany
Defaultundefined

htmlAttributes

Descriptionポップオーバーに渡す追加属性。
Attributeundefined
TypePopoverAttributes | undefined
Defaultundefined

keyboardClose

Descriptiontrueの場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。
Attributekeyboard-close
Typeboolean
Defaulttrue

leaveAnimation

Descriptionポップオーバーが解除されたときに使用するアニメーションです。
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

showBackdrop

DescriptionIf true, a backdrop will be displayed behind the popover.
Attributeshow-backdrop
Typeboolean
Defaulttrue

translucent

DescriptionIf true, the popover will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter.
Attributetranslucent
Typeboolean
Defaultfalse

Events

NameDescription
ionPopoverDidDismissポップオーバーが解除された後に発行されます。
ionPopoverDidPresentポップオーバーが表示された後に発行されます。
ionPopoverWillDismissポップオーバーが解除される前に発行されます。
ionPopoverWillPresentポップオーバーが表示される前に発行されます。

Methods

dismiss

Descriptionポップオーバーオーバーレイが提示された後、それを解除します。
Signaturedismiss(data?: any, role?: string | undefined) => Promise<boolean>

onDidDismiss

Descriptionポップオーバーが解除されたタイミングを解決するPromiseを返します。
SignatureonDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>

onWillDismiss

Descriptionポップオーバーが解除されるタイミングを解決するPromiseを返します。
SignatureonWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>

present

DescriptionPresent the popover overlay after it has been created.
Signaturepresent() => Promise<void>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

NameDescription
--backdrop-opacity背景の不透明度
--backgroundポップオーバーの背景
--box-shadowポップオーバーのボックスシャドウ
--heightポップオーバーの高さ
--max-heightポップオーバーの最大の高さ
--max-widthポップオーバーの最大幅
--min-heightポップオーバーの高さの最小値
--min-widthポップオーバーの最小幅
--widthポップオーバーの幅

Slots

No slots available for this component.

View Source