Material使用10 MdRadioModule、MdDatepickerModule、MdNativeDateModule、MdSelectModule

時間 2019-11-08

標籤 material 使用 mdradiomodule mddatepickermodule mdnativedatemodule mdselectmodule 简体版

原文原文鏈接

1 MdRadioModule

　　至關於<input type="radio">css

2 使用步驟

　　2.1 在共享模塊導入MdRadioModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { 
  MdSidenavModule, 
  MdToolbarModule,
  MdIconModule,
  MdButtonModule,
  MdIconRegistry,
  MdCardModule,
  MdInputModule,
  MdListModule,
  MdSlideToggleModule,
  MdGridListModule,
  MdDialogModule,
  MdAutocompleteModule,
  MdMenuModule,
  MdRadioModule,
  MdDatepickerModule,
  MdNativeDateModule
 } from '@angular/material';
 import { HttpModule } from '@angular/http';

@NgModule({
  imports: [
    CommonModule,
    HttpModule,
    MdSidenavModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdInputModule,
    MdListModule,
    MdSlideToggleModule,
    MdGridListModule,
    MdDialogModule,
    MdAutocompleteModule,
    MdMenuModule,
    MdRadioModule,
    MdDatepickerModule,
    MdNativeDateModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    MdSidenavModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    HttpModule,
    MdCardModule,
    MdInputModule,
    MdListModule,
    MdSlideToggleModule,
    MdGridListModule,
    MdDialogModule,
    MdAutocompleteModule,
    MdMenuModule,
    MdRadioModule,
    MdDatepickerModule,
    MdNativeDateModule
  ],
  providers: [
    // MdDialog
  ]
})
export class SharedModule { }

View Code

　　2.2 利用md-radio-group 和 md-radio-button 實現單選框效果

<h3>GridList</h3>
<div class="box">
  <md-grid-list cols="4">
    <md-grid-tile>
      <md-grid-tile-header>頁眉</md-grid-tile-header>
      <md-icon>menu</md-icon>測試01
      <md-grid-tile-footer>頁腳</md-grid-tile-footer>
    </md-grid-tile> 
  </md-grid-list>
</div>
<hr />

<h3>Dialog</h3>
<div class="box">
  <button class="fab-button" md-fab type="button" (click)="openNewProjectDialog()" color="primary">
      <md-icon>add</md-icon>
  </button>
</div>

<h3>Menu</h3>
<div class="box">
  <button class="fab-button" md-fab type="button"  color="accent" [mdMenuTriggerFor]="testMenu">
      <md-icon>menu</md-icon>
  </button>
  <md-menu #testMenu="mdMenu">
    <button md-menu-item (click)="onClick('刷新按鈕')">
      <md-icon>autorenew</md-icon>
      <span>刷新</span>
    </button>
    <button md-menu-item (click)="onClick('設置按鈕')">
      <md-icon>settings</md-icon>
      <span>設置</span>
    </button>
  </md-menu>
</div>

<h3>Radio</h3>
<div class="box">
  <md-radio-group>
    <md-radio-button value="1">男</md-radio-button>
    <md-radio-button value="2">女</md-radio-button>
  </md-radio-group>
</div>


<!-- <md-grid-list cols="4" rowHeight="1:1" gutterSize="1px">
  <md-grid-tile colspan="2">測試01：跨兩行</md-grid-tile>
  <md-grid-tile rowspan="2">測試02：跨兩列</md-grid-tile>
  <md-grid-tile>測試03</md-grid-tile>
  <md-grid-tile colspan="2" rowspan="2">測試04：跨兩行，跨兩列</md-grid-tile>
  <md-grid-tile>測試05</md-grid-tile>
  <md-grid-tile>測試06</md-grid-tile>
  <md-grid-tile>測試07</md-grid-tile>
</md-grid-list> -->

View Code

　　2.3 效果以下

3 MdDatepickerModule

　　3.1 簡要描述

　　　　MdDatepickerModule的md-datepicker組件是一個日曆組件，能夠提供日期

　　3.2 使用步驟

　　　　3.2.1 在共享模塊導入MdDatepickerModule、MdNativeDateModule

　　　　　　　　技巧01：MdNativeDateModule模塊是用來格式化日期的；只需將MdNativeDateModule模塊導入到共享共享模塊中並作導出處理，在用到MdDatepickerModule的模塊中導入共享模塊中接口（通常都將這兩個模塊同時放到共享模塊中同時都作導出處理便可）html

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { 
  MdSidenavModule, 
  MdToolbarModule,
  MdIconModule,
  MdButtonModule,
  MdIconRegistry,
  MdCardModule,
  MdInputModule,
  MdListModule,
  MdSlideToggleModule,
  MdGridListModule,
  MdDialogModule,
  MdAutocompleteModule,
  MdMenuModule,
  MdRadioModule,
  MdDatepickerModule,
  MdNativeDateModule
 } from '@angular/material';
 import { HttpModule } from '@angular/http';

@NgModule({
  imports: [
    CommonModule,
    HttpModule,
    MdSidenavModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdInputModule,
    MdListModule,
    MdSlideToggleModule,
    MdGridListModule,
    MdDialogModule,
    MdAutocompleteModule,
    MdMenuModule,
    MdRadioModule,
    MdDatepickerModule,
    MdNativeDateModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    MdSidenavModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    HttpModule,
    MdCardModule,
    MdInputModule,
    MdListModule,
    MdSlideToggleModule,
    MdGridListModule,
    MdDialogModule,
    MdAutocompleteModule,
    MdMenuModule,
    MdRadioModule,
    MdDatepickerModule,
    MdNativeDateModule
  ],
  providers: [

  ]
})
export class SharedModule { }

View Code

　　　　3.2.2 利用 md-input-container 和 md-datepicker 實現效果

<h3>GridList</h3>
<div class="box">
  <md-grid-list cols="4">
    <md-grid-tile>
      <md-grid-tile-header>頁眉</md-grid-tile-header>
      <md-icon>menu</md-icon>測試01
      <md-grid-tile-footer>頁腳</md-grid-tile-footer>
    </md-grid-tile> 
  </md-grid-list>
</div>
<hr />

<h3>Dialog</h3>
<div class="box">
  <button class="fab-button" md-fab type="button" (click)="openNewProjectDialog()" color="primary">
      <md-icon>add</md-icon>
  </button>
</div>

<h3>Menu</h3>
<div class="box">
  <button class="fab-button" md-fab type="button"  color="accent" [mdMenuTriggerFor]="testMenu">
      <md-icon>menu</md-icon>
  </button>
  <md-menu #testMenu="mdMenu">
    <button md-menu-item (click)="onClick('刷新按鈕')">
      <md-icon>autorenew</md-icon>
      <span>刷新</span>
    </button>
    <button md-menu-item (click)="onClick('設置按鈕')">
      <md-icon>settings</md-icon>
      <span>設置</span>
    </button>
  </md-menu>
</div>

<h3>Radio</h3>
<div class="box">
  <md-radio-group>
    <md-radio-button value="1">男</md-radio-button>
    <md-radio-button value="2">女</md-radio-button>
  </md-radio-group>
</div>

<h3>Radio</h3>
<div class="box">
  <md-input-container class="full-width">
    <input mdInput type="text" placeholder="日期測試" [mdDatepicker]="datepicker" />
    <button type="button" mdPrefix [mdDatepickerToggle]="datepicker"></button>
  </md-input-container>
  <md-datepicker #datepicker></md-datepicker>
</div>

View Code

　　3.3 效果展現

4 MdSelectModule的使用

　　md-select組件的效果和select元素的效果是同樣的，只不過md-select組件擁有material的先關樣式和動畫markdown

　　4.1 在共享模塊引入MdSelectModule

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
 } from '@angular/material';

@NgModule({
  imports: [
    CommonModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdInputModule,
    MdListModule,
    MdSlideToggleModule,
    MdGridListModule,
    MdDialogModule,
    MdAutocompleteModule,
    MdMenuModule,
    MdCheckboxModule,
    MdTooltipModule,
    MdRadioModule,
    MdDatepickerModule,
    MdNativeDateModule,
    MdSelectModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdInputModule,
    MdListModule,
    MdSlideToggleModule,
    MdGridListModule,
    MdDialogModule,
    MdAutocompleteModule,
    MdMenuModule,
    MdCheckboxModule,
    MdTooltipModule,
    MdRadioModule,
    MdDatepickerModule,
    MdNativeDateModule,
    MdSelectModule
  ]
})
export class SharedModule { }

View Code

　　4.2 在組件中使用md-select組件

<div class="panel panel-primary">
  <div class="panel-heading">md-select的使用</div>
  <div class="panel-body">
    <md-select placeholder="請選擇目標列表" class="fill-width" style="height: 40px;">
      <md-option *ngFor="let taskList of taskLists" [value]="taskList.name">{{taskList.name}}</md-option>
    </md-select>
  </div>
  <div class="panel-footer">2018-1-18 14:26:58</div>
</div>

HTML

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test01',
  templateUrl: './test01.component.html',
  styleUrls: ['./test01.component.scss']
})
export class Test01Component implements OnInit {

  taskLists = [
    {label: 1, name: '進行中'},
    {label: 2, name: '已完成'}
  ];

  constructor() { }

  ngOnInit() {
  }

}

　　4.3 效果展現

　　4.4 官方文檔

　　　　點擊前往app

相關標籤/搜索

retrotfit2.1+material

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。