本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,
博客地址为http://www.cnblogs.com/jasonnode/ 。
网站上有对应每一小节的在线练习大家可以去试试。
一、徽章/Badge
徽章/Badge向用户提供了发现额外信息的视觉线索,它通常是圆型,内容为数字 或其他字母,紧贴在宿主元素旁边
徽章可以用来无侵入地吸引用户的注意力,例如:
- 一个新消息通知可以使用徽章提醒有几条未读信息
- 一个购物车未付款提醒可以使用徽章提醒购物车内的商品数量
- 一个加入讨论!按钮可以使用徽章提示当前已经加入讨论的用户数
使用MDL徽章组件很简单,为宿主元素添加mdl-badge样式类,然后在data-badge中设置 徽章内容:
<any class="mdl-badge" data-badge="">...</any>
因为徽章组件的尺寸很小,所以不要放太多内容,通常data-badge的值设置为1~3个 字符。
配置选项
MDL class | 说明 |
---|---|
mdl-badge | 声明当前元素为MDL徽章组件 |
mdl-badge--no-background | 声明徽章组件不使用背景色 |
data-badge | 徽章组件使用宿主元素上这个属性值来设置显示内容 |
二、提示框/Tooltip
当鼠标移动到元素上方时,提示框/Tooltip组件可以为界面元素提供额外的信息:
在MDL中,为一个元素添加Tooltip的步骤如下:
<!--. 为宿主元素定义一个id -->
<button id="test">TEST</button>
<!--. 声明一个tooltip组件,使用*for*属性绑定到宿主元素上-->
<div class="mdl-tooltip" for="test">这个按钮没什么用;-(</div>
尽管在提示框内可以使用HTML片段,但是Material Design设计语言不建议在 提示框中加入图片等复杂的元素。
配置选项
MDL class | 说明 |
---|---|
mdl-tooltip | 声明元素为MDL提示框组件 |
mdl-tooltip--large | 为MDL提示框组件应用大字体(14px) |
三、按钮/Button
MDL的按钮/Button组件是标准HTML元素button的增强版本。按钮组件有多种 类型,并且可以添加显示及点击效果:
MDL按钮的显示类型包括:flat, raised, fab, mini-fab, icon. 这些类型 都可以设置为浅灰或彩色,也可以禁止。fab, mini-fab和icon类型的按钮通常 使用一个小图像而不是文字来表征其功能。
使用按钮组件很简单,为button元素声明mdl-button、mdl-js-button及 其他可选的修饰样式类即可:
<!--缺省的扁平/flat按钮-->
<button class="mdl-button mdl-js-button">Save</button>
<!--凸起/raised按钮-->
<button class="mdl-button mdl-js-button mdl-button--raised">Save</button>
<!--浮动动作/FAB按钮-->
<button class="mdl-button mdl-js-button mdl-button--fab">Save</button>
<!--迷你浮动动作/MINI-FAB按钮-->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">Save</button>
<!--彩色凸起/raised按钮-->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Save</button>
<!--具有点击动效的凸起/raised按钮-->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Save</button>
配置选项
MDL class | 说明 |
---|---|
mdl-button | 将元素声明为MDL按钮组件 |
mdl-js-button | 为按钮添加基本的行为逻辑 |
mdl-button--raised | 为按钮应用凸起效果 |
mdl-button--fab | 将按钮设置为圆形,直径56px |
mdl-button--mini-fab | 将fab按钮设置为原型,直径40px。 |
mdl-button--icon | 为按钮应用图标效果,直径32px |
mdl-button--colored | 为按钮应用色彩,使用强调色 |
mdl-button--primary | 为按钮应用基准色 |
mdl-button--accent | 为按钮应用强调色 |
mdl-js-ripple-effect | 为点击动作应用水纹效果 |
四、菜单/Menus
菜单/menu组件提供一组选项供用户选择,用户的选择将执行一个动作、变化设置或 其他可以观察到的效果。当需要用户选择时,显示菜单,当用户完成选择时,关闭菜单:
菜单是成熟然而未标准化的界面组件。
使用mdl-menu样式类声明菜单,使用mdl-menu__item样式类声明菜单项:
<any class="mdl-menu mdl-js-menu">
<any class="mdl-menu__item">...</any>
<any class="mdl-menu__item">...</any>
</any>
配置选项
MDL class | 说明 |
---|---|
mdl-button | 声明元素为按钮组件 |
mdl-js-button | 为按钮组件添加基本的逻辑 |
mdl-button--icon | 使按钮适配图标显示 |
material-icons | 声明元素为图标 |
mdl-menu | 声明元素为菜单组件 |
mdl-menu__item | 声明元素为菜单项 |
mdl-js-ripple-effect | 为点击动作添加水纹效果 |
mdl-menu--top-left | 在按钮之上显示菜单,菜单左边框与按钮对齐 |
mdl-menu--top-right | 在按钮之上显示菜单,菜单右边框与按钮对齐 |
mdl-menu--bottom-left | 在按钮之下显示菜单,菜单左边框与按钮对齐 |
mdl-menu--bottom-right | 在按钮之下显示菜单,菜单右边框与按钮对齐 |
未完待续。。。。
Material Design Lite,简洁惊艳的前端工具箱 之 交互组件。的更多相关文章
-
Material Design Lite,简洁惊艳的前端工具箱 之 容器组件。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...
-
Material Design Lite,简洁惊艳的前端工具箱 之 布局组件。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...
-
Material Design Lite,简洁惊艳的前端工具箱。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...
-
Materialize和Material Design Lite的区别
Material Design Lite是google官方库,Materialize是第三方 Material Design Lite不依赖jquery,Materialize依赖jquery Mat ...
-
MDL---Material Design Lite框架推荐
INTRO material design相比不会陌生, 现在的移动端基本遵循了这个设计规范, 微软退出过一个残次品universal design(花了半个月时间赶出来的规范)也是借鉴了MD的思想, ...
-
基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]
基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1] 原文:基于Vue JS, Webpack 以及Material Design的渐进式web应 ...
-
超实用!9个目前流行的MATERIAL DESIGN前端框架
http://www.uisdc.com/material-design-frameworks-top-9 谷歌推出的Material Design风格已见有一些APP UI采用,视觉和交互体验都很棒 ...
-
轻量级 Material Design 前端框架 MDUI (纯html,css,与css框架跟react vue不冲突)
MDUI 是一个轻量级的 Material Design 前端框架,对照着 Material Design 文档进行开发,争取 1:1 实现 Material Design 中的组件. 多主题支持 M ...
-
15个优秀的 Material Design(材料设计)案例
Material Design (材料设计)是由谷歌创建和设计的一种设计语言,结合成功的设计的经典原则以及创新科技.谷歌的目标是开发一个设计系统,让所有的产品在任何平台上拥有统一的用户体验.全新的设计 ...
随机推荐
-
php 两段文本对比,不同的文字显示高亮
php 两段文本对比,不同的文字显示高亮[下面这个只能区分错误后面的..] <?php $str1 ="MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwgg ...
-
Levenberg-Marquardt算法基础知识
Levenberg-Marquardt算法基础知识 (2013-01-07 16:56:17) 转载▼ 什么是最优化?Levenberg-Marquardt算法是最优化算法中的一种.最优化是寻找使 ...
-
cordovas禁止横屏
cordovas禁止横屏 官网 http://cordova.apache.org/docs/en/latest/config_ref/index.html#preference 配置config.x ...
-
uva 10562 undraw the trees(烂题) ——yhx
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABB4AAAM9CAYAAAA7ObAlAAAgAElEQVR4nOyd25GsupKGywVswAV8wA ...
-
Android使用ZXing生成带图片的二维码
效果图如下: 制作过程很简单的就是在原始的二维码图片上添加一个logn图标,代码的注释写得很详细,也就不给大家啰嗦了 package com.example.day44_02_qrcodewithlo ...
-
指定 ubuntu server ip
指定 ubuntu server ip,一共就两步. ■编辑配置文件sudo vi /etc/network/interfaces ■重启网络配置sudo /etc/init.d/networking ...
-
编译器的未来——我们还需要C++么?
在未来我们还需要纯C++开发模式么? 随着C++11的诞生,C++已经越来越臃肿,从03的时候就觉得C++实在是太复杂了.以一个合格C++程序员的标准来简单的来说3-5年略有小成,5-8年才可以说自己 ...
-
Java多线程编程模式实战指南:Active Object模式(下)
Active Object模式的评价与实现考量 Active Object模式通过将方法的调用与执行分离,实现了异步编程.有利于提高并发性,从而提高系统的吞吐率. Active Object模式还有个 ...
-
Android自定义垂直滚动自动选择日期控件
------------------本博客如未明正声明转载,皆为原创,转载请注明出处!------------------ 项目中需要一个日期选择控件,该日期选择控件是垂直滚动,停止滚动时需要校正日期 ...
-
2017-12-09 JavaScript实现ZLOGO子集: 测试用例
续前文JavaScript实现ZLOGO子集: 前进+转向. 在添加新功能之前, 先添加测试用例, 以应对日益复杂的代码. 选择使用QUnit编写运行测试用例. 暂时对比较复杂和I/O无关的部分进行测 ...