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 { }
View Code
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();}}
View Code
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>
View Code
效果如下:
转载于:https://www.cnblogs.com/NeverCtrl-C/p/8081341.html
Material使用01 侧边栏MdSidenavModule、工具栏MdTollbarModule相关推荐
- 01 菜单栏和工具栏(一)
目标 菜单栏 MenuStrip 演练 退出的区别 注,this.close只退当前窗体 application.Exit()
- 【MFC】工具栏按钮追加显示文本
00. 目录 文章目录 00. 目录 01. 案例概述 02. 开发环境 03. 关键技术 04. 程序设计 05. 秘笈心法 06. 源码下载 07. 附录 01. 案例概述 工具栏中的按钮并不一定 ...
- 【MFC】工具栏按钮的热点效果
00. 目录 文章目录 00. 目录 01. 案例概述 02. 开发环境 03. 关键技术 04. 程序设计 05. 秘笈心法 06. 源码下载 07. 附录 01. 案例概述 工具栏按钮的热点效果可 ...
- abap 添加alv上的工具栏的按钮_Excel里的置顶功能——快速访问工具栏
100万职场人都在看 后台回复礼包领 199元职场干货 大家好,我是小可~ 今天跟大家分享一个提高Excel操作效率的小技巧 自定义你的快速访问工具栏 设置后的效果▼▼▼ 也就是把你最经常用到的两三个 ...
- 最流行的android组件大全
原文链接:http://blog.csdn.net/smallnest/article/details/38658593/ Android 是目前最流行的移动操作系统之一. 随着新版本的不断发布, A ...
- 《微图4.0》最新Beta版公测
01前言 它是站在海岸遥望海中已经看见桅杆尖头的一只航船,它是立于高山之巅远看东方已见光芒四射喷薄欲出的一轮朝日,它是躁动于母腹中的快要成熟了的一个婴儿. --摘自<毛泽东选集>第一卷&l ...
- Flutter 基础Widgets之AppBar详解
概述 AppBar Material风格应用栏,有工具栏和其他的Widget构成 应用栏通常用于Scaffold.appBar属性,该属性将应用栏放置在屏幕顶部的固定高度小部件中.对于可滚动的应用栏, ...
- 网线制作ppt_快速制作PPT技巧!
为什么同样的PPT,你花费了一天,我却只用了一小时? 在我仔细观察了一些制作人员的操作后,总结了如下实用技巧! 01自定义访问工具栏 在PPT中我们有很多的常用操作,例如 「左对齐/右对齐」 「置于底 ...
- linux macos 程序员,关于macos:Linux相当于Mac OS X“open”命令
我在命令行中发现Mac OS X中的"open"命令非常方便. 从"男人开放": The open command opens a file (or a dir ...
最新文章
- vue27-2.0-自定义键盘事件
- 计算机光驱参数,请问,电脑光驱插入关盘,打开时显示“参数不正确,无法打开”,这是什么故障,怎么处理?...
- 推荐系统炼丹笔记:用户评论在推荐中的应用
- python 如何放心干净的卸载模块
- lpc2000 filash utility 程序烧写工具_单片机烧录程序的次数
- centos7提示ifconfig command not found解决
- 3801.最佳连续子数组-AcWing题库
- 2021-11-17
- latex中输入matlab代码,Latex插入matlab代码
- Matlab中实现均匀量化
- 计算机家庭网络共享,Windows7创建家庭组实现多台电脑之间共享资源
- MindManager教你做一份完美的笔记
- 使用DISM启用或禁用Windows功能
- 防水蓝牙耳机哪个好?防水音质好的蓝牙耳机推荐
- C语言学习笔记——typedef
- 通联IPAY常见问题解答
- FOTA与OTA区别在哪?
- JS模块化(一):Commonjs
- win10家庭版找不到gpedit.msc的解决办法
- Win10系统设置护眼模式