Material使用09 MdCheckboxModule、MdMenuModule、MdTooltipModule
1 MdCheckboxModule的使用
md-checkbox 实现的功能和 <input type="checkbox"> 相同,只不过 md-checkbox 新增了一些materil样式和动画而已
1.1 在共享模块中引入MdCheckboxModule
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import {
MdToolbarModule,
MdIconModule,
MdButtonModule,
MdCardModule,
MdInputModule,
MdListModule,
MdSlideToggleModule,
MdGridListModule,
MdDialogModule,
MdAutocompleteModule,
MdMenuModule,
MdCheckboxModule,
MdTooltipModule
} from '@angular/material'; @NgModule({
imports: [
CommonModule,
MdToolbarModule,
MdIconModule,
MdButtonModule,
MdCardModule,
MdInputModule,
MdListModule,
MdSlideToggleModule,
MdGridListModule,
MdDialogModule,
MdAutocompleteModule,
MdMenuModule,
MdCheckboxModule,
MdTooltipModule
],
declarations: [],
exports: [
CommonModule,
MdToolbarModule,
MdIconModule,
MdButtonModule,
MdCardModule,
MdInputModule,
MdListModule,
MdSlideToggleModule,
MdGridListModule,
MdDialogModule,
MdAutocompleteModule,
MdMenuModule,
MdCheckboxModule,
MdTooltipModule
]
})
export class SharedModule { }
1.2 在组件中使用 md-checkbox 组件
<div class="panel panel-primary">
<div class="panel-heading">md-chekbox的使用</div>
<div calss="panel-body">
<div>
<md-checkbox #testCheckbox color="primary">测试</md-checkbox>
</div>
<div *ngIf="testCheckbox.checked">
<h2>测试checkbox被选中啦</h2>
</div>
</div>
<div class="panel-footer">2018-1-18 14:02:20</div>
</div>
1.3 md-checkbox组件的属性
1.3.1 checked属性
boolean类型,复选框是否被选中
1.3.2 其他属性待更新...2018-1-18 14:20:26
1.4 效果展示
1.5 官方文档
2 MdMenuModule的使用
是一个浮动型的选择面板,它必须依赖一个触发组件(按钮、单击等);对应的组件为md-menu
2.1 在共享模块中引入MdMenuModule
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
MdSidenavModule,
MdToolbarModule,
MdIconModule,
MdButtonModule,
MdIconRegistry,
MdCardModule,
MdInputModule,
MdListModule,
MdSlideToggleModule,
MdGridListModule,
MdDialogModule,
MdAutocompleteModule,
MdMenuModule
} from '@angular/material';
import { HttpModule } from '@angular/http'; @NgModule({
imports: [
CommonModule,
HttpModule,
MdSidenavModule,
MdToolbarModule,
MdIconModule,
MdButtonModule,
MdCardModule,
MdInputModule,
MdListModule,
MdSlideToggleModule,
MdGridListModule,
MdDialogModule,
MdAutocompleteModule,
MdMenuModule
],
declarations: [],
exports: [
CommonModule,
MdSidenavModule,
MdToolbarModule,
MdIconModule,
MdButtonModule,
HttpModule,
MdCardModule,
MdInputModule,
MdListModule,
MdSlideToggleModule,
MdGridListModule,
MdDialogModule,
MdAutocompleteModule,
MdMenuModule
],
providers: [
// MdDialog
]
})
export class SharedModule { }
2.2 在组件中使用md-menu组件
<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> <!-- <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 效果展示
4 MdTooltipModule的使用
用途:当某个元素需要显示的内容不能完全显示时将鼠标放上去就会显示,或者鼠标放上去后给出一些提示信息
4.1 在共享模块中导入MdTooltipModule
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import {
MdToolbarModule,
MdIconModule,
MdButtonModule,
MdCardModule,
MdInputModule,
MdListModule,
MdSlideToggleModule,
MdGridListModule,
MdDialogModule,
MdAutocompleteModule,
MdMenuModule,
MdCheckboxModule,
MdTooltipModule
} from '@angular/material'; @NgModule({
imports: [
CommonModule,
MdToolbarModule,
MdIconModule,
MdButtonModule,
MdCardModule,
MdInputModule,
MdListModule,
MdSlideToggleModule,
MdGridListModule,
MdDialogModule,
MdAutocompleteModule,
MdMenuModule,
MdCheckboxModule,
MdTooltipModule
],
declarations: [],
exports: [
CommonModule,
MdToolbarModule,
MdIconModule,
MdButtonModule,
MdCardModule,
MdInputModule,
MdListModule,
MdSlideToggleModule,
MdGridListModule,
MdDialogModule,
MdAutocompleteModule,
MdMenuModule,
MdCheckboxModule,
MdTooltipModule
]
})
export class SharedModule { }
4.2 在需要使用该功能的组件上直接使用md-tooltip指令就可以啦
<div class="panel panel-primary">
<div class="panel-heading">md-tooltip的使用</div>
<div class="panel-body">
<span md-tooltip="重庆火锅">鼠标放上去</span>
</div>
<div class="panel-footer">2018-1-18 14:26:58</div>
</div>
4.3 效果展示
4.4 官方文档
Material使用09 MdCheckboxModule、MdMenuModule、MdTooltipModule的更多相关文章
- Windows7WithSP1/TeamFoundationServer2012update4/SQLServer2012
[Info @09:03:33.737] ====================================================================[Info @ ...
- Material使用10 MdRadioModule、MdDatepickerModule、MdNativeDateModule、MdSelectModule
1 MdRadioModule 相当于<input type="radio"> 2 使用步骤 2.1 在共享模块导入MdRadioModule import { NgM ...
- Material使用05 MdListModule模块 MdButtonToggleModule模块
1 在共享模块中导入MdListModule模块 import { NgModule } from '@angular/core'; import { CommonModule } from '@an ...
- Material使用07 MatGridListModule的使用
1 MatGridListModule简介 对相似数据的展现,尤其是像是图片的展示 使用起来很像表格 官方文档:点击前往 2 MatGridListModule提供的指令 2.1 mat-grid-l ...
- 仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)
在我脑子里还没有Material Design这种概念,就我个人而言,PC端应用扁平化设计必须成为首选,手当其冲的两款即时通讯旺旺和QQ早就完成UI扁平化的更新,然而客户端扁平化的设计本身就存在天生的 ...
- [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout
本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...
- Material使用07 MdGridListModule的使用
1 MatGridListModule简介 对相似数据的展现,尤其是像是图片的展示 使用起来很像表格 官方文档:点击前往 2 MatGridListModule提供的指令 2.1 mat-grid-l ...
- Flutter实战视频-移动电商-09.首页_项目结构建立和获取数据
09.首页_项目结构建立和获取数据 在config下创建service_url.dart 用来配置我们后端接口的配置文件 一个变量存 接口地址,一个接口方法地址 所有后天请求数据的方法都放在这个文件夹 ...
- Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果
Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果 前言: 每次写之前都会来一段(废)话.{心塞...} Google Play首页两个tab背景 ...
随机推荐
- 3.16课·········C#小结
//附加//C#源码,被C#编译器,编译成执念代码(IL)//int16=short.....±32000//int32=int.......±21亿//int64=long......±922亿亿3 ...
- spring mvc 中Uploadify插件的使用
具体过程不写了,直接上代码 jsp代码 $("#uplodefile").uploadify({ 'swf': '/statics/uploadify/uploadify.swf' ...
- 从性能角度分析一下String,List,Map
使用String.subString()方法的时候注意内存溢出的问题 public static void testH() { List<String> strings = new Arr ...
- Linux平台下贪吃蛇游戏的运行
1.参考资料说明: 这是一个在Linux系统下实现的简单的贪吃蛇游戏,同学找帮忙,我就直接在Red Hat中调试了一下,参考的是百度文库中"maosuhan"仁兄的文章,结合自己的 ...
- 0425 os模块 ,模块和包
os模块 *os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相当于shell下cd o ...
- Linux内核源码中的likely和unlikely释疑【转】
本文转载自:https://my.oschina.net/armsky/blog/15320 ikely()与unlikely()在2.6内核中,随处可见,那为什么要用它们?它们之间有什么区别呢? 首 ...
- EntityFramework 学习 一 Entity Lifecycle 实体生命周期
当我们执行CRUD(Create,Read,Update,Delete)操作之前,最重要的是搞明白实体的生命周期和EntityFrameword怎么管理实体 在一个实体的生命周期里,每个实体都有一个实 ...
- memset和memcopy用法
void *memset(void *s, int ch, size_t n); 函数解释:将s中前n个字节 (typedef unsigned int size_t)用 ch 替换并返回 s . m ...
- java错误:The superclass "javax.servlet.http.HttpServlet" was not found on the Java Bu
我们在用Eclipse进行Java web开发时,可能会出现这样的错误:The superclass javax.servlet.http.HttpServlet was not found on t ...
- django admin扩展user表password验证及set_password
一般如果扩展了django user内置表,在admin后台创建新用户的时候密码将会变成明文,故而导致登录不成功.所以我们在admin.py可以通过form自定义进行对password进行操作,可以双 ...