Material Design 风格 InputText 使用及实现方法
随着移动设备的飞速发展，移动应用和网站的用户界面设计成为了研发必须要考虑的一个方面。Google 推出的 Material Design 设计风格影响了许多 UI 设计师的设计思路，并逐渐成为了移动应用和网站的主流设计风格。在 Material Design 设计中，InputText 是用户输入控件之一，本文将介绍如何使用 Material Design 风格的 InputText，并给出实现方法和示例代码。
一、Material Design 风格 InputText 的使用
Material Design 风格的 InputText 控件，包含了许多可以定制的项，如提示文字、字体颜色、背景颜色、输入格式、字数限制等。
在进行 InputText 的设计时，应遵循 Material Design 约定，包括：
1.使用卡片式设计。
2.使用全宽度设计，让用户更容易在移动设备上输入。
3.使用合适的字体和字体颜色。
4.使用合适的提示文字和输入格式。
5.使用动态的错误提示。
6.使用合适的背景颜色和输入框形状。
二、Material Design 风格 InputText 的实现方法
以下是实现 Material Design 风格的 InputText 的步骤：
1.在项目中引入 Material Design 风格的库文件。
2.在 HTML 文件中，使用 Material Design 风格的 InputText 的代码如下：
<div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="sample1"> <label class="mdl-textfield__label" for="sample1">Text input</label> </div>
3.使用 CSS 属性控制 InputText 的样式。可以自定义输入文字颜色、背景颜色、提示文字字体等样式。
// www.javascriptcn.com code example
.mdl-textfield__input {
background-color: #fff;
border: none;
border-bottom: 1px solid #f0f0f0;
color: #333;
font-size: 16px;
height: 48px;
padding: 0 16px;
}
.mdl-textfield__label {
color: #666;
font-size: 16px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 0;
top: 16px;
transition: 0.2s ease all;
}
.mdl-textfield--floating-label .mdl-textfield__label {
-moz-transform: translateY(-14px);
-ms-transform: translateY(-14px);
-o-transform: translateY(-14px);
-webkit-transform: translateY(-14px);
transform: translateY(-14px);
font-size: 12px;
}
.mdl-textfield--floating-label.is-focused .mdl-textfield__label {
-moz-transform: translateY(-34px);
-ms-transform: translateY(-34px);
-o-transform: translateY(-34px);
-webkit-transform: translateY(-34px);
transform: translateY(-34px);
font-size: 12px;
}`三、Material Design 风格 InputText 的示例代码
下面是一段 Material Design 风格 InputText 的示例代码：
// www.javascriptcn.com code example
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Material Design 风格 InputText 实例</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<style>
.mdl-textfield__input {
background-color: #fff;
border: none;
border-bottom: 1px solid #f0f0f0;
border-radius: 2px;
color: #333;
font-size: 16px;
height: 48px;
padding: 0 16px;
}
.mdl-textfield__label {
color: #666;
font-size: 16px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 0;
top: 16px;
transition: 0.2s ease all;
}
.mdl-textfield--floating-label .mdl-textfield__label {
-moz-transform: translateY(-14px);
-ms-transform: translateY(-14px);
-o-transform: translateY(-14px);
-webkit-transform: translateY(-14px);
transform: translateY(-14px);
font-size: 12px;
}
.mdl-textfield--floating-label.is-focused .mdl-textfield__label {
-moz-transform: translateY(-34px);
-ms-transform: translateY(-34px);
-o-transform: translateY(-34px);
-webkit-transform: translateY(-34px);
transform: translateY(-34px);
font-size: 12px;
}
</style>
</head>
<body>
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="username">
<label class="mdl-textfield__label" for="username">用户名</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="password" id="password">
<label class="mdl-textfield__label" for="password">密码</label>
</div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
登录
</button>
</form>
</body>
</html>以上就是关于 Material Design 风格 InputText 的使用和实现方法的介绍，希望本文能对你在实现 Material Design 风格的 InputText 控件时有所帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6781b71c935627c900e767a1