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>
相關文章
- Material Design Lite元件之徽章Material Design元件
- 純CSS Material Design風格按鈕CSSMaterial Design
- SVG 建立 Material Design 波紋效果按鈕SVGMaterial Design
- SVG建立Material Design波紋效果按鈕SVGMaterial Design
- Android Material Design控制元件使用(二)——FloatButton TextInputEditText TextInputLayout 按鈕AndroidMaterial Design控制元件
- Material Design元件之AppBarLayoutMaterial Design元件APP
- Material Design 元件之FloatingActionButtonMaterial Design元件
- Material Design 元件之FloatingActionBuMaterial Design元件
- Material Design Lite,簡潔驚豔的前端工具箱。Material Design前端
- Material Design:為什麼懸浮響應按鈕是糟糕的 UX 設計Material DesignUX
- Android之Material DesignAndroidMaterial Design
- Material Design 之 TabLayout 使用Material DesignTabLayout
- Material Design之AppBarLayoutMaterial DesignAPP
- Material Design 之 TextInputLayout和TextInputEditTextMaterial Design
- flutter的進階之路之Material Design與IOS風格元件FlutterMaterial DesigniOS元件
- Material DesignMaterial Design
- Material Design - 常用控制元件介紹和使用Material Design控制元件
- Material Design 相容性控制元件學習Material Design控制元件
- Material Design 控制元件知識梳理(8) TabLayoutMaterial Design控制元件TabLayout
- Material Design 控制元件知識梳理(9) TextInputLayoutMaterial Design控制元件
- Material Design 控制元件知識梳理(6) SnackbarMaterial Design控制元件
- Material Design AnimationMaterial Design
- Material Design時代Material Design
- Material Design 系列之 CardView、FAB 和 SnackbarMaterial DesignView
- Material Design實戰Material Design
- 安卓Material Design(2)安卓Material Design
- 安卓Material Design(3)安卓Material Design
- 安卓Material Design(5)安卓Material Design
- 用CSS Houdini實現一個Material風格的按鈕CSS
- Material Design 控制元件知識梳理(5) DrawerLayout && NavigationViewMaterial Design控制元件NavigationView
- Material Design 控制元件知識梳理(4) FloatingActionButtonMaterial Design控制元件
- Angular Material 攻略 03 angular Material Design 安裝AngularMaterial Design
- Material Design 之 Behavior 的使用和自定義 BehaviorMaterial Design
- Material Design 控制元件知識梳理(7) BottomNavigationBarMaterial Design控制元件Navigation
- 可能被忽略的"按鈕元件"細節元件
- C++ Qt開發:PushButton按鈕元件C++QT元件
- tkinter中button按鈕控制元件(三)控制元件
- Qt控制元件精講一:按鈕QT控制元件