1 MdRadioModule

　　相当于<input type="radio">

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 { }

　　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> -->

　　2.3 效果如下

　　　　

3 MdDatepickerModule

　　3.1 简要描述

　　　　MdDatepickerModule的md-datepicker组件是一个日历组件，可以提供日期

　　3.2 使用步骤

　　　　3.2.1 在共享模块导入MdDatepickerModule、MdNativeDateModule

　　　　　　

　　　　　　　　技巧01：MdNativeDateModule模块是用来格式化日期的；只需将MdNativeDateModule模块导入到共享共享模块中并做导出处理，在用到MdDatepickerModule的模块中导入共享模块中接口（一般都将这两个模块同时放到共享模块中同时都做导出处理即可）

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 { }

　　　　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>

　　3.3 效果展示

　　　　　

　　　　　

　　　　 

4 MdSelectModule的使用

　　md-select组件的效果和select元素的效果是一样的，只不过md-select组件拥有material的先关样式和动画

　　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 { }

　　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() {

  }

}

TS

　　4.3 效果展示

　　　　

　　4.4 官方文档

　　　　点击前往

 
 
 

Material使用10 MdRadioModule、MdDatepickerModule、MdNativeDateModule、MdSelectModule的更多相关文章

  1. Material使用05 MdListModule模块 MdButtonToggleModule模块

    1 在共享模块中导入MdListModule模块 import { NgModule } from '@angular/core'; import { CommonModule } from '@an ...

  2. Material04 MdListModule模块

    1 在共享模块中导入MdListModule模块 import { NgModule } from '@angular/core'; import { CommonModule } from '@an ...

  3. Angular11 模板表单、响应式表单（自定义验证器）、HTTP、表单元素双向绑定

    1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...

  4. 定制Three.js中Material属性

    1.找到想要更改的着色器代码

  5. Struts2 级联下拉框 详解析

    目录(?)[+] 运行环境:myeclipse8.6+jboss5.1+jvm1.6 先看最后目录结构: 直接上源码: complexFormTag.jsp: <%@ page language ...

  6. 2019年最新android常用开源库汇总上篇（转）

    1.基本控件 1.1.TextView ScrollNumber ReadMoreTextView HtmlImage android-autofittextview html-textview Ba ...

  7. Angular 2 to Angular 4 with Angular Material UI Components

    Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...

  8. 让低版本的 Android 项目显示出 Material 风格的点击效果

    每天都被不同的需求纠缠的生活是幸福而又不幸的,这不我们家亲爱的设计师们又让我们在低版本的 Android 平台上实现一下类似于 Material Design 的点击效果. 虽然大家都知道 Mater ...

  9. Material Design学习笔记

    Wiki->移动开发->Android->Material Design-原质化设计 (友情链接:http://wiki.jikexueyuan.com/project/materi ...

随机推荐

  1. ios 表情编码

    感受 :可以做自定义键盘时候用  很方便 还可以在textView里面看到 用户体验很好~ 但是要和服务器管理员协商好,做好解析转码工作,不然网页上是不显示的. ios表情编码 在ios中可以使用可爱 ...

  2. leetcode 901. Online Stock Span

    Write a class StockSpanner which collects daily price quotes for some stock, and returns the span of ...

  3. 机器学习相关知识整理系列之一：决策树算法原理及剪枝（ID3,C4.5,CART）

    决策树是一种基本的分类与回归方法.分类决策树是一种描述对实例进行分类的树形结构,决策树由结点和有向边组成.结点由两种类型,内部结点表示一个特征或属性,叶结点表示一个类. 1. 基础知识 熵 在信息学和 ...

  4. /dev/sda

    /dev/sda这是Linux系统下的设备文件,类似Windows系统上面的本地磁盘.U盘.光驱等设备.Linux系统访问设备文件需要mount命令挂载映射成文件,查看: 1.建一个目录(挂载磁盘分区 ...

  5. EntityFramework 学习 一 Change Tracking in Entity Framework

    EntityFramework自动跟踪上下文中已经加载的实体,DbChangeTracker类给你关于当前实体的所有跟踪信息 注意,每个实体都要有EntityKey(主键)的属性,EntityFram ...

  6. CV2图像操作

    一.读入图像使用函数cv2.imread(filepath,flags)读入一副图片filepath:要读入图片的完整路径flags:读入图片的标志 cv2.IMREAD_COLOR:默认参数,读入一 ...

  7. IE6、IE7、IE8及其他浏览器多个元素并排显示

    IE6.IE7.IE8及其他浏览器多个元素并排显示 HTML代码 <div class="line"> <h1>全部input框</h1> &l ...

  8. JS高阶函数的理解（函数作为参数传递）

    JS高阶函数的理解 高阶函数是指至少满足下列条件之一的函数. · 函数可以作为参数被传递 · 函数可以作为返回值输出 一个例子,我们想在页面中创建100个div节点,这是一种写法.我们发现并不是所有用 ...

  9. Codeforces 453B Little Pony and Harmony Chest：状压dp【记录转移路径】

    题目链接:http://codeforces.com/problemset/problem/453/B 题意: 给你一个长度为n的数列a,让你构造一个长度为n的数列b. 在保证b中任意两数gcd都为1 ...

  10. Druid：一个用于大数据实时处理的开源分布式系统——大数据实时查询和分析的高容错、高性能开源分布式系统

    转自:http://www.36dsj.com/archives/28590 Druid 是一个用于大数据实时查询和分析的高容错.高性能开源分布式系统,旨在快速处理大规模的数据,并能够实现快速查询和分 ...