Material使用01 侧边栏MdSidenavModule、工具栏MdTollbarModule
前提准备:
构建好一个Angular2应用
熟悉CSS的flex布局风格
1 利用flex进行布局
1.1 创建三个组件
app-header app-main app-footer
1.2 在主组件中编写大体结构代码
<div class="site">
<header>
<app-header></app-header> <!-- 页眉组件 -->
</header>
<main>
<app-main></app-main> <!-- 内容组件 -->
</main>
<footer>
<app-footer></app-footer> <!-- 页脚组件 -->
</footer>
</div>
1.3 在全局样式中编写代码实现flex风格布局
/* You can add global styles to this file, and also import other style files */ @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; // 导入material的内建主体 html, body, app-root, md-sidenav-container, .site {
width: 100%;
height: 100%;
margin: 0;
} .site {
display: flex;
flex-direction: column;
} header {
background-color: skyblue; } main {
background-color: grey;
flex: 1;
} footer {
background-color: skyblue;
}
1.3 布局效果如下
2 利用MdSidenavModule快速构建侧边栏
2.1 下载相关的依赖包
cnpm i --save @angular/material@2.0.0-beta.7
技巧01:使用 materil 时需要将material的主题引入到全局样式中,引入全局样式有两种方式
方式一:在 styles.scss 中通过 @import 引入,例如
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
方式二:在 .angular-cli.json 文件中为styles添加元素
参考博文:点击前往
2.2 在主模块中引入MdSidenavModule模块
import { MdSidenavModule } from '@angular/material';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { MdSidenavModule } from '@angular/material'; import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { HeaderComponent } from './frame/header/header.component';
import { MainComponent } from './frame/main/main.component';
import { FooterComponent } from './frame/footer/footer.component';
import { SidebarComponent } from './frame/sidebar/sidebar.component'; @NgModule({
declarations: [
AppComponent,
TestComponent,
HeaderComponent,
MainComponent,
FooterComponent,
SidebarComponent
],
imports: [
BrowserModule,
MdSidenavModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
主模块
2.3 在主组件中利用MdSidenavModule提供的组件进行侧边栏的构建
<md-sidenav-container>
<md-sidenav #sidenav>
<app-sidebar></app-sidebar>
</md-sidenav> <div class="site">
<header>
<app-header></app-header>
</header>
<main>
<button (click)="sidenav.open()">点击划出</button>
<app-main></app-main>
</main>
<footer>
<app-footer></app-footer>
</footer>
</div>
</md-sidenav-container>
2.4 具体效果如下
点击按钮后划出侧边栏的效果如下:
4 md-sidenav组件属性详解
4.1 mode属性:设置侧边栏弹出的效果
over -> 覆盖(默认)
side -> 推挤
push -> 覆盖 + 推挤
效果如下:
4.2 align属性:设置侧边栏的位置
start -> 左边(默认)
end -> 右边
效果如下:
4.3 注意:material最多只支持两个侧边栏
<md-sidenav-container>
<md-sidenav #sidenav1 mode=push align=start> <!-- 左边的侧边栏 -->
<app-sidebar></app-sidebar>
</md-sidenav>
<md-sidenav #sidenav2 mode=push align=end> <!-- 右边的侧边栏 -->
<app-sidebar></app-sidebar>
</md-sidenav>
<div class="site">
<header>
<app-header></app-header> <!-- 页眉组件 -->
</header>
<main>
<button (click)=sidenav1.open()>点击划出左侧边栏</button>
<button (click)=sidenav2.open()>点击划出右侧边栏</button>
<app-main></app-main> <!-- 内容组件 -->
</main>
<footer>
<app-footer></app-footer> <!-- 页脚组件 -->
</footer>
</div>
</md-sidenav-container>
4.4 相关方法
open -> 打开侧边栏
toggle -> 打开、关闭
<md-sidenav-container>
<md-sidenav #sidenav1 mode=side align=start> <!-- 左边的侧边栏 -->
<app-sidebar></app-sidebar>
</md-sidenav>
<md-sidenav #sidenav2 mode=side align=end> <!-- 右边的侧边栏 -->
<app-sidebar></app-sidebar>
</md-sidenav>
<div class="site">
<header>
<app-header></app-header> <!-- 页眉组件 -->
</header>
<main>
<button (click)=sidenav1.toggle()>toggle划出关闭左侧边栏</button>
<button (click)=sidenav2.open()>open划出右侧边栏</button>
<app-main></app-main> <!-- 内容组件 -->
</main>
<footer>
<app-footer></app-footer> <!-- 页脚组件 -->
</footer>
</div>
</md-sidenav-container>
5 利用MdToolbarModule对页眉和页脚进行重构
5.1 清除主组件中对页眉和页脚的样式
/* You can add global styles to this file, and also import other style files */ @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; // 导入material的内建主体 html, body, app-root, md-sidenav-container, .site {
width: 100%;
height: 100%;
margin: 0;
} .site {
display: flex;
flex-direction: column;
} header {
// background-color: skyblue; } main {
background-color: grey;
flex: 1;
} footer {
// background-color: skyblue;
} .fill-remaining-space { // flex项目自动填充多余空间
flex: 1 1 auto;
}
5.2 在需要用到的模块中导入MdToolbarModule模块
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { MdSidenavModule, MdToolbarModule } from '@angular/material'; import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { HeaderComponent } from './frame/header/header.component';
import { MainComponent } from './frame/main/main.component';
import { FooterComponent } from './frame/footer/footer.component';
import { SidebarComponent } from './frame/sidebar/sidebar.component'; @NgModule({
declarations: [
AppComponent,
TestComponent,
HeaderComponent,
MainComponent,
FooterComponent,
SidebarComponent
],
imports: [
BrowserModule,
MdSidenavModule,
MdToolbarModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
5.3 利用md-toolbar组件重构页眉和页脚组件中的内容
md-toolbar组件是一个flex容器,可以直接使用flex容器相关的属性
技巧01:md-toolbar会自动在其内部添加一个div元素,这个div元素才是一个flex容器,从源码中可以看出
md-toolbar的color属性:设置白md-toolbar的颜色
primary -> 主色
accent -> 副色
warn -> 警告色
技巧:主色和副色是在主题中设置的
material主题色显示:点击前往
<md-toolbar color=primary>
<button (click)="openSidebar()">菜单</button>
<span>企业协作平台</span>
</md-toolbar>
重构页眉组件
<md-toolbar color=primary>
<span class="fill-remaining-space"></span>
<span>© 庠序科技</span>
<span class="fill-remaining-space"></span>
</md-toolbar>
重构页脚组件
效果图如下:
5.4 代码解释01
<md-toolbar color=primary>
<span class="fill-remaining-space"></span>
<span>© 庠序科技</span>
<span class="fill-remaining-space"></span>
</md-toolbar>
md-toolbar中的三个span元素都是flex项目,其中第一个和第三个span元素由于使用了fill-remaining-space类,所以他们两个元素会将剩余的空间进行平均分配
fill-remaining-space对应的代码如下:
.fill-remaining-space { // flex项目自动填充多余空间
flex: 1 1 auto;
}
flex布局相关:点击前往
flex布局实战:点击前往
5.5 代码解释02
<md-toolbar color=primary>
<span class="fill-remaining-space"></span>
<span>© 庠序科技</span>
<span class="fill-remaining-space"></span>
<md-toolbar-row>
<span class="fill-remaining-space"></span>
<span>重庆市沙坪坝区三峡广场</span>
<span class="fill-remaining-space"></span>
</md-toolbar-row>
</md-toolbar>
md-toolbar可以支持多行,其中每个md-toolbar-row就是单独的一行,而且md-toolbar-row也是一个flex容器用法和md-toolbar相同
具体效果如下:
5.6 应用代码完善
5.6.1 为页眉组件添加方法使得在点击按钮时会触发相应的处理逻辑
import { Component, OnInit, Output, EventEmitter } from '@angular/core'; @Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
@Output()
toggle = new EventEmitter<void>(); constructor() { } ngOnInit() {
} openSidebar() {
this.toggle.emit();
} }
5.6.2 在使用页眉组件的父组件中编写应用页眉组件
<md-sidenav-container>
<md-sidenav #sidenav1 mode=side align=start> <!-- 左边的侧边栏 -->
<app-sidebar></app-sidebar>
</md-sidenav>
<md-sidenav #sidenav2 mode=push align=end> <!-- 右边的侧边栏 -->
<app-sidebar></app-sidebar>
</md-sidenav>
<div class="site">
<header>
<app-header (toggle)="sidenav1.toggle()"></app-header> <!-- 页眉组件 -->
</header>
<main>
<!-- <button (click)=sidenav1.toggle()>toggle划出关闭左侧边栏</button> -->
<button (click)=sidenav2.open()>open划出右侧边栏</button>
<app-main></app-main> <!-- 内容组件 -->
</main>
<footer>
<app-footer></app-footer> <!-- 页脚组件 -->
</footer>
</div>
</md-sidenav-container>
效果如下:
Material使用01 侧边栏MdSidenavModule、工具栏MdTollbarModule的更多相关文章
- 将项目添加到Finder侧边栏和工具栏
转: http://www.cnblogs.com/wormday/archive/2011/05/08/2039468.html 1.在侧边栏和工具栏右键,有相应的设置选项 2.可以将项目拖到侧边栏 ...
- Material使用03 MdCardModule模块、MdInputModule模块
需求:先需要增加一个登录模块 1 创建登录模块 ng g m testLogin 1.1 将共享模块导入到登录模块中 import { NgModule } from '@angular/core'; ...
- 20201203-6 设置excel样式【】
1-1 1 import os 2 from openpyxl import load_workbook 3 from openpyxl.styles import PatternFill, Alig ...
- 2015最流行的Android组件、工具、框架大全
Android 是目前最流行的移动操作系统之一. 随着新版本的不断发布, Android的功能也日益强大, 涌现了很多流行的应用程序, 也催生了一大批的优秀的组件. 本文试图将目前流行的组件收集起来以 ...
- 教你如何---构建良好的windows程序(初学者必看)
一使用菜单栏和工具栏 1.菜单栏和工具栏有什么作用和优点: 通过菜单栏把应用程序的功能进行分组,能够方便用户查找和使用,下图所示的菜单栏包含的每一项都是顶层菜单项,顶层菜单项下的选项称为”子菜单”或” ...
- 2015年十大热门Android开源新项目
2015年十大热门Android开源新项目 2015 即将结束,又到了大家喜闻乐见的年终盘点时刻啦,今天给大家盘点一下 2015 年 Android 开发领域新出现的 10 大热门开源项目.数据来自于 ...
- Niagara workbench 介绍文档---翻译
一. 发现在建立station的时候存在一些问题,所以对技术文档部分做一个详细的了解,在这之前对出现的问题总结一下 1. 在 Windows操作系统中Application Direction中可以 ...
- 【小超_Android】2015最流行的android组件、工具、框架大全(兴许)
2015.07.07 FlyRefresh 创意Replace的Android实现,非常cool. fab-toolbar Material Design风格的FAB工具栏效果 MaterialVie ...
- idea下maven项目增加依赖项目里面没有添加相关依赖jar
困扰了一晚上的问题,一般在pom.xml中增加了相关依赖,idea会自动将依赖的Jar包增加到maven项目中,但是在pom.xml中增加了依赖,项目中并没有 偶然打开idea的侧边栏maven工具栏 ...
随机推荐
- vsftpd安装及虚拟用户配置
服务器环境:CentOS6.9 Linux 2.6.32-696.10.1.el6.x86_64 安装vsftpd.db4.db4-utils # yum -y install vsftpd db4 ...
- jQuery选择器(属性过滤选择器)第六节
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- Python丨Python 性能分析大全
虽然运行速度慢是 Python 与生俱来的特点,大多数时候我们用 Python 就意味着放弃对性能的追求.但是,就算是用纯 Python 完成同一个任务,老手写出来的代码可能会比菜鸟写的代码块几倍,甚 ...
- 使用Jquery.js框架和CSS3实现3D相册的制作
有关3D相册的制作主要包括以下几个知识点: 1.有关图片的位置摆放,也就是一个相对定位绝对定位的使用: 2.有关CSS3中transform属性的使用(transform-style: preserv ...
- 二:Maven中pom.xml元素详解
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6628201.html 一个pom.xml中包含了许多标签,各个标签是对项目生命周期.依赖管理的配置.常用的主 ...
- HTTPS 建立连接的详细过程
HTTPS是在HTTP的基础上和ssl/tls证书结合起来的一种协议,保证了传输过程中的安全性,减少了被恶意劫持的可能.很好的解决了解决了http的三个缺点(被监听.被篡改.被伪装) 对称加密和非对称 ...
- vim如何显示行号
在 vim 里执行(在普通模式下直接按冒号,并输入下面的命令 :set number 回车后就可以显示行号了,但重启 vim 后又会恢复默认的设置. 要想每次进入 vim 都显示行号就需要配置 vim ...
- 用MVC导入导出
导入导出对于刚做的人一脸懵逼,但是明白思路之后就感觉非常容易,我也是研究了好久,才总算做了出来,放在这里给大家分享一下 一.先看下导出 视图脚本 <script type ="text ...
- 源码剖析Django REST framework的认证方式及自定义认证
源码剖析Django REST framework的认证方式 在前面说过,请求到达REST framework的时候,会对request进行二次封装,在封装的过程中会对客户端发送过来的request封 ...
- linux基础命令整理(一)
ls 显示当前目录内容 1)ls / (显示根目录下所有的目录和文件) 2)ls -l / (以列表的形式显示根目录下所有的目录和文件) 绝对路径和相对路径 1)绝对路径,以/开头的都是绝对路径,比如 ...