Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu
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的更多相关文章
- Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件
Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...
- AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别
AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就 ...
- 【shadow dom入UI】web components思想如何应用于实际项目
回顾 经过昨天的优化处理([前端优化之拆分CSS]前端三剑客的分分合合),我们在UI一块做了几个关键动作: ① CSS入UI ② CSS作为组件的一个节点而存在,并且会被“格式化”,即选择器带id前缀 ...
- 小波说雨燕 第三季 构建 swift UI 之 UI组件集-视图集(六)Picker View视图 学习笔记
想对PickerView进行操作,只能在代码中操作. 下面 ,再添加三个label组件,然后将所有组件配置到代码中(看代码),然后要实现对PickerView的操作,就要实现它的DataSource协 ...
- 面向UI编程:ui.js 1.1 使用观察者模式完成组件之间数据流转,彻底分离组件之间的耦合,完成组件的高内聚
开头想明确一些概念,因为有些概念不明确会导致很多问题,比如你写这个框架为什么不去解决啥啥啥的问题,哎,心累. 什么是框架? 百度的解释:框架(Framework)是整个或部分系统的可重用设计,表现为一 ...
- 【转】JSF中的三大核心组件 UI标签的详细介绍和使用举例
JSF提供了大量的UI标签来简化创建视图.这些UI标签类似于ASP.NET中的服务器组件.使用这些标签,可以通过其value,binding,action,actionListener等属性直接绑定到 ...
- 拒绝卡顿——在WPF中使用多线程更新UI
原文:拒绝卡顿--在WPF中使用多线程更新UI 有经验的程序员们都知道:不能在UI线程上进行耗时操作,那样会造成界面卡顿,如下就是一个简单的示例: public partial class MainW ...
- 在Android Studio中进行单元测试和UI测试
本篇教程翻译自Google I/O 2015中关于测试的codelab,掌握科学上网的同学请点击这里阅读:Unit and UI Testing in Android Studio.能力有限,如有翻译 ...
- Qt Creator中增加新的ui文件时报错
原因分析:moc_开头的文件编译过程中没有又一次生成导致. 解决的方法:删除编译产生的build目录.又一次编译就可以. 错误类型截图例如以下: 这个问题的解决.使得能够在不论什么时候都能够在proj ...
随机推荐
- 【OF框架】使用OF框架创建应用项目
开始:准备工作 开发环境已经安装Visual Studio,包含Web开发负载.Python开发负载.NodeJs开发负载 开发环境已经安装Visual Studio Code 开发环境已经安装Nod ...
- Java基本知识点o(1), o(n), o(logn), o(nlogn)的了解
在描述算法复杂度时,经常用到o(1), o(n), o(logn), o(nlogn)来表示对应算法的时间复杂度, 这里进行归纳一下它们代表的含义: 这是算法的时空复杂度的表示.不仅仅用于表示时间复杂 ...
- LeetCode:135. 分发糖果
LeetCode:135. 分发糖果 老师想给孩子们分发糖果,有 N 个孩子站成了一条直线,老师会根据每个孩子的表现,预先给他们评分. 你需要按照以下要求,帮助老师给这些孩子分发糖果: 每个孩子至少分 ...
- tensorflow与numpy的版本兼容性问题
在Python交互式窗口导入tensorflow出现了下面的错误: root@ubuntu:~# python3 Python 3.6.8 (default, Oct 7 2019, 12:59:55 ...
- G1垃圾收集器官方文档透彻解读【官方解读】
在前几次中已经对G1的理论进行了一个比较详细的了解了,对于G1垃圾收集器最权威的解读肯定得上官网,当咱们将官网的理解透了,那基本上网上对于G1的说明其实最终都是来自于官网,所以接下来会详细来解读Ora ...
- 必须知道的String知识点
1.String 类型的概述 Java中String就是Unicode字符序列,例如,字符串"Java\u2122"由5个Unicode字符J.a.v.a和 ™ 组成.不像C/C+ ...
- mysql对子查询的优化改写
重庆SEO:<高性能mysql第三版>提到mysql会将in子查询改写成exists查询(书中基于的mysql版本是5.1.50和5.5) 但是在5.6之后,已经优化成使用半连接查询 SE ...
- node 异步回调 —迭代记录
1.0 开始时node采用了基础的js回调形势 const fs = require('fs'); fs.readFile('./package.json',(err,data) => { i ...
- 51NOD 1452 - 加括号
DP预处理每个区间的值,再枚举括号位置就好了 #include <bits/stdc++.h> using namespace std; typedef long long ll; con ...
- ASCII和Unicode编码的区别
归纳: 编码 大小 支持语言 ASCII 1个字节 英文 Unicode 2个字节(生僻字4个) 所有语言 UTF-8 1-6个字节,英文字母1个字节,汉字3个字节,生僻字4-6个字节 所有语言 具体 ...