Ionic上拉菜单 _Ionic上拉菜单

Ionic组件由高级构建块制成, 这被称为组件。这些组件使我们能够快速构建应用程序的界面。 Ionic Framework包含许多内置组件, 包括按钮, 模式, 弹出窗口, 列表, 卡片等。在这里, 我们将学习该组件的外观以及如何使用它们。
【Ionic上拉菜单】上拉菜单是一个对话框, 允许我们从一组选项中选择确认还是取消动作。它始终显示在页面上任何其他组件的顶部, 并且必须由用户手动将其关闭才能与该应用进行交互。触发操作表时, 页面的其余部分会变暗, 以使操作表的选项更加集中。
有时, 我们使用操作表代替菜单。但是, 不应将其用于导航。
通过下面的示例, 我们可以了解操作表组件的工作方式。
home.page.ts
这是Ionic应用程序的主页, 负责用户界面。在这里, 我们正在创建一个菜单, 其中包含破坏性, 归档和取消元素。

import { Component } from '@angular/core'; import {ActionSheetController } from '@ionic/angular'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { constructor( public actionsheetCtrl: ActionSheetController ) { }async openMenu() { const actionSheet = await this.actionsheetCtrl.create({ header: 'Modify your album', buttons: [ { text: 'Destructive', role: 'destructive', handler: () => { console.log('Destructive clicked'); } }, { text: 'Archive', handler: () => { console.log('Archive clicked'); } }, { text: 'Cancel', role: 'cancel', handler: () => { console.log('Cancel clicked'); } } ] }); await actionSheet.present(); } }

home.page.html
此HTML页面负责设计（外观）你的主页。它还包含对HTML元素（如button元素）的操作。

< ion-header> < ion-toolbar> < ion-title> Action Sheets < /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="ion-padding" class="action-sheets-home-page"> < button ion-button block (click)="openMenu()"> Show Action Sheet < /button> < /ion-content>

home.page.scss
这是CSS文件, 其中包含HTML元素上的其他样式。

.action-sheet-home-page { .ion-md-share { color: #ED4248; } .ion-md-arrow-dropright-circle { color: #508AE4; } .ion-md-heart-outline { color: #31D55F; } .action-sheet-cancel ion-icon, .action-sheet-destructive ion-icon { color: #757575; } }

输出量
现在, 通过以下命令在终端上执行该应用程序。

$ ionic serve

它的输出如下屏幕所示。现在, 如果你使用IDE, 并且修改或更改了代码中的任何内容, 则在修改后, 一旦保存文件, 浏览器就会自动重新加载你的应用程序。

文章图片
现在, 单击“显示操作表”按钮, 屏幕上将显示以下输出。触发操作表时, 页面的其余部分会变暗, 以使操作表的选项更加集中。

文章图片
$ ionicActionSheet.show()方法还包含几个有用的参数, 我们可以在下表中看到它们。

物产	类型	说明
buttons	Object	它使用文本字段创建按钮对象。
titleText	String	它设置操作表的标题。
cancelText	String	设置取消按钮的文本。
destructiveText	String	它设置破坏性按钮的文本。
cancel	Function	当按下取消按钮, 背景按钮或硬件后退按钮时, 将调用该按钮。
buttonClicked	Function	轻按其中一个按钮时将调用它。在此, 索引用于跟踪点击了哪个按钮。如果返回true, 则将关闭操作表。
destructiveButtonClicked	Function	单击破坏性按钮时调用。如果返回true, 则将关闭操作表。
cancelOnStateChange	boolean	默认情况下为true, 更改导航状态时将取消操作表。