Material使用05 MdListModule模塊 MdButtonToggleModule模塊

時間  2019-11-09
標籤 material 使用 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，它們的用法差很少，只是前者沒有動畫效果，後者有動畫效果而已就（後者一般用於導航欄）css

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容器html

　　代碼解釋02：md-subheader 命令只是將相應元素做爲一個段落分割而已node

　　　　

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容器中chrome

　　　　代碼解釋02：md-line命令表示md-list-item中的內容會被多行顯示typescript

　　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命令只是將字體變小而已npm

　　　　代碼解釋02：md-icon組件會被當作是一個單獨的flex項目，md-list-icon命令的做用是讓圖標在felx容器的第一個位置進行顯示編程

　　　　技巧01：md-list-item中那個div是一個flex容器，它默認時橫向排列的、項目時居中排列；若是想要圖標在縱軸的對齊方式是頂端對齊就必須本身寫樣式來確保felx項目在縱軸方向頂端對齊app

md-icon {
    align-self: flex-start; 
}

　　　　技巧02：svg圖標的顯示請參見MdIconModule模塊相關知識點dom

　　　　技巧03：當靜態svg資源在不一樣文件夾時的重構技巧ide

　　　　　　

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 效果展現

　　　　　　

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程