Material Design Lite - Anahtarlar
MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı onay kutuları türlerini anahtarlar olarak görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | mdl-switch Etiketi bir MDL bileşeni olarak tanımlar ve etiket öğesinde gereklidir. |
| 2 | mdl-js-switch Etiketlenecek temel MDL davranışını ayarlar ve etiket öğesinde gereklidir. |
| 3 | mdl-switch__input Geçiş için temel MDL davranışını ayarlar ve giriş öğesinde (anahtar) gereklidir. |
| 4 | mdl-switch__label Temel MDL davranışını resim yazısına ayarlar ve giriş öğesinde (başlık) gereklidir. |
| 5 | mdl-js-ripple-effect Dalgalanma tıklama efektini ayarlar ve isteğe bağlıdır; giriş elemanına (anahtar) değil etiket elemanına gider. |
Misal
Aşağıdaki örnek, mdl-anahtar sınıflarının ve anahtar olarak farklı onay kutusu türlerinin kullanımını anlamanıza yardımcı olacaktır.
mdl_switches.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>
<tr><td>On Switch</td><td>Off Switch</td>
<td>Disabled Switch</td></tr>
<tr>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-1">
<input type = "checkbox" id = "switch-1"
class = "mdl-switch__input" checked>
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input">
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input" disabled>
</label>
</td>
</tr>
</table>
</body>
</html>Sonuç
Sonucu doğrulayın.