Material Design Lite - Textfields
MDL cung cấp một loạt các lớp CSS để áp dụng các cải tiến hình ảnh và hành vi khác nhau được xác định trước và hiển thị các loại đầu vào văn bản khác nhau. Bảng sau liệt kê các lớp có sẵn và tác dụng của chúng.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | mdl-textfield Xác định vùng chứa là một thành phần MDL và được yêu cầu trên phần tử div "bên ngoài". |
| 2 | mdl-js-textfield Đặt hành vi MDL cơ bản cho đầu vào và được yêu cầu trên phần tử div "bên ngoài". |
| 3 | mdl-textfield__input Xác định phần tử là đầu vào trường văn bản và được yêu cầu trên phần tử đầu vào hoặc phần tử textarea. |
| 4 | mdl-textfield__label Xác định phần tử là nhãn trường văn bản và được yêu cầu trên phần tử nhãn cho các phần tử đầu vào hoặc vùng văn bản. |
| 5 | mdl-textfield--floating-label Áp dụng hiệu ứng nhãn nổi và là tùy chọn; đi vào phần tử div "bên ngoài". |
| 6 | mdl-textfield__error Xác định span dưới dạng thông báo lỗi MDL và là tùy chọn; đi vào phần tử span cho phần tử đầu vào MDL với mẫu. |
| 7 | mdl-textfield--expandable Xác định một div là một vùng chứa trường văn bản có thể mở rộng MDL; được sử dụng cho các trường đầu vào có thể mở rộng và được yêu cầu trên phần tử div "bên ngoài". |
| số 8 | mdl-button Xác định nhãn dưới dạng nút biểu tượng MDL; được sử dụng cho các trường đầu vào có thể mở rộng và được yêu cầu trên phần tử nhãn của div "bên ngoài". |
| 9 | mdl-js-button Đặt hành vi cơ bản cho vùng chứa biểu tượng; được sử dụng cho các trường đầu vào có thể mở rộng và được yêu cầu trên phần tử nhãn của div "bên ngoài". |
| 10 | mdl-button--icon Xác định nhãn như một vùng chứa biểu tượng MDL; được sử dụng cho các trường đầu vào có thể mở rộng và được yêu cầu trên phần tử nhãn của div "bên ngoài". |
| 11 | mdl-input__expandable-holder Xác định một vùng chứa như một thành phần MDL; được sử dụng cho các trường đầu vào có thể mở rộng và được yêu cầu trên phần tử div "bên trong". |
| 12 | is-invalid Xác định trường văn bản là không hợp lệ khi tải ban đầu và là tùy chọn trên phần tử mdl-textfield. |
Thí dụ
Ví dụ sau sẽ giúp bạn hiểu việc sử dụng các lớp mdl-textfield để hiển thị các loại trường văn bản khác nhau.
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>Kết quả
Xác minh kết quả.