免費(fèi)AI編程助手
Material Design Lite 文本框
2018-12-19 18:17 更新
該MDL提供多種CSS類各種預(yù)先定義的外觀和行為增強(qiáng)功能適用于顯示各種類型的文本輸入。下表中提到的可用類和它們的影響。
| SN | 類名稱和說明 |
|---|---|
| 1 | MDL-文本框 標(biāo)識容器作為MDL成分，是必需的“外”的div元素。 |
| 2 | MDL-JS-文本框 設(shè)置基本MDL行為輸入和需要“外”的div元素。 |
| 3 | MDL-textfield__input 標(biāo)識元素作為文本框輸入需要輸入或textarea元素。 |
| 4 | MDL-textfield__label 標(biāo)識元素作為文本字段標(biāo)簽，需要輸入或textarea的元素標(biāo)簽元素。 |
| 五 | MDL-文本框-浮動標(biāo)簽 適用浮動標(biāo)簽效應(yīng)，是可選的;去“外”的div元素。 |
| 6 | MDL-textfield__error 標(biāo)識跨度為MDL錯誤消息，并且是可選的;去與模式MDL輸入元素跨度元素上。 |
| 7 | MDL-文本框-擴(kuò)展 標(biāo)識的div作為MDL擴(kuò)展的文本字段容器;用于擴(kuò)展輸入字段，并要求“外”的div元素。 |
| 8 | MDL-按鈕 標(biāo)簽標(biāo)識作為MDL圖標(biāo)按鈕;用于擴(kuò)展輸入字段，并要求“外”的div標(biāo)簽元素。 |
| 9 | MDL-JS-按鈕 設(shè)置基本行為圖標(biāo)容器;用于擴(kuò)展輸入字段，并要求“外”的div標(biāo)簽元素。 |
| 10 | MDL-按鈕-圖標(biāo) 標(biāo)簽標(biāo)識作為MDL圖標(biāo)容器;用于擴(kuò)展輸入字段，并要求“外”的div標(biāo)簽元素。 |
| 11 | MDL-input__expandable持有人 標(biāo)識為一個MDL成分的容器;用于擴(kuò)展輸入字段，并且需要“內(nèi)部”的div元素。 |
| 12 | 是無效的 標(biāo)識文本框的初始加載為無效，MDL-文本框元素可選。 |
例
下面的例子展示了使用MDL-文本框類，以顯示不同類型的文本框的。
mdl_textfields.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" >
<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>
結(jié)果
驗(yàn)證結(jié)果。
以上內(nèi)容是否對您有幫助：
更多建議：