閱讀(2.2k) 書(shū)簽贊(0) 我要糾錯(cuò)

Material Design Lite 按鈕

2018-12-19 18:17 更新

該MDL提供多種CSS類(lèi)各種預(yù)先定義的外觀(guān)和行為增強(qiáng)應(yīng)用到按鈕。下表中提到的可用類(lèi)和它們的影響。

SN	類(lèi)名稱(chēng)和說(shuō)明
1	MDL-按鈕設(shè)置按鈕作為MDL成分，必需的。
2	MDL-JS-按鈕增加了基本的MDL行為按鈕，必需的。
3	（沒(méi)有）設(shè)置平面顯示效果按鈕，默認(rèn)值。
4	MDL-按鈕-募集提高顯示效果設(shè)置，可以與晶圓廠(chǎng)，迷你晶圓廠(chǎng)和圖標(biāo)相互獨(dú)占使用。
五	MDL-按鈕-晶圓廠(chǎng) 集FAB（圓形）的顯示效果，可以有凸起，迷你晶圓廠(chǎng)和圖標(biāo)相互獨(dú)占使用。
6	MDL-按鈕-迷你晶圓廠(chǎng) 集迷你晶圓廠(chǎng)（晶圓小圓形）的顯示效果，可以有凸起，F(xiàn)AB和圖標(biāo)相互獨(dú)占使用。
7	MDL-按鈕-圖標(biāo) 設(shè)置圖標(biāo)（小平原圓形）的顯示效果，可以有凸起，F(xiàn)AB和迷你晶圓廠(chǎng)相互獨(dú)占使用。
8	MDL-按鈕-有色集彩色那里的顏色在material.min.css定義的顯示效果。
9	MDL-按鈕-初級(jí) 設(shè)置在那里的顏色在material.min.css定義的主色的顯示效果。
10	MDL-按鈕-重音設(shè)置在那里的顏色在material.min.css定義強(qiáng)調(diào)色的顯示效果。
11	MDL-JS-漣漪效應(yīng) 套波紋點(diǎn)擊效果，可以組合使用與任何其他類(lèi)。

例

下面的例子展示了使用MDL-按鈕類(lèi)來(lái)顯示不同類(lèi)型的按鈕。

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>

結(jié)果

驗(yàn)證結(jié)果。

以上內(nèi)容是否對(duì)您有幫助：

← Material Design Lite 徽章

Material Design Lite 卡 →

寫(xiě)筆記

我要補(bǔ)充