Material Design —— 高级(二)

 

九、进度条/Progress bar

MDL的进度条/progress bar组件用来提供后台活动的可视化反馈。进度条是一个水平的 长条,可以包含动画以传递工作中的感觉。

使用MDL进度条/Progress bar组件很简单:

<any class="mdl-progress mdl-js-progress "></any>

如果不需要提供给用户进度完成的具体百分比,可以附加一个动画:

<any class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></any>

如果需要显示进度百分比,需要使用挂接在DOM对象上的MaterialProgress 变量的setProgress()方法:

var el = document.querySelector("#p1");
//setProgress()方法接受一个0~100的值
el.MaterialProgress.setProgress(80);

如果需要同时显示一个视频流的缓冲及播放情况,可以使用MaterialProgress变量的 setBuffer()方法,这个方法将对未缓冲的部分播放一个动画来表达缓冲效果:

var el = document.querySelector("#p1");
//setBuffer()方法接受一个0~100的值
el.MaterialProgress.setBuffer(80);

配置选项

 

MDL class说明
mdl-progress 声明元素为进度条组件
mdl-js-progress 为进度条组件添加基本的行为逻辑
mdl-progress__indeterminate 为元素应用动画效果。可选

 

十、等待指示器/Spinner

MDL的等待指示器/spinner组件是等待图标的增强版本,它使用一个边框色彩动态变化 的圆框,清晰地向用户传达作业已经开始、还未完成的状况。

使用spinner组件非常简单:

<any class="mdl-spinner mdl-js-spinner"></any>

spinner默认是隐藏的,为其应用is-active样式进行激活:

<any class="mdl-spinner mdl-js-spinner is-active"></any>

配置选项

MDL class说明
mdl-spinner 声明元素为spinner组件
mdl-js-spinner 为spinner增加基本的行为逻辑
is-active 显示spinner组件并激活动画
mdl-spinner--single-color 只使用单一色彩

 

十一、文本输入/Text Field

 MDL的文本输入/Text Field组件是对标准HTMLtext input元素的封装。

文本输入组件有特定的HTML结构:

<!--1.声明组件-->
<div class="mdl-textfield mdl-js-textfield">
    <!--2.声明组件的input元素-->
    <input type="text" class="mdl-textfield__input">
    <!--3.声明组件的label元素-->
    <label class="mdl-textfield__label">Your Name</label>
    <!--4.声明组件的error元素-->
    <span class="mdl-textfield__error">Error!</span>
</div>

error元素默认是隐藏的,用来向用户反馈输入的错误。可以为input元素设置 pattern属性(这是HTML5的新特性),当用户的输入与pattern指定的正则 表达式不符时,将显示error元素:

<input type="text" pattern="-?[0-9]*(\.[0-9]+)?">

上面的正则表达式将检测用户的输入是否是一个数值,例如:-123.456 。

默认情况下,当用户开始输入时,标签将消失。可以为组件应用mdl-textfield--floating-label样式开启浮动标签模式:

<!--用户输入时,标签将浮动在输入行上方-->
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">...</div>

也可以将input元素换成textarea元素,这样将允许多行输入:

<div class="mdl-textfield mdl-js-textfield">
    <!--使用rows属性声明行数-->
    <textarea class="mdl-textfield__input" rows="3"></textarea>
    <label class="mdl-textfield__label">Memo</label>
</div>

配置选项

MDL class说明
mdl-textfield 声明元素为文本输入组件
mdl-js-textfield 为文本输入组件添加基本的行为逻辑
mdl-textfield__input 为input元素应用此样式
mdl-textfield__label 为label元素应用此样式
mdl-textfield--floating-label 为文本输入组件应用浮动标签效果
mdl-textfield__error 声明span元素为MDL错误信息容器

 

十二、文本输入 - 动态展开式

一种常见的文本输入模式具有一个按钮,点击这个按钮将展开输入框,如果 没有输入内容,那么当输入框失去焦点时将自动隐藏。

动态展开的文本输入组件有特定的HTML结构:

<!--1.使用expandable样式类声明动态展开的文本输入组件-->
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
    <!--2. 声明触发按钮,使用属性for绑定到input元素-->
    <button class="mdl-button mdl-js-button" for="kw_inp">search</button>
    <!--3. 声明文本输入框容器-->
    <div class="mdl-textfield__expandable-holder">
        <!--4.声明input元素,使用属性id声明锚点-->
        <input type="text" class="mdl-textfield__input" id="kw_inp">
        <!--5.声明label元素-->
        <label class="mdl-textfield__label">keywords</label>
    </div>
</div>

配置选项

MDL class说明
mdl-textfield--expandable 声明元素为可展开文本输入组件
mdl-input__expandable-holder 声明元素为文本输入元素的容器

 

十三、数据表/Data table

 MDL的数据表/Data table组件用来呈现密集的数据集。

使用很简单,为table元素应用样式即可:

<table class="mdl-data-table mdl-js-data-table">
    <thead></thead>
    <tbody></tbody>
</table>

配置选项

MDL class说明
mdl-data-table 声明元素为数据表组件
mdl-js-data-table 为数据表添加基本的行为逻辑
mdl-data-table--selectable 为数据表的每一条记录添加复选按钮,应用在table元素上
mdl-data-table__cell--non-numeric 声明单元格内容非数字,使单元格文字左对齐