ion-action-sheet
Ionic4项目中我们可以使用Ionic4底部弹出框组件ion-action-sheet对项目进行布局。 ion-action-sheet官方文档地址:https://ionicframework.com/docs/api/action-sheetAn Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in ios
mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop.
Creating
An action sheet can be created by the buttons
, with each button including properties for its text
, and optionally a handler
and role
. If a handler returns false
then the action sheet will not be dismissed. An action sheet can also optionally have a title
, subTitle
and an icon
.
Buttons
A button's role
property can either be destructive
or cancel
. Buttons without a role property will have the default look for the platform. Buttons with the cancel
role will always load as the bottom button, no matter where they are in the array. All other buttons will be displayed in the order they have been added to the buttons
array. Note: We recommend that destructive
buttons are always the first button in the array, making them the top button. Additionally, if the action sheet is dismissed by tapping the backdrop, then it will fire the handler from the button with the cancel role.
ion-action-sheet 用法(Usage)
import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular';
@Component({
selector: 'action-sheet-example',
templateUrl: 'action-sheet-example.html',
styleUrls: ['./action-sheet-example.css'],
})
export class ActionSheetExample {
constructor(public actionSheetController: ActionSheetController) {}
async presentActionSheet() {
const actionSheet = await this.actionSheetController.create({
header: 'Albums',
buttons: [{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
icon: 'heart',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]
});
await actionSheet.present();
}
}
async function presentActionSheet() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheet = await actionSheetController.create({
header: "Albums",
buttons: [{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
icon: 'heart',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]
});
await actionSheet.present();
}
import React, { Component } from 'react'
import { IonActionSheet } from '@ionic/react';
type Props = {}
type State = {
showActionSheet: boolean
}
export default class ActionSheetExample extends Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
showActionSheet: false
};
}
render() {
return (
<IonActionSheet
isOpen={this.state.showActionSheet}
onDidDismiss={() => this.setState(() => ({ showActionSheet: false }))}
buttons={[{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
icon: 'heart',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]}
>
</IonActionSheet>
);
}
}
<template>
<IonVuePage :title="'Action Sheet'">
<ion-button @click="presentActionSheet">Show Action Sheetion-button>
IonVuePage>
template>
<script>
export default {
methods: {
presentActionSheet() {
return this.$ionic.actionSheetController
.create({
header: 'Albums',
buttons: [
{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked')
},
},
{
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked')
},
},
{
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
handler: () => {
console.log('Play clicked')
},
},
{
text: 'Favorite',
icon: 'heart',
handler: () => {
console.log('Favorite clicked')
},
},
{
text: 'Cancel',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancel clicked')
},
},
],
})
.then(a => a.present())
},
},
}
script>
ion-action-sheet 属性(Properties)
animated | |
---|---|
Description | If |
Attribute | animated |
Type | boolean |
Default | true |
backdropDismiss | |
Description | If |
Attribute | backdrop-dismiss |
Type | boolean |
Default | true |
buttons | |
Description | An array of buttons for the action sheet. |
Type | (string | ActionSheetButton)[] |
Default | [] |
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 action sheet is presented. |
Type | ((Animation: Animation, baseEl: any, opts?: any) => Promise |
header | |
Description | Title for the action sheet. |
Attribute | header |
Type | string | undefined |
keyboardClose | |
Description | If |
Attribute | keyboard-close |
Type | boolean |
Default | true |
leaveAnimation | |
Description | Animation to use when the action sheet 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" |
subHeader | |
Description | Subtitle for the action sheet. |
Attribute | sub-header |
Type | string | undefined |
translucent | |
Description | If |
Attribute | translucent |
Type | boolean |
Default | false |
ion-action-sheet 事件(Events)
Name | Description |
---|---|
ionActionSheetDidDismiss | Emitted after the alert has dismissed. |
ionActionSheetDidPresent | Emitted after the alert has presented. |
ionActionSheetWillDismiss | Emitted before the alert has dismissed. |
ionActionSheetWillPresent | Emitted before the alert has presented. |
ion-action-sheet 内置方法(Methods)
dismiss | |
---|---|
Description | Dismiss the action sheet overlay after it has been presented. |
Signature | dismiss(data?: any, role?: string | undefined) => Promise |
onDidDismiss | |
Description | Returns a promise that resolves when the action sheet did dismiss. |
Signature | onDidDismiss() => Promise |
onWillDismiss | |
Description | Returns a promise that resolves when the action sheet will dismiss. |
Signature | onWillDismiss() => Promise |
present | |
Description | Present the action sheet overlay after it has been created. |
Signature | present() => Promise |
ion-action-sheet中的CSS 自定义属性
Name | Description |
---|---|
--background | Background of the action sheet group |
--background-activated | Background of the activated action sheet button |
--background-selected | Background of the selected action sheet button |
--color | Color of the action sheet text |
--height | height of the action sheet |
--max-height | Maximum height of the action sheet |
--max-width | Maximum width of the action sheet |
--min-height | Minimum height of the action sheet |
--min-width | Minimum width of the action sheet |
--width | Width of the action sheet |