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, 并且修改或更改了代码中的任何内容, 则在修改后, 一旦保存文件, 浏览器就会自动重新加载你的应用程序。
Ionic上拉菜单

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

文章图片
$ ionicActionSheet.show()方法还包含几个有用的参数, 我们可以在下表中看到它们。
物产 类型 说明
buttons Object 它使用文本字段创建按钮对象。
titleText String 它设置操作表的标题。
cancelText String 设置取消按钮的文本。
destructiveText String 它设置破坏性按钮的文本。
cancel Function 当按下取消按钮, 背景按钮或硬件后退按钮时, 将调用该按钮。
buttonClicked Function 轻按其中一个按钮时将调用它。在此, 索引用于跟踪点击了哪个按钮。如果返回true, 则将关闭操作表。
destructiveButtonClicked Function 单击破坏性按钮时调用。如果返回true, 则将关闭操作表。
cancelOnStateChange boolean 默认情况下为true, 更改导航状态时将取消操作表。

    推荐阅读