Ionic上拉菜单

Ionic组件由高级构建块制成, 这被称为组件。这些组件使我们能够快速构建应用程序的界面。 Ionic Framework包含许多内置组件, 包括按钮, 模式, 弹出窗口, 列表, 卡片等。在这里, 我们将学习该组件的外观以及如何使用它们。

上拉菜单是一个对话框, 允许我们从一组选项中选择确认还是取消动作。它始终显示在页面上任何其他组件的顶部, 并且必须由用户手动将其关闭才能与该应用进行交互。触发操作表时, 页面的其余部分会变暗, 以使操作表的选项更加集中。

有时, 我们使用操作表代替菜单。但是, 不应将其用于导航。

通过下面的示例, 我们可以了解操作表组件的工作方式。

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()方法还包含几个有用的参数, 我们可以在下表中看到它们。