Material使用07 MdGridListModule的使用-白红宇

Material使用07 MdGridListModule的使用

阅读量：4656 次

发布时间：2019-06-09

本文共 9554 字，大约阅读时间需要 31 分钟。

1 `MatGridListModule简介`

　　对相似数据的展现，尤其是像是图片的展示

　　使用起来很像表格

　　官方文档：

2 `MatGridListModule`提供的指令

　　2.1 mat-grid-list

　　　　2.1.1 指令说明

　　　　　　一个二维的列表视图

THML

md-grid-tile {
        background-color: skyblue;}

SCSS

　　　　2.1.2 属性列表

　　　　　　cols：这是每行的列数，必须设置

　　　　　　gutterSize：设置每个tile之间的间隔，默认是1px

　　　　　　rowHeight：这是行高，默认是设置长高的比例（1:1）

　　2.2 mat-grid-tile

　　　　2.2.1 指令说明

　　　　　　如果把mat-grid-list看做是一个工作簿，那么mat-grid-tile就相当于是一个单元格


        
       
        测试01：跨两行
         
       
        测试02：跨两列
         
       
        测试03
         
       
        测试04：跨两行，跨两列
         
       
        测试05
         
       
        测试06
         
       
        测试07

HTML

md-grid-tile {
        background-color: skyblue;}

SCSS

　　　　2.2.2 属性列表

　　　　　　colspan：单元格跨列

　　　　　　rowspan：单元格跨行

　　2.3 mat-grid-tile-header mat-grid-tile-footer

　　　　技巧01：这两个指令是用在mat-grid-tile中的

　　　　2.3.1 指令说明

　　　　　　设定单元格的页眉和页脚

View Code

3 MatGridListModule使用步骤

　　3.1 在共享模块中导入MatGridListModule

import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import {   MdSidenavModule,   MdToolbarModule,  MdIconModule,  MdButtonModule,  MdIconRegistry,  MdCardModule,  MdInputModule,  MdListModule,  MdSlideToggleModule,  MdGridListModule } from '@angular/material'; import { HttpModule } from '@angular/http';@NgModule({  imports: [    CommonModule,    HttpModule,    MdSidenavModule,    MdToolbarModule,    MdIconModule,    MdButtonModule,    MdCardModule,    MdInputModule,    MdListModule,    MdSlideToggleModule,    MdGridListModule  ],  declarations: [],  exports: [    CommonModule,    MdSidenavModule,    MdToolbarModule,    MdIconModule,    MdButtonModule,    HttpModule,    MdCardModule,    MdInputModule,    MdListModule,    MdSlideToggleModule,    MdGridListModule  ]})export class SharedModule { }

View Code

　　3.2 使用MatGridListModule提供的指令

4 实战之利用MatGridListModule实现注册页面头像列表展示

　　4.1 导入MatGridListModule模块

　　　　import {MatGridListModule} from '@angular/material/grid-list';

　 4.2 在响应组件中使用MatGridListModule提供的指令

HTML

import { Component, OnInit } from '@angular/core';@Component({  selector: 'app-register',  templateUrl: './register.component.html',  styleUrls: ['./register.component.scss']})export class RegisterComponent implements OnInit {  items: string[];  constructor() { }  ngOnInit() {    // avatars:svg-i    const nums = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];    this.items = nums.map(d => `avatars:svg-${d}`);  }}

md-icon {
        overflow: hidden;    width: 64px;    height: 64px;    border-radius: 50%;    margin: 12px;}md-card {
        width: 600px;}

SCSS

　　　　技巧01：此处使用了集合形式的svg图标，每个svg图标都有一个对应的ID

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`;  const avatarDir = `${imgDir}/avatar`;  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'));  mdIconRegistry.addSvgIconSetInNamespace('avatars', domSanitizer.bypassSecurityTrustResourceUrl(`${avatarDir}/avatars.svg`));  }

注册svg图标集合

svg图标集合

　　　　技巧02：如何使用已经注册号的svg图标集合

　　　　　　mdIconRegistry.addSvgIconSetInNamespace('avatars', domSanitizer.bypassSecurityTrustResourceUrl(`${avatarDir}/avatars.svg`));这段代码表示已经将图标集合注册完毕，avatars就代表这个svg图标集合

　　　　　　有图标集合源代码可以知道，svg图标中的每个svg图标都有一个单独的ID

　　　　　　avatars:svg-图标ID -> 表示一个svg图标

import { Component, OnInit } from '@angular/core';@Component({  selector: 'app-register',  templateUrl: './register.component.html',  styleUrls: ['./register.component.scss']})export class RegisterComponent implements OnInit {  items: string[];  constructor() { }  ngOnInit() {    // avatars:svg-i    const nums = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];    this.items = nums.map(d => `avatars:svg-${d}`);  }}

View Code

　　　　技巧03：在进行图标展示时用到了md-icon指令，所以需要在共享模块中引入MdIconModule模块

　　　　技巧04：通过angular的ngFor指令来简化代码