머티리얼 디자인 라이트-버튼
MDL은 다양한 CSS 클래스를 제공하여 미리 정의 된 다양한 시각적 및 동작 향상을 버튼에 적용합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나열되어 있습니다.
| Sr. 아니. | 클래스 이름 및 설명 |
|---|---|
| 1 | mdl-button 버튼을 MDL 구성 요소로 설정합니다. |
| 2 | mdl-js-button 버튼에 기본 MDL 동작을 추가합니다 (필수). |
| 삼 | (none) 평면 디스플레이 효과를 버튼 (기본값)으로 설정합니다. |
| 4 | mdl-button--raised 제기 된 표시 효과를 설정합니다. 이것은 fab, mini-fab 및 icon과 상호 배타적입니다. |
| 5 | mdl-button--fab 팹 (원형) 디스플레이 효과를 설정합니다. 이것은 제기, 미니 팹 및 아이콘과 상호 배타적입니다. |
| 6 | mdl-button--mini-fab 미니 팹 (소형 팹 원형) 디스플레이 효과를 설정합니다. 이것은 Raised, fab 및 icon과 상호 배타적입니다. |
| 7 | mdl-button--icon 아이콘 (작은 일반 원형) 표시 효과를 설정합니다. 이것은 Raised, fab 및 mini-fab과 상호 배타적입니다. |
| 8 | mdl-button--colored material.min.css에서 색상이 정의 된 색상 표시 효과를 설정합니다. |
| 9 | mdl-button--primary material.min.css에서 색상이 정의 된 기본 색상 표시 효과를 설정합니다. |
| 10 | mdl-button--accent material.min.css에서 색상이 정의 된 강조 색상 표시 효과를 설정합니다. |
| 11 | mdl-js-ripple-effect 잔물결 클릭 효과를 설정하고 다른 클래스와 함께 사용할 수 있습니다. |
예
다음 예는 mdl-button 다양한 유형의 버튼을 표시하는 클래스.
mdl_buttons.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</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>결과
결과를 확인하십시오.