免費AI編程助手
Material Design Lite 按鈕
2018-12-19 18:17 更新
該MDL提供多種CSS類各種預先定義的外觀和行為增強應用到按鈕。下表中提到的可用類和它們的影響。
| SN | 類名稱和說明 |
|---|---|
| 1 | MDL-按鈕 設置按鈕作為MDL成分，必需的。 |
| 2 | MDL-JS-按鈕 增加了基本的MDL行為按鈕，必需的。 |
| 3 | （沒有） 設置平面顯示效果按鈕，默認值。 |
| 4 | MDL-按鈕-募集 提高顯示效果設置，可以與晶圓廠，迷你晶圓廠和圖標相互獨占使用。 |
| 五 | MDL-按鈕-晶圓廠 集FAB（圓形）的顯示效果，可以有凸起，迷你晶圓廠和圖標相互獨占使用。 |
| 6 | MDL-按鈕-迷你晶圓廠 集迷你晶圓廠（晶圓小圓形）的顯示效果，可以有凸起，F(xiàn)AB和圖標相互獨占使用。 |
| 7 | MDL-按鈕-圖標 設置圖標（小平原圓形）的顯示效果，可以有凸起，F(xiàn)AB和迷你晶圓廠相互獨占使用。 |
| 8 | MDL-按鈕-有色 集彩色那里的顏色在material.min.css定義的顯示效果。 |
| 9 | MDL-按鈕-初級 設置在那里的顏色在material.min.css定義的主色的顯示效果。 |
| 10 | MDL-按鈕-重音 設置在那里的顏色在material.min.css定義強調色的顯示效果。 |
| 11 | MDL-JS-漣漪效應 套波紋點擊效果，可以組合使用與任何其他類。 |
例
下面的例子展示了使用MDL-按鈕類來顯示不同類型的按鈕。
mdl_buttons.htm
<html>
<head>
<script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
<link rel="stylesheet" rel="external nofollow" target="_blank" >
<link rel="stylesheet" rel="external nofollow" target="_blank" >
</head>
<body>
<table border="0">
<tbody>
<tr>
<td><button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"><i class="material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Colored fab (circular) display effect</td>
<td>Colored fab (circular) with ripple display effect</td>
<td> </td>
</tr>
<tr>
<td><button class="mdl-button mdl-js-button mdl-button--fab"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-button--fab" disabled><i class="material-icons">add</i></button></td>
</tr>
<tr>
<td>Plain fab (circular) display effect</td>
<td>Plain fab (circular) with ripple display effect</td>
<td>Plain fab (circular) and disabled</td>
</tr>
<tr>
<td><button class="mdl-button mdl-js-button mdl-button--raised"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-button--raised" disabled><i class="material-icons">add</i></button></td>
</tr>
<tr>
<td>Raised button</td>
<td>Raised button with ripple display effect</td>
<td>Raised button and disabled</td>
</tr>
<tr>
<td><button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"><i class="material-icons">add</i></button></td>
</tr>
<tr>
<td>Colored Raised button</td>
<td>Accent-colored Raised button</td>
<td>Accent-colored raised button with ripple effect</td>
</tr>
<tr>
<td><button class="mdl-button mdl-js-button"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-js-ripple-effect"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button" disabled><i class="material-icons">add</i></button></td>
</tr>
<tr>
<td>Flat button</td>
<td>Flat button with ripple effect</td>
<td>Disabled flat button</td>
</tr>
<tr>
<td><button class="mdl-button mdl-js-button mdl-button--primary"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-button--accent"><i class="material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Primary Flat button</td>
<td>Accent-colored Flat button</td>
<td> </td>
</tr>
<tr>
<td><button class="mdl-button mdl-js-button mdl-button--icon"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored"><i class="material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Icon button</td>
<td>Colored Icon button</td>
<td> </td>
</tr>
<tr>
<td><button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab"><i class="material-icons">add</i></button></td>
<td><button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"><i class="material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Mini Colored fab (circular) display effect</td>
<td>Mini Colored fab (circular) with ripple display effect</td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>
結果
驗證結果。
以上內容是否對您有幫助：
更多建議：