ion-popover

Contents

Popoverは、現在のページの上部に表示されるダイアログです。これは何にでも使用できますが、通常はナビゲーションバーに収まらないオーバーフローアクションに使用されます。

Creating

Popoverは、Popover Controller を利用して作成します。これらは、popover controllerのcreateメソッドにPopoverのオプションを渡すことでカスタマイズできます。

Presenting

Popoverを表示するには、Popoverインスタンスでpresentメソッドを呼び出します。クリックされた要素を基準にしてpopoverを配置するには、presentメソッドのオプションにclickイベントを渡す必要があります。イベントが渡されない場合、Popoverはビューポートの中央に配置されます。

利用方法

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');

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

export const PopoverExample: React.FunctionComponent = () => {
  const [showPopover, setShowPopover] = useState(false);

  return (
    <>
      <IonPopover
        isOpen={showPopover}
        onDidDismiss={e => setShowPopover(false)}
      >
        <p>This is popover content</p>
      </IonPopover>
      <IonButton onClick={() => setShowPopover(true)}>Show Popover</IonButton>
    </>
  );
};

プロパティ

animated

Description

If true, the popover will animate.

Attributeanimated
Typeboolean
Defaulttrue

backdropDismiss

Description

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

Attributebackdrop-dismiss
Typeboolean
Defaulttrue

component

Description

The component to display inside of the popover.

Attributecomponent
TypeFunction | HTMLElement | null | string

componentProps

Description

The data to pass to the popover component.

Typeundefined | { [key: string]: any; }

cssClass

Description

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

Attributecss-class
Typestring | 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.

Attributeevent
Typeany

keyboardClose

Description

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

Attributekeyboard-close
Typeboolean
Defaulttrue

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.

Attributemode
Type"ios" | "md"

showBackdrop

Description

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

Attributeshow-backdrop
Typeboolean
Defaulttrue

translucent

Description

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

Attributetranslucent
Typeboolean
Defaultfalse

イベント

NameDescription
ionPopoverDidDismissEmitted after the popover has dismissed.
ionPopoverDidPresentEmitted after the popover has presented.
ionPopoverWillDismissEmitted before the popover has dismissed.
ionPopoverWillPresentEmitted before the popover has presented.

メソッド

dismiss

Description

Dismiss the popover overlay after it has been presented.

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

onDidDismiss

Description

Returns a promise that resolves when the popover did dismiss.

SignatureonDidDismiss() => Promise<OverlayEventDetail<any>>

onWillDismiss

Description

Returns a promise that resolves when the popover will dismiss.

SignatureonWillDismiss() => Promise<OverlayEventDetail<any>>

present

Description

Present the popover overlay after it has been created.

Signaturepresent() => Promise<void>

CSSカスタムプロパティ

NameDescription
--backgroundBackground of the popover
--box-shadowBox shadow of the popover
--heightHeight of the popover
--max-heightMaximum height of the popover
--max-widthMaximum width of the popover
--min-heightMinimum height of the popover
--min-widthMinimum width of the popover
--widthWidth of the popover
View Source