Material Design Lite元件之按鈕

1.介紹

Material Design Lite（MDL）按鈕元件是標準HTML <button>元素的增強版。 一個按鈕由文字和/或影像組成，清楚地表明使用者點選或觸控時會發生什麼動作。 MDL按鈕元件提供各種型別的按鈕，並允許您新增顯示效果和點選效果。無論網站的內容或功能如何，按鈕都是大多數使用者介面中無處不在的功能。 因此，它們的設計和使用是整體使用者體驗的重要因素。 

可用的按鈕的顯示型別是平的（預設），凸起的，FAB按鈕，mini-fab按鈕和圖示; 這些型別中的任何一種都可能是普通的（淺灰色）或彩色的，並且可能會初始化或以程式設計方式禁用。 FAB按鈕，mini-fab按鈕和圖示按鈕型別通常使用小影像作為標題而不是文字。

2.配置選項

MDL CSS類將各種預定義的視覺和行為增強應用於按鈕。下表列出了可用的類及其效果。

類名	效果	備註
mdl-button	定義標籤為MDL元件	必需
mdl-js-button	為按鈕元件新增預設效果	必需
mdl-button--raised	新增點選陰影效果	不與fab, mini-fab, 和icon效果疊加
mdl-button--fab	設定按鈕為圓形	不與fab, mini-fab, 和icon效果疊加
mdl-button--mini-fab	設定按鈕為小圓形	需要先引用fab，不與raised和icon效果疊加
mdl-button--icon	設定按鈕為icon效果	不與raised，fab和mini-fab效果疊加
mdl-button--colored	為按鈕新增顏色效果	顏色定義在material.min.css檔案中
mdl-button--primary	設定按鈕為預設顏色	顏色定義在material.min.css檔案中
mdl-button--accent	為按鈕新增覆蓋顏色	顏色定義在material.min.css檔案中
mdl-js-ripple-effect	新增點選波紋效果	可以與其他類結合使用

注意：所有型別的按鈕都提供了使用disabled禁用功能：

<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" disabled>Raised Ripples Disabled</button>

可以使用mdl-button - disabled類實現相同的樣式，但不禁用元素的功能。 該屬性可以通過指令碼程式設計新增或刪除。

3.應用舉例

3.1.設定為帶顏色的圓形按鈕

帶顏色的圓形按鈕和附帶點選波紋效果

<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>
<!-- Colored FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
  <i class="material-icons">add</i>
</button>

3.2.設定為不帶顏色的圓形按鈕

預設、帶點選波紋效果和禁用點選

<!-- FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab">
  <i class="material-icons">add</i>
</button>
<!-- FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
  <i class="material-icons">add</i>
</button>
<!-- Disabled FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab" disabled>
  <i class="material-icons">add</i>
</button>

3.3.矩形按鈕

點選帶陰影、點選帶陰影波紋效果和禁用點選

<!-- Raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised">
  Button
</button>
<!-- Raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
  Button
</button>
<!-- Raised disabled button -->
<button class="mdl-button mdl-js-button mdl-button--raised" disabled>
  Button
</button>

3.4.矩形按鈕帶顏色按鈕

預設顏色帶點選陰影、覆蓋顏色帶點選陰影和覆蓋顏色帶點選波紋

<!-- Colored raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
  Button
</button>
<!-- Accent-colored raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
  Button
</button>
<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
  Button
</button>

3.5.預設按鈕

預設按鈕，預設帶點選波紋和禁用點選

<!-- Flat button -->
<button class="mdl-button mdl-js-button">
  Button
</button>
<!-- Flat button with ripple -->
<button class="mdl-button mdl-js-button mdl-js-ripple-effect">
  Button
</button>
<!-- Disabled flat button -->
<button class="mdl-button mdl-js-button" disabled>
  Button
</button>

3.6.預設按鈕帶顏色

預設顏色和覆蓋顏色

<!-- Primary-colored flat button -->
<button class="mdl-button mdl-js-button mdl-button--primary">
  Button
</button>
<!-- Accent-colored flat button -->
<button class="mdl-button mdl-js-button mdl-button--accent">
  Button
</button>

3.7.設定為iscon圖示按鈕

預設顏色和設定顏色

<!-- Icon button -->
<button class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">mood</i>
</button>
<!-- Colored icon button -->
<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
  <i class="material-icons">mood</i>
</button>

3.8.小圓形按鈕

小圓形按鈕不帶顏色和帶顏色

<!-- Mini FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
  <i class="material-icons">add</i>
</button>
<!-- Colored mini FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>