1、侧边栏 ion-menu 组件的基本使用

1、创建项目

ionic start myApp sidemenu

2、配置项目

属性

作用

可选值

side

配置侧边栏的位置

start end

menuId

侧边栏的唯一标识

 

type

配置侧边栏的弹出方式

overlay, reveal, push

swipe-gesture

滑动弹出侧边栏

true false

<ion-menu side="start" menuId="first"> <ion-header>
<ion-toolbar color="primary"> <ion-title>Start Menu</ion-title>
</ion-toolbar> </ion-header> <ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false">
<ion-item [routerDirection]="'root'" [routerLink]="['/button']"> 这是一个列表</ion-item> </ion-menu-toggle>
<ion-menu-toggle auto-hide="false">
<ion-item [routerDirection]="'root'" [routerLink]="['/button']"> 这是一个列表</ion-item> </ion-menu-toggle>
</ion-list> </ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>

<ion-app>

  <ion-menu side="start" menuId="first" type="overlay">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list> <ion-menu-toggle> <ion-item>Menu Item1111</ion-item> </ion-menu-toggle> <ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item> </ion-list>
</ion-content>
</ion-menu> <ion-menu side="end" menuId="end1" type="push">
<ion-header>
<ion-toolbar color="success">
<ion-title>右侧侧边栏</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
</ion-list>
</ion-content>
</ion-menu> <ion-router-outlet main></ion-router-outlet> </ion-app>

2、侧边栏 ion-menu 中的事件和方法

Ionic4.x 中允许我们用 js 控制侧边栏,具体步骤如下。

1、给 ion-menu 定义 menuId 属性

 <ion-menu side="start" menuId="first"> </ion-menu>

2、控制菜单的页面中引入下面代码:

import { MenuController } from '@ionic/angular';

3、初始化构造函数

constructor(private menu: MenuController) { }

4、对应方法中通过 js 控制侧边栏

doOPenMenu() { this.menu.open('first');
}

3、底部 tabs 结合侧边栏 ion-menu

找到 app.component.html 在页面中加入下面代码

<ion-app>
<ion-menu swipe-gesture=true type="overlay" menuId="first" > <ion-header>
<ion-toolbar> <ion-title>菜单</ion-title>
</ion-toolbar> </ion-header> <ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false">
<ion-item [routerDirection]="'root'" [routerLink]="['/button']"> 这是一个列表 </ion-item></ion-menu-toggle>
</ion-list> </ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-app>

Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu的更多相关文章

  1. Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件

    Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...

  2. AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别

    AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就 ...

  3. 【shadow dom入UI】web components思想如何应用于实际项目

    回顾 经过昨天的优化处理([前端优化之拆分CSS]前端三剑客的分分合合),我们在UI一块做了几个关键动作: ① CSS入UI ② CSS作为组件的一个节点而存在,并且会被“格式化”,即选择器带id前缀 ...

  4. 小波说雨燕 第三季 构建 swift UI 之 UI组件集-视图集(六)Picker View视图 学习笔记

    想对PickerView进行操作,只能在代码中操作. 下面 ,再添加三个label组件,然后将所有组件配置到代码中(看代码),然后要实现对PickerView的操作,就要实现它的DataSource协 ...

  5. 面向UI编程:ui.js 1.1 使用观察者模式完成组件之间数据流转,彻底分离组件之间的耦合,完成组件的高内聚

    开头想明确一些概念,因为有些概念不明确会导致很多问题,比如你写这个框架为什么不去解决啥啥啥的问题,哎,心累. 什么是框架? 百度的解释:框架(Framework)是整个或部分系统的可重用设计,表现为一 ...

  6. 【转】JSF中的三大核心组件 UI标签的详细介绍和使用举例

    JSF提供了大量的UI标签来简化创建视图.这些UI标签类似于ASP.NET中的服务器组件.使用这些标签,可以通过其value,binding,action,actionListener等属性直接绑定到 ...

  7. 拒绝卡顿——在WPF中使用多线程更新UI

    原文:拒绝卡顿--在WPF中使用多线程更新UI 有经验的程序员们都知道:不能在UI线程上进行耗时操作,那样会造成界面卡顿,如下就是一个简单的示例: public partial class MainW ...

  8. 在Android Studio中进行单元测试和UI测试

    本篇教程翻译自Google I/O 2015中关于测试的codelab,掌握科学上网的同学请点击这里阅读:Unit and UI Testing in Android Studio.能力有限,如有翻译 ...

  9. Qt Creator中增加新的ui文件时报错

    原因分析:moc_开头的文件编译过程中没有又一次生成导致. 解决的方法:删除编译产生的build目录.又一次编译就可以. 错误类型截图例如以下: 这个问题的解决.使得能够在不论什么时候都能够在proj ...

随机推荐

  1. 【OF框架】使用OF框架创建应用项目

    开始:准备工作 开发环境已经安装Visual Studio,包含Web开发负载.Python开发负载.NodeJs开发负载 开发环境已经安装Visual Studio Code 开发环境已经安装Nod ...

  2. Java基本知识点o(1), o(n), o(logn), o(nlogn)的了解

    在描述算法复杂度时,经常用到o(1), o(n), o(logn), o(nlogn)来表示对应算法的时间复杂度, 这里进行归纳一下它们代表的含义: 这是算法的时空复杂度的表示.不仅仅用于表示时间复杂 ...

  3. LeetCode:135. 分发糖果

    LeetCode:135. 分发糖果 老师想给孩子们分发糖果,有 N 个孩子站成了一条直线,老师会根据每个孩子的表现,预先给他们评分. 你需要按照以下要求,帮助老师给这些孩子分发糖果: 每个孩子至少分 ...

  4. tensorflow与numpy的版本兼容性问题

    在Python交互式窗口导入tensorflow出现了下面的错误: root@ubuntu:~# python3 Python 3.6.8 (default, Oct 7 2019, 12:59:55 ...

  5. G1垃圾收集器官方文档透彻解读【官方解读】

    在前几次中已经对G1的理论进行了一个比较详细的了解了,对于G1垃圾收集器最权威的解读肯定得上官网,当咱们将官网的理解透了,那基本上网上对于G1的说明其实最终都是来自于官网,所以接下来会详细来解读Ora ...

  6. 必须知道的String知识点

    1.String 类型的概述 Java中String就是Unicode字符序列,例如,字符串"Java\u2122"由5个Unicode字符J.a.v.a和 ™ 组成.不像C/C+ ...

  7. mysql对子查询的优化改写

    重庆SEO:<高性能mysql第三版>提到mysql会将in子查询改写成exists查询(书中基于的mysql版本是5.1.50和5.5) 但是在5.6之后,已经优化成使用半连接查询 SE ...

  8. node 异步回调 —迭代记录

    1.0  开始时node采用了基础的js回调形势 const fs = require('fs'); fs.readFile('./package.json',(err,data) => { i ...

  9. 51NOD 1452 - 加括号

    DP预处理每个区间的值,再枚举括号位置就好了 #include <bits/stdc++.h> using namespace std; typedef long long ll; con ...

  10. ASCII和Unicode编码的区别

    归纳: 编码 大小 支持语言 ASCII 1个字节 英文 Unicode 2个字节(生僻字4个) 所有语言 UTF-8 1-6个字节,英文字母1个字节,汉字3个字节,生僻字4-6个字节 所有语言 具体 ...