Material使用10 MdRadioModule、MdDatepickerModule、MdNativeDateModule、MdSelectModule
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 简要描述
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的更多相关文章
- Material使用05 MdListModule模块 MdButtonToggleModule模块
1 在共享模块中导入MdListModule模块 import { NgModule } from '@angular/core'; import { CommonModule } from '@an ...
- Material04 MdListModule模块
1 在共享模块中导入MdListModule模块 import { NgModule } from '@angular/core'; import { CommonModule } from '@an ...
- Angular11 模板表单、响应式表单（自定义验证器）、HTTP、表单元素双向绑定
1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...
- 定制Three.js中Material属性
1.找到想要更改的着色器代码
- Struts2 级联下拉框 详解析
目录(?)[+] 运行环境:myeclipse8.6+jboss5.1+jvm1.6 先看最后目录结构: 直接上源码: complexFormTag.jsp: <%@ page language ...
- 2019年最新android常用开源库汇总上篇（转）
1.基本控件 1.1.TextView ScrollNumber ReadMoreTextView HtmlImage android-autofittextview html-textview Ba ...
- 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 ...
- 让低版本的 Android 项目显示出 Material 风格的点击效果
每天都被不同的需求纠缠的生活是幸福而又不幸的,这不我们家亲爱的设计师们又让我们在低版本的 Android 平台上实现一下类似于 Material Design 的点击效果. 虽然大家都知道 Mater ...
- Material Design学习笔记
Wiki->移动开发->Android->Material Design-原质化设计 (友情链接:http://wiki.jikexueyuan.com/project/materi ...
随机推荐
- 每天一个Linux命令（26）chown命令
chown命令改变某个文件或目录的所有者和所属的组,该命令可以向某个用户授权,使该用户变成指定文件的所有者或者改变文件所属的组. (1)用法: 用法: chown [选项 ...
- C#转换人民币大写金额
/// <summary> /// 转换人民币大写金额. /// </summary> public class RMBConverter { /// <summary& ...
- File Space——一个java structs2.0的小栗子（DIY）
1 概述 File Space系统适用于团体,主要提供的是团队文件分享以及个人文件的存储管理服务.分为个人文件存储管理平台和团队文件共享平台. 个人文件存储平台主要为个人提供相关的文件分类存储服务:该 ...
- [算法]打印N个数组的整体最大Top K
题目: 有N个长度不一的数组,所有的数组都是有序的,请从大到小打印这N个数组整体最大的前K个数. 例如: 输入含有N行元素的二维数组代表N个一维数组. 219,405,538,845,971 148, ...
- linux限制用户内存使用
最近有内存使用报警的邮件发出,之后杀掉了内存占用高的进程,使内存恢复正常 但是发现某些程序被杀掉了,有过怀疑是被人手动杀掉的,看日志后发现应该是内存占用过大,系统自动杀掉的 内存耗尽会调用oom 对进 ...
- Spring Cloud之Feigin客户端重构思想
应该重构接口信息(重点) toov5-parent 存放共同依赖信息 toov5-api api的只有接口没有实现 toov5-api-member toov5-api-order to ...
- Spring Cloud之服务治理（注册发现）
服务治理SpringCloud Eureka 什么是服务治理 在传统rpc远程调用中,服务与服务依赖关系,管理比较复杂,所以需要使用服务治理,管理服务与服务之间依赖关系,可以实现服务调用.负载均衡.容 ...
- 51nod 1196
题目 神犇题解:见题目讨论区曹鹏神犇的讲解. 跪烂..倒地不起.. 对于每一个合法解,我们都可以将其唯一地分解成若干个“链”.所谓链是指由那些小于n/2的字符组成的,并且最后一个字符满足2*i> ...
- EntityFramework 学习 一 Explicit Loading with DBContext
即使延迟加载不能使用,也可以通过明确的调用来延迟加载相关实体 使用DBEntryEntity来完成 using (var context = new SchoolDBEntities()) { //D ...
- 【转】Struts2的线程安全 和Struts2中的设计模式----ThreadLocal模式
[转]Struts2的线程安全 和Struts2中的设计模式----ThreadLocal模式 博客分类: 企业应用面临的问题 java并发编程 Struts2的线程安全ThreadLocal模式St ...