ion-modal
Ionic4项目中我们可以使用Ionic4模态框组件ion-modal对项目进行布局。 ion-modal官方文档地址:https://ionicframework.com/docs/api/modalA Modal is a dialog that appears on top of the app's content, and must be dismissed by the app before interaction can resume. It is useful as a select component when there are a lot of options to choose from, or when filtering items in a list, as well as many other use cases.
Creating
Modals can be created using a
Passing parameters
When a modal is created, parameters might be passed to the newly created modal:
// Create a modal using MyModalComponent with some initial data
const modal = await modalController.create({
component: MyModalComponent,
componentProps: {
'prop1': value,
'prop2': value2
}
});
Under the hood, the controller creates a new ion-modal
and attaches the specified component to it.
It also assigns the specified componentProps
to the component's instance:
// pseudo-code
const instance = create(MyModalComponent);
instance.prop1 = value;
instance.prop2 = value2;
This way, your component can access the passed params, check the "ion-modal 用法(Usage)" section for further code example for each frameworks.
Returning data
Modals can also return data back to the controller when they are dismissed.
const modal = await modalController.create({...});
const { data } = await modal.onDidDismiss();
console.log(data);
// Dismiss the top modal returning some data object
modalController.dismiss({
'result': value
})
ion-modal 用法(Usage)
import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage } from '../modal/modal.page';
@Component({
selector: 'modal-example',
templateUrl: 'modal-example.html',
styleUrls: ['./modal-example.css']
})
export class ModalExample {
constructor(public modalController: ModalController) {}
async presentModal() {
const modal = await this.modalController.create({
component: ModalPage,
componentProps: { value: 123 }
});
return await modal.present();
}
}
import { Component, Input } from '@angular/core';
import { NavParams } from '@ionic/angular';
@Component({
selector: 'modal-page',
})
export class ModalExample {
// "value" passed in componentProps
@Input() value: number;
constructor(navParams: NavParams) {
// componentProps can also be accessed at construction time using NavParams
}
}
Lazy Loading
When lazy loading a modal, it's important to note that the modal will not be loaded when it is opened, but rather when the module that imports the modal's module is loaded.
For example, say there exists a CalendarComponent
and an EventModal
. The modal is presented by clicking a button in the CalendarComponent
. In Angular, the EventModalModule
would need to be included in the CalendarComponentModule
since the modal is created in the CalendarComponent
:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { CalendarComponent } from './calendar.component';
import { EventModalModule } from '../modals/event/event.module';
@NgModule({
declarations: [
CalendarComponent
],
imports: [
IonicModule,
CommonModule,
EventModalModule
],
exports: [
CalendarComponent
]
})
export class CalendarComponentModule {}
<body>
<ion-modal-controller>ion-modal-controller>
body>
customElements.define('modal-page', class extends HTMLElement {
connectedCallback() {
this.innerHTML = `
Super Modal
Content
`;
}
});
async function presentModal() {
// initialize controller
const modalController = document.querySelector('ion-modal-controller');
await modalController.componentOnReady();
// present the modal
const modalElement = await modalController.create({
component: 'modal-page'
});
await modalElement.present();
}
import React, { Component } from 'react'
import { IonModal } from '@ionic/react';
type Props = {}
type State = {
showModal: boolean
}
export class ModalExample extends Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
showModal: false
};
}
render() {
return (
<IonModal
isOpen={this.state.showModal}
onDidDismiss={() => this.setState(() => ({ showModal: false }))}
>
<p>This is modal contentp>
<IonButton onClick={() => this.setState(() => ({ showModal: false }))}>
Close Modal
IonButton>
IonModal>
);
}
}
<template>
<div>
<ion-header>
<ion-toolbar>
<ion-title>{{ title }}ion-title>
ion-toolbar>
ion-header>
<ion-content padding>
{{ content }}
ion-content>
div>
template>
<script>
export default {
name: 'Modal',
props: {
title: { type: String, default: 'Super Modal' },
},
data() {
return {
content: 'Content',
}
},
}
script>
<template>
<ion-page class="ion-page" main>
<ion-content class="ion-content" padding>
<ion-button @click="openModal">Open Modalion-button>
ion-content>
ion-page>
template>
<script>
import Modal from './modal.vue'
export default {
methods: {
openModal() {
return this.$ionic.modalController
.create({
component: Modal,
componentProps: {
data: {
content: 'New Content',
},
propsData: {
title: 'New title',
},
},
})
.then(m => m.present())
},
},
}
script>
ion-modal 属性(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 modal. |
Attribute | component |
Type | Function | HTMLElement | null | string |
componentProps | |
Description | The data to pass to the modal 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 modal is presented. |
Type | ((Animation: Animation, baseEl: any, opts?: any) => Promise |
keyboardClose | |
Description | If |
Attribute | keyboard-close |
Type | boolean |
Default | true |
leaveAnimation | |
Description | Animation to use when the modal 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 |
ion-modal 事件(Events)
Name | Description |
---|---|
ionModalDidDismiss | Emitted after the modal has dismissed. |
ionModalDidPresent | Emitted after the modal has presented. |
ionModalWillDismiss | Emitted before the modal has dismissed. |
ionModalWillPresent | Emitted before the modal has presented. |
ion-modal 内置方法(Methods)
dismiss | |
---|---|
Description | Dismiss the modal overlay after it has been presented. |
Signature | dismiss(data?: any, role?: string | undefined) => Promise |
onDidDismiss | |
Description | Returns a promise that resolves when the modal did dismiss. |
Signature | onDidDismiss() => Promise |
onWillDismiss | |
Description | Returns a promise that resolves when the modal will dismiss. |
Signature | onWillDismiss() => Promise |
present | |
Description | Present the modal overlay after it has been created. |
Signature | present() => Promise |
ion-modal中的CSS 自定义属性
Name | Description |
---|---|
--background | Background of the modal content |
--border-color | Border color of the modal content |
--border-radius | Border radius of the modal content |
--border-style | Border style of the modal content |
--border-width | Border width of the modal content |
--height | Height of the modal |
--max-height | Maximum height of the modal |
--max-width | Maximum width of the modal |
--min-height | Minimum height of the modal |
--min-width | Minimum width of the modal |
--width | Width of the modal |