ion-popover
Ionic4项目中我们可以使用Ionic4弹出框组件ion-popover对项目进行布局。 ion-popover官方文档地址:https://ionicframework.com/docs/api/popoverA 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
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.
ion-popover 用法(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,
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 contentp>
IonPopover>
);
}
}
ion-popover 属性(Properties)
animated | |
---|---|
Description | If |
Attribute | animated |
Type | boolean |
Default | true |
backdropDismiss | |
Description | If |
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 |
event | |
Description | The event to pass to the popover animation. |
Attribute | event |
Type | any |
keyboardClose | |
Description | If |
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 |
mode | |
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
showBackdrop | |
Description | If |
Attribute | show-backdrop |
Type | boolean |
Default | true |
translucent | |
Description | If |
Attribute | translucent |
Type | boolean |
Default | false |
ion-popover 事件(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. |
ion-popover 内置方法(Methods)
dismiss | |
---|---|
Description | Dismiss the popover overlay after it has been presented. |
Signature | dismiss(data?: any, role?: string | undefined) => Promise |
onDidDismiss | |
Description | Returns a promise that resolves when the popover did dismiss. |
Signature | onDidDismiss() => Promise |
onWillDismiss | |
Description | Returns a promise that resolves when the popover will dismiss. |
Signature | onWillDismiss() => Promise |
present | |
Description | Present the popover overlay after it has been created. |
Signature | present() => Promise |
ion-popover中的CSS 自定义属性
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 |