材料设计精简版-文本字段

简介

材料设计精简版-文本字段是一个基于材料设计风格简化版的文本输入组件。它是一种可重复使用的组件，适用于各种应用场景，如登录，注册，搜索等。

特点

• 简洁明了，易于使用。
• 基于材料设计风格，视觉效果美观。
• 对移动设备优化，支持响应式设计。
• 可以通过自定义样式进行个性化设置。

用法

为了使用本组件，你需要引入以下文件：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css" rel="stylesheet">

<link href="https://cdn.bootcss.com/material-design-lite/1.1.0/material.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/material-design-lite/1.1.0/material.min.js"></script>

你还需要一个文本输入框：

<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" id="sample1">
  <label class="mdl-textfield__label" for="sample1">Text...</label>
</div>

自定义

如果你想要自定义组件样式，有些不同的方式可以帮助你。

添加类

可以添加类名来自定义样式。例如：

<div class="mdl-textfield mdl-js-textfield my-textfield">
  <input class="mdl-textfield__input" type="text" id="sample1">
  <label class="mdl-textfield__label" for="sample1">Text...</label>
</div>

.my-textfield .mdl-textfield__input {
    border: none;
    border-bottom: 1px solid black;
}

使用样式

可以使用预定义的样式来自定义样式。例如：

<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" id="sample2">
  <label class="mdl-textfield__label" for="sample2">Text...</label>
</div>

这将创建一个默认的文本字段。你可以更改填充和边框颜色：

.mdl-textfield--floating-label .mdl-textfield__input {
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

.mdl-textfield--floating-label.mdl-textfield--has-placeholder .mdl-textfield__input::-webkit-input-placeholder {
  color: red;
}

.mdl-textfield--floating-label.mdl-textfield--has-placeholder .mdl-textfield__label {
  color: red;
}

这些自定义样式将渲染红色文本以填充边框。为了使效果生效，你需要添加mdl-textfield--floating-label类名，因为它被用于控制样式。

结论

这个文本输入组件在移动设备和桌面浏览器上表现的非常出色，并且易于使用和定制。它是建立现代Web应用程序必不可少的基础组件之一。