MDL交互組件

四、MDL交互組件

參考代碼

1. 徽章/Badge

徽章/Badge向用戶提供了發現額外信息的視覺線索，它一般是圓型，內容爲數字或其餘字母，緊貼在宿主元素旁邊：

徽章能夠用來無侵入地吸引用戶的注意力，例如：

• 一個新消息通知可使用徽章提醒有幾條未讀信息

• 一個購物車未付款提醒可使用徽章提醒購物車內的商品數量

• 一個加入討論！按鈕可使用徽章提示當前已經加入討論的用戶數

使用MDL徽章組件很簡單，爲宿主元素添加mdl-badge樣式類，而後在data-badge中設置徽章內容：

<any class="mdl-badge" data-badge="1">...</any>

由於徽章組件的尺寸很小，因此不要放太多內容，一般data-badge的值設置爲1~3個字符。

2. 提示框/Tooltip

當鼠標移動到元素上方時，提示框/Tooltip組件能夠爲界面元素提供額外的信息：

在MDL中，爲一個元素添加Tooltip的步驟以下：

<!--1. 爲宿主元素定義一個id -->
<button id="test">TEST</button>
<!--2. 聲明一個tooltip組件，使用*for*屬性綁定到宿主元素上-->
<div class="mdl-tooltip" for="test">這個按鈕沒什麼用;-(</div>

儘管在提示框內可使用HTML片斷，可是Material Design設計語言不建議在提示框中加入圖片等複雜的元素。

3. 按鈕/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>

4. 菜單/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>

5. 滑動條/Sliders

MDL的滑動條/slider組件是HTML5新增元素range input的加強版本。 滑動條由一條水平線及其上的可移動滑塊構成。當用戶移動滑塊時，就能夠 從預設範圍中選擇一個值（左邊是下界，右邊是上界）：

使用MDL的滑動條組件很簡單，爲range input元素應用樣式類mdl-slider和mdl-js-slider便可：

<input type="range" min="0" max="100" class="mdl-slider mdl-js-slider" >

使用range input元素的min和max屬性來設定值的範圍，使用value屬性來設置滑動條的初始值：

<input type="range" min="0" max="100" value="25" class="mdl-slider mdl-js-slider" >

6. 複選按鈕/Checkbox

MDL的複選按鈕/Checkbox組件是標準HTML元素checkbox input的加強版本。複選按鈕組件包含一個標籤和一個開關選擇按鈕：

MDL的複選按鈕/Checkbox組件具備預約義的HTML結構：

<!--1. 聲明組件容器-->
<label class="mdl-checkbox">
    <!--2. 爲checkbox input元素應用mdl樣式類-->
    <input type="checkbox" class="mdl-checkbox__input"/>
    <!--3. 爲標籤元素應用mdl樣式類-->
    <span class="mdl-checkbox__label">標籤</span>
</label>

可使用checkbox input元素的checked屬性設置複選按鈕組件的初始選中狀態。

7. 單選按鈕/Radio button

MDL的單選按鈕/RadioButton組件是標準HTML元素radio input的加強版本。 單選按鈕組件包含一個標籤和一個開關選擇按鈕：

MDL的單選按鈕組件具備固定的HTML結構：

<!--1. 聲明組件容器-->
<label class="mdl-radio mdl-js-radio">
    <!--2.爲input子元素應用mdl樣式類-->
    <input type="radio" class="mdl-radio__button" name="options" value="1"/>
    <!--3.爲label子元素應用mdl樣式類-->
    <span class="mdl-radio__label">選項1</span>
</label>
<!--選項2-->
<label class="mdl-radio mdl-js-radio">
    <input type="radio" class="mdl-radio__button" name="options" value="2"/>
    <span class="mdl-radio__label">選項2</span>
</label>

和複選按鈕不一樣，多個同時出現的單選按鈕組件，其選中狀態是互斥的，任什麼時候刻最多隻有一個能夠被選中。

和複選按鈕相似，使用radio input元素的checked屬性設置單選按鈕的選中狀態。

8. 圖標開關/Icon toggle

MDL的圖標開關/IconToggle組件是標準HTML元素checkbox input的加強版本。圖標開關組件包含一個標籤和一個用戶指定的圖標按鈕，圖標的着色與否用來傳達 當前選項是否被選中：

MDL的圖標開關/IconToggle組件具備預約義的HTML結構：

<!--1. 聲明組件容器-->
<label class="mdl-icon-toggle mdl-js-icon-toggle">
    <!--2. 爲checkbox input元素應用mdl樣式類-->
    <input type="checkbox" class="mdl-icon-toggle__input"/>
    <!--3. 爲圖標元素應用mdl樣式類-->
    <i class="mdl-icon-toggle__label material-icons">format_bold</i>
</label>

9. 進度條/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);

10. 等待指示器/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>

11. 文本輸入/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>

12. 文本輸入 - 動態展開式

一種常見的文本輸入模式具備一個按鈕，點擊這個按鈕將展開輸入框，若是沒有輸入內容，那麼當輸入框失去焦點時將自動隱藏：

動態展開的文本輸入組件有特定的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>

13. 數據表/Data table

MDL的數據表/Data table組件用來呈現密集的數據集：

使用很簡單，爲table元素應用樣式便可：

... ...