Material使用05 MdListModule模块 MdButtonToggleModule模块
1 在共享模块中导入MdListModule模块
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MdSidenavModule, MdToolbarModule,MdIconModule,MdButtonModule,MdIconRegistry,MdCardModule,MdInputModule,MdListModule} from '@angular/material';import { HttpModule } from '@angular/http';@NgModule({imports: [CommonModule,HttpModule,MdSidenavModule,MdToolbarModule,MdIconModule,MdButtonModule,MdCardModule,MdInputModule,MdListModule],declarations: [],exports: [CommonModule,MdSidenavModule,MdToolbarModule,MdIconModule,MdButtonModule,HttpModule,MdCardModule,MdInputModule,MdListModule] }) export class SharedModule { }
View Code
技巧01:MdListModule提供了两个列表组件 -> md-list 和 md-nav-list,它们的用法差不多,只是前者没有动画效果,后者有动画效果而已就(后者通常用于导航栏)
2 在需要用到 MdListModule 的模块引入共享模块
3 利用 MdListModule 提供的组件编写list主要结构
<md-nav-list><h3 md-subheader>客户微服务</h3><md-list-item>客户管理</md-list-item><h3 md-subheader>员工微服务</h3><md-list-item>员工管理</md-list-item> </md-nav-list>
View Code
代码解释01:md-list-item里面包含了一个div,这个div是一个横向排列的flex容器
代码解释02:md-subheader 命令只是将相应元素作为一个段落分割而已
4 md-list-item高级用法
4.1 md-list-item支持多行
<md-nav-list><h3 md-subheader>客户微服务</h3><md-list-item><!-- <md-icon md-list-icon svgIcon="day"></md-icon> --><span md-line>客户管理</span><span md-line md-subheader>客户基本信息管理</span></md-list-item><h3 md-subheader>员工微服务</h3><md-list-item>员工管理</md-list-item> </md-nav-list>
View Code
代码解释01:md-list-item中的一般元素都会被看成是一个flex项目放到一个flex容器中
代码解释02:md-line命令表示md-list-item中的内容会被多行显示
4.2 md-list-item支持图标
<md-nav-list><h3 md-subheader>客户微服务</h3><md-list-item><md-icon md-list-icon svgIcon="day"></md-icon><span md-line>客户管理</span><span md-line md-subheader>客户基本信息管理</span></md-list-item><h3 md-subheader>员工微服务</h3><md-list-item>员工管理</md-list-item> </md-nav-list>
View Code
代码解释01:两个标有md-line的元素会被看成一个flex项目,但是它们是分行显示的;md-subheader命令只是将字体变小而已
代码解释02:md-icon组件会被看成是一个单独的flex项目,md-list-icon命令的作用是让图标在felx容器的第一个位置进行显示
技巧01:md-list-item中那个div是一个flex容器,它默认时横向排列的、项目时居中排列;如果想要图标在纵轴的对齐方式是顶端对齐就必须自己写样式来确保felx项目在纵轴方向顶端对齐
md-icon {align-self: flex-start; }
技巧02:svg图标的显示请参见MdIconModule模块相关知识点
技巧03:当静态svg资源在不同文件夹时的重构技巧
import { DomSanitizer } from '@angular/platform-browser'; import { MdIconRegistry } from '@angular/material'; export const loadSvgResources = (mdIconRegistry: MdIconRegistry,domSanitizer: DomSanitizer ) => {const imgDir = 'assets/img';const sidebarDir = `${imgDir}/sidebar`;const dayDir = `${imgDir}/days`;mdIconRegistry.addSvgIcon('day', domSanitizer.bypassSecurityTrustResourceUrl(`${sidebarDir}/day.svg`));mdIconRegistry.addSvgIcon('month', domSanitizer.bypassSecurityTrustResourceUrl(`${sidebarDir}/month.svg`));mdIconRegistry.addSvgIcon('project', domSanitizer.bypassSecurityTrustResourceUrl(`${sidebarDir}/project.svg`));mdIconRegistry.addSvgIcon('projects', domSanitizer.bypassSecurityTrustResourceUrl(`${sidebarDir}/projects.svg`));mdIconRegistry.addSvgIcon('week', domSanitizer.bypassSecurityTrustResourceUrl(`${sidebarDir}/week.svg`)); mdIconRegistry.addSvgIcon('header', domSanitizer.bypassSecurityTrustResourceUrl('assets/svg/header.svg')); }
View Code
4.3 md-list-item的图标动态显示
需求:根据当前日期显示对应的日期图标
4.3.1 将每天的svg图片进行注册
import { DomSanitizer } from '@angular/platform-browser'; import { MdIconRegistry } from '@angular/material'; export const loadSvgResources = (mdIconRegistry: MdIconRegistry,domSanitizer: DomSanitizer ) => {const imgDir = 'assets/img';const sidebarDir = `${imgDir}/sidebar`;const dayDir = `${imgDir}/days`;mdIconRegistry.addSvgIcon('day', domSanitizer.bypassSecurityTrustResourceUrl(`${sidebarDir}/day.svg`));mdIconRegistry.addSvgIcon('month', domSanitizer.bypassSecurityTrustResourceUrl(`${sidebarDir}/month.svg`));mdIconRegistry.addSvgIcon('project', domSanitizer.bypassSecurityTrustResourceUrl(`${sidebarDir}/project.svg`));mdIconRegistry.addSvgIcon('projects', domSanitizer.bypassSecurityTrustResourceUrl(`${sidebarDir}/projects.svg`));mdIconRegistry.addSvgIcon('week', domSanitizer.bypassSecurityTrustResourceUrl(`${sidebarDir}/week.svg`)); const days = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];days.forEach( d => mdIconRegistry.addSvgIcon(`day${d}`, domSanitizer.bypassSecurityTrustResourceUrl(`${dayDir}/day${d}.svg`))); mdIconRegistry.addSvgIcon('header', domSanitizer.bypassSecurityTrustResourceUrl('assets/svg/header.svg')); }
View Code
4.3.2 下载date相关的依赖包
cnpm install --save date-fns -> 运行环境用
cnpm install --save-dev @types/date-fns -> 开发环境用
{"name": "material","version": "0.0.0","license": "MIT","scripts": {"ng": "ng","start": "ng serve","build": "ng build","test": "ng test","lint": "ng lint","e2e": "ng e2e"},"private": true,"dependencies": {"@angular/animation": "^4.0.0-beta.8","@angular/animations": "^4.2.4","@angular/common": "^4.2.4","@angular/compiler": "^4.2.4","@angular/core": "^4.2.4","@angular/forms": "^4.2.4","@angular/http": "^4.2.4","@angular/material": "^2.0.0-beta.7","@angular/platform-browser": "^4.2.4","@angular/platform-browser-dynamic": "^4.2.4","@angular/router": "^4.2.4","core-js": "^2.4.1","date-fns": "^1.29.0","rxjs": "^5.4.2","zone.js": "^0.8.14"},"devDependencies": {"@angular/cli": "1.4.9","@angular/compiler-cli": "^4.2.4","@angular/language-service": "^4.2.4","@types/date-fns": "^2.6.0","@types/jasmine": "~2.5.53","@types/jasminewd2": "~2.0.2","@types/node": "~6.0.60","codelyzer": "~3.2.0","jasmine-core": "~2.6.2","jasmine-spec-reporter": "~4.1.0","karma": "~1.7.0","karma-chrome-launcher": "~2.1.1","karma-cli": "~1.0.1","karma-coverage-istanbul-reporter": "^1.2.1","karma-jasmine": "~1.1.0","karma-jasmine-html-reporter": "^0.2.2","protractor": "~5.1.2","ts-node": "~3.2.0","tslint": "~5.7.0","typescript": "~2.3.3"} }
View Code
4.3.3 在需要用到date-fns模块中的相关方法的组件进行引入
import { Component, OnInit } from '@angular/core'; import { getDate } from 'date-fns';@Component({selector: 'app-sidenav',templateUrl: './sidenav.component.html',styleUrls: ['./sidenav.component.scss'] }) export class SidenavComponent implements OnInit {today = 'day';constructor() { }ngOnInit() {this.today = `day${getDate(new Date())}`; // 获取当前日期的日 }}
View Code
<md-nav-list dense><h3 md-subheader>项目</h3><md-list-item><md-icon md-list-icon svgIcon="projects"></md-icon><span md-line>项目首页</span><span md-line md-subheader>查看你的所有项目</span></md-list-item><h3 md-subheader>日历</h3><md-list-item><md-icon md-list-icon svgIcon="project"></md-icon><span md-line>日历首页</span><span md-line md-subheader>根据日期查看</span></md-list-item><md-list-item><md-icon md-list-icon svgIcon="month"></md-icon><span md-line>月视图</span><span md-line md-subheader>按月查看</span></md-list-item><md-list-item><md-icon md-list-icon svgIcon="week"></md-icon><span md-line>周视图</span> <span md-line md-subheader>按周查看</span></md-list-item><md-list-item><md-icon md-list-icon [svgIcon]="day"></md-icon><span md-line>日视图</span><span md-line md-subheader>按月查看</span></md-list-item> </md-nav-list>
View Code
技巧01:实例化日期对象,从日期对象中获取时间信息
4.4.4 效果图如下
5 MdButtonToggleModule
5.1 概述
MdButtonToggleModule中有两个组件选择器一个是md-button-toggle-group 一个是 md-button-toggle;其中md-button-toggle相当于是一个单选框,而md-button-toggle-group相当于是多个md-button-toggle组成的单选框组合,但是每次只能有一个md-button-toggle会被选中,md-button-toggle-group的值就是当前被选中的md-button-toggle的值
5.2 编程步骤
5.2.1 导入MdButtonToggleModule
在共享模块中导入MdButtonToggleModule
技巧01:还需要进行导出操作,因为其它模块如果需要用到MdButtonToggleModule就只需要导入共享模块就可以啦
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common';import { MdToolbarModule,MdIconModule,MdButtonModule,MdCardModule,MdInputModule,MdListModule,MdSlideToggleModule,MdGridListModule,MdDialogModule,MdAutocompleteModule,MdMenuModule,MdCheckboxModule,MdTooltipModule,MdRadioModule,MdDatepickerModule,MdNativeDateModule,MdSelectModule,MdButtonToggleModule} from '@angular/material'; import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component'; import { DirectiveModule } from '../directive/directive.module'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ImageListSelectComponent } from './image-list-select/image-list-select.component';@NgModule({imports: [CommonModule,FormsModule,ReactiveFormsModule,MdToolbarModule,MdIconModule,MdButtonModule,MdCardModule,MdInputModule,MdListModule,MdSlideToggleModule,MdGridListModule,MdDialogModule,MdAutocompleteModule,MdMenuModule,MdCheckboxModule,MdTooltipModule,MdRadioModule,MdDatepickerModule,MdNativeDateModule,MdSelectModule,DirectiveModule,MdButtonToggleModule],declarations: [ConfirmDialogComponent, ImageListSelectComponent],entryComponents: [ ConfirmDialogComponent ],exports: [CommonModule,FormsModule,ReactiveFormsModule,MdToolbarModule,MdIconModule,MdButtonModule,MdCardModule,MdInputModule,MdListModule,MdSlideToggleModule,MdGridListModule,MdDialogModule,MdAutocompleteModule,MdMenuModule,MdCheckboxModule,MdTooltipModule,MdRadioModule,MdDatepickerModule,MdNativeDateModule,MdSelectModule,DirectiveModule,ImageListSelectComponent,MdButtonToggleModule] }) export class SharedModule { }
TS
5.2.2 在组件中MdButtonToggleModule提供的组件
<div class="panel panel-primary"><div class="panel-heading">button toggle的使用</div><div class="panel-body"><md-button-toggle-group #group="mdButtonToggleGroup"><md-button-toggle value="fury">测试01</md-button-toggle><md-button-toggle value="warrior">测试02</md-button-toggle><md-button-toggle value="zeus">测试03</md-button-toggle></md-button-toggle-group><h4>选择的数据为:{{ group.value }}</h4></div><div class="panel-footer">2018-2-1 16:22:52</div> </div>
HTML
5.2.3 效果展示
转载于:https://www.cnblogs.com/NeverCtrl-C/p/8097488.html
Material使用05 MdListModule模块 MdButtonToggleModule模块相关推荐
- python-time模块--pickle模块
目录 time 模块 为什么要有time模块,time模块有什么用? time模块的三种格式 时间戳(timestamp) 格式化时间(需要自己定义格式) 结构化时间(struct-time) 结构化 ...
- python-Day5-深入正则表达式--冒泡排序-时间复杂度 --常用模块学习:自定义模块--random模块:随机验证码--time datetime模块...
正则表达式 语法: mport re #导入模块名 p= re.compile("^[0-9]") #生成要匹配的正则对象 , ^代表从开头匹配,[0-9]代表匹配0至9的任意一个 ...
- nodejs学习巩固笔记-nodejs基础,Node.js 高级编程(核心模块、模块加载机制)
目录 Nodejs 基础 大前端开发过程中的必备技能 nodejs 的架构 为什么是 Nodejs Nodejs 异步 IO Nodejs 事件驱动架构 全局对象 全局变量之 process 核心模块 ...
- 全局变量 urllib模块 json模块
全局变量 urllib模块 json模块 1.vars() 查看一个.py文件中的全局变量 print(vars()) #重点 __name__': '__main__ '__file__': 'C ...
- javascript模块_JavaScript模块第2部分:模块捆绑
javascript模块 by Preethi Kasireddy 通过Preethi Kasireddy JavaScript模块第2部分:模块捆绑 (JavaScript Modules Part ...
- python 路径往上一层_Python常用模块之模块、包介绍和相关语法
在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很 ...
- 《零基础入门学习Python》学习过程笔记【30模块中的函数,os模块,ospath模块中的函数(看了一点)】...
注:os操作系统 1.如何使用模块中的函数? 先导入模块 import模块名 再用模块名.函数() >>> import random >>> random.ran ...
- 4-20模块 序列化模块 hashlib模块
1,模块,py文件就是模块,py之所以好用就是模块多. 2,模块的分类: 1,内置模块,python 安装时自带的模块 2,扩展模块,别人写好的,需要安装之后,可以直接使用.itchat微信模块, b ...
- python 网络编程--socket模块/struct模块
socket模块: 客户端:CS架构, client -> server 浏览器:BS架构, browser -> server 网络通信本质:传输字节 doc命令查看ip地址:ipc ...
- pycharm 无法导包、无法导入模块(模块名不能含有连接符“-”)
注意,模块的命名很重要,名字中下划线是可以接受的,但是连接符"-"就不行了,如: 将"-"改成下划线就可以了 如果已经存在导包语句后,要将被导入的模块名修改为不 ...
最新文章
- 2022-2028年中国工业大数据行业深度调研及投资前景预测报告
- @Override is not allowed when implementing interface method
- 图论-最长路--关于最长路的探讨2
- php cli swoole mysql_[了解实践]Swoole、PHP与MySQL:连接池,swoole扩展实现真正的PHP数据库连接池。...
- 计算机信息技术为教育带来的变化,信息技术对课堂教学带来的变化
- o_rdonly_O_RDWR, O_CREAT等open函数标志位在哪里定义? | 学步园
- 数据特征分析:2.对比分析
- 我必须要吐槽,你们的数据管理都是错的,这才是规划和产出
- php,js端获取sessionid的方法
- Python自定义类支持with关键字
- MySQL基础总结,认真看完这篇就够了!!!
- 这本 Kindle 排名第一的 Python 3 入门书,火遍了整个编程圈!| 码书
- final、finalize、finally异同,以及final关键字如何使用
- 目标客户画像_用户画像是什么?怎么做用户画像?
- 多域名一个公网ip多内网应用服务同时使用80端口
- 5款app助你养成好习惯,夏日每天不一young~
- 立体匹配-ITSA-CVPR2022论文学习笔记
- 阿里云ECS服务器CentOS6.5vnc连接时报错Failed to connect to socket /tmp/dbus-xxxxxxx: Connection refused
- c语言里面%c什么作用,C语言里面,%d%c%f分别是什么意思?怎么用?
- Github学生包云服务器
热门文章
- Sketch 80 for mac(矢量绘图设计软件)
- 教你几招Mac的省电小技巧
- Spring中使用Quartz之MethodInvokingJobDetailFactoryBean配置任务
- C#中Timer定时器的使用示例
- MySQL 8支持文档存储,并带来性能和安全方面的改进
- zabbix监控业务进程变动
- 6.7. exists, not exists
- vShpere可用性之五HA安装及配置
- NAnt0.92版本首次在windows 8.1的机子上运行报错的问题解决
- IDEA用maven创建springMVC项目和配置(XML配置和Java配置)