Ionic 菜单

菜单组件是使用最多的 Ionic 组件。它是一个导航抽屉，从当前视图的侧面向左或向右滑动。 默认情况下，它从当前视图的左侧滑入，但您也可以向右滑动它。 菜单可以根据模式以不同的方式显示。 但是，它可以更改为任何可用的菜单类型。 您可以将任意数量的菜单附加到内容元素。

Ionic 使用标准的 <ion-menu> 组件，使您可以轻松创建侧边菜单进行导航。 菜单组件可以通过 模板控制，也可以通过使用 MenuController 以编程方式控制。 当菜单关闭时，菜单内容将被隐藏。

菜单组件包含以下元素

菜单按钮： 它是一个组件，可以自动创建图标和功能以打开页面上的菜单。

菜单控制器： 它用于控制菜单。 它提供了显示菜单、启用菜单、切换菜单等方法。 它将通过边或 ID 获取对菜单的引用。 如果既没有边也没有 ID 传递给它，它将抓取它找到的第一个菜单。

菜单切换： 它用于切换菜单的打开或关闭。 仅当所选菜单处于活动状态时才可见。 菜单在打开或关闭时处于活动状态。 如果菜单被禁用或显示为拆分窗格，则它将被标记为非活动状态，并且 <ion-menu-toggle> 元素会隐藏自身。

拆分窗格： 当您想要创建多视图布局时，它很有用。 它允许 UI 元素随着视口的宽度增加而显示。 如果设备的屏幕宽度很小，则拆分窗格将折叠，并且菜单将被隐藏。 它是将在浏览器中提供并通过应用商店部署到手机和平板电脑的应用的理想选择。

创建菜单

让我们看看如何在 Ionic 中创建侧边菜单。

步骤 1： 首先，创建一个空白的 Ionic 项目。 默认情况下，此项目仅包含一个页面，即主页。 现在，我们将创建另外两个页面，这使得使用侧边菜单导航到其他页面变得容易。 以下命令在您的 Ionic 应用中创建页面。

步骤 2： 接下来，转到根组件，即 app.component.ts。 然后，创建一个函数 sideMenu()，其中包含一个对象数组。 对象数组包括项目中的不同页面。 它还包含每个页面的图标和 URL。 现在，包含以下代码片段。

步骤 3： 接下来，我们需要在 app.component.html 文件中添加 <ion-menu> 组件以创建侧边菜单。 在此 HTML 文件中添加以下代码片段。

在上面的代码片段中，<ion-menu> with side= "start" 将创建一个从左到右开始的侧边菜单。 它还包含 contentId 属性，它是菜单的 Id。

行 <ion-item [routerLink]="pages.url" routerDirection="forward"> 其中 routerLink 允许导航到指定的 url，而 outerDirection 确定页面更改时发生的动画。

<ion-menu-toggle> 组件用于打开和关闭侧边菜单。 因此，当您单击菜单时，它将自动关闭侧边菜单。

步骤 4： 在根组件中创建侧边菜单后，我们可以在每个页面中打开或关闭它。 为此，我们需要在每个页面的 html 中使用 <ion-menu-button> 组件，它能够在每个页面上创建图标和功能以打开菜单

步骤 5： 现在，在您的终端中执行 Ionic 项目。 它将给出以下输出。

如果您单击屏幕左上角的三个蓝色线条菜单按钮，它将给出以下输出。

下表显示了 Ionic 菜单组件中使用的重要方法。