Materyal Tasarımı Lite - Metin Alanları
MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı türlerdeki metin girişlerini görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listeler.
Sr.No. | Sınıf Adı ve Tanımı |
---|---|
1 | mdl-textfield Konteyneri bir MDL bileşeni olarak tanımlar ve "dış" div öğesinde gereklidir. |
2 | mdl-js-textfield Giriş için temel MDL davranışını ayarlar ve "dış" div öğesinde gereklidir. |
3 | mdl-textfield__input Öğeyi metin alanı girişi olarak tanımlar ve girdi veya metin alanı öğesi için gereklidir. |
4 | mdl-textfield__label Öğeyi metin alanı etiketi olarak tanımlar ve giriş veya metin alanı öğeleri için etiket öğesinde gereklidir. |
5 | mdl-textfield--floating-label Yüzen etiket efekti uygular ve isteğe bağlıdır; "dış" div öğesine gider. |
6 | mdl-textfield__error Açıklığı bir MDL hata mesajı olarak tanımlar ve isteğe bağlıdır; desenli MDL girdi elemanı için span elemanına devam eder. |
7 | mdl-textfield--expandable Bir div'i MDL genişletilebilir metin alanı kabı olarak tanımlar; genişletilebilir giriş alanları için kullanılır ve "dış" div öğesinde gereklidir. |
8 | mdl-button Etiketi bir MDL simge düğmesi olarak tanımlar; genişletilebilir giriş alanları için kullanılır ve "dış" div'in etiket öğesinde gereklidir. |
9 | mdl-js-button Simge kabına temel davranışı ayarlar; genişletilebilir giriş alanları için kullanılır ve "dış" div'in etiket öğesinde gereklidir. |
10 | mdl-button--icon Etiketi bir MDL simge kabı olarak tanımlar; genişletilebilir giriş alanları için kullanılır ve "dış" div'in etiket öğesinde gereklidir. |
11 | mdl-input__expandable-holder Bir kabı bir MDL bileşeni olarak tanımlar; genişletilebilir giriş alanları için kullanılır ve "iç" div öğesinde gereklidir. |
12 | is-invalid Metin alanını ilk yüklemede geçersiz olarak tanımlar ve mdl-textfield öğesinde isteğe bağlıdır. |
Misal
Aşağıdaki örnek, farklı metin alanı türlerini göstermek için mdl-textfield sınıflarının kullanımını anlamanıza yardımcı olacaktır.
mdl_textfields.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">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Simple Text Field</td><td>Numeric Text Field</td>
<td>Disabled Text Field</td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text" id = "text1">
<label class = "mdl-textfield__label" for = "text1">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(\.[0-9]+)?" id = "text2">
<label class = "mdl-textfield__label" for = "text2">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
id = "text3" disabled>
<label class = "mdl-textfield__label" for = "text3">
Disabled...</label>
</div>
</form>
</td>
</tr>
<tr><td>Simple Text Field with Floating Label</td>
<td>Numeric Text Field with Floating Label</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text" id = "text4">
<label class = "mdl-textfield__label" for = "text4">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(\.[0-9]+)?" id = "text5">
<label class = "mdl-textfield__label" for = "text5">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td> </td>
</tr>
<tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<textarea class = "mdl-textfield__input" type = "text" rows = "3"
id = "text7" ></textarea>
<label class = "mdl-textfield__label" for = "text7">Lines...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class = "mdl-button mdl-js-button mdl-button--icon"
for = "text8">
<i class = "material-icons">search</i>
</label>
<div class = "mdl-textfield__expandable-holder">
<input class = "mdl-textfield__input" type = "text" id = "text8">
<label class = "mdl-textfield__label" for = "sample-expandable">
Expandable Input</label>
</div>
</div>
</form>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
Sonuç
Sonucu doğrulayın.