ion-popover

Contents

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.

Creating

Popovers can be created using a Popover Controller. They can be customized by passing popover options in the popover controller's create method.

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 the present method. If the event is not passed, the popover will be positioned in the center of the viewport.

Usage

angular javascript react 
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,
      event: ev,
      translucent: true
    });
    return await popover.present();
  }
}
async function presentPopover(ev) {
  const popoverController = document.querySelector('ion-popover-controller');
  await popoverController.componentOnReady();

  const popover = await popoverController.create({
    component: 'popover-example-page',
    event: ev,
    translucent: true
  });
  return await popover.present();
}
import React, { Component } from 'react'
import { IonPopover } from '@ionic/react';

type Props = {}
type State = {
  showPopover: boolean
}

export class PopoverExample extends Component<Props, State> {

  constructor(props: Props) {
    super(props);
    this.state = {
      showPopover: false
    };
  }

  render() {
    return (
      <IonPopover
        isOpen={this.state.showPopover}
        onDidDismiss={() => this.setState(() => ({ showPopover: false }))}
      >
        <p>This is popover content</p>
      </IonPopover>
    );
  }
}

Properties

animated

Description

If true, the popover will animate.

Attribute animated
Type boolean
Default true

backdropDismiss

Description

If true, the popover will be dismissed when the backdrop is clicked.

Attribute backdrop-dismiss
Type boolean
Default true

component

Description

The component to display inside of the popover.

Attribute component
Type Function | HTMLElement | null | string

componentProps

Description

The data to pass to the popover component.

Type undefined | { [key: string]: any; }

cssClass

Description

Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.

Attribute css-class
Type string | string[] | undefined

enterAnimation

Description

Animation to use when the popover is presented.

Type ((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined

event

Description

The event to pass to the popover animation.

Attribute event
Type any

keyboardClose

Description

If true, the keyboard will be automatically dismissed when the overlay is presented.

Attribute keyboard-close
Type boolean
Default true

leaveAnimation

Description

Animation to use when the popover is dismissed.

Type ((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined

mode

Description

The mode determines which platform styles to use.

Attribute mode
Type "ios" | "md"

showBackdrop

Description

If true, a backdrop will be displayed behind the popover.

Attribute show-backdrop
Type boolean
Default true

translucent

Description

If true, the popover will be translucent.

Attribute translucent
Type boolean
Default false

Events

Name Description
ionPopoverDidDismiss Emitted after the popover has dismissed.
ionPopoverDidPresent Emitted after the popover has presented.
ionPopoverWillDismiss Emitted before the popover has dismissed.
ionPopoverWillPresent Emitted before the popover has presented.

Methods

dismiss

Description

Dismiss the popover overlay after it has been presented.

Signature dismiss(data?: any, role?: string | undefined) => Promise<boolean>

onDidDismiss

Description

Returns a promise that resolves when the popover did dismiss.

Signature onDidDismiss() => Promise<OverlayEventDetail<any>>

onWillDismiss

Description

Returns a promise that resolves when the popover will dismiss.

Signature onWillDismiss() => Promise<OverlayEventDetail<any>>

present

Description

Present the popover overlay after it has been created.

Signature present() => Promise<void>

CSS Custom Properties

Name Description
--background Background of the popover
--box-shadow Box shadow of the popover
--height Height of the popover
--max-height Maximum height of the popover
--max-width Maximum width of the popover
--min-height Minimum height of the popover
--min-width Minimum width of the popover
--width Width of the popover