Material Design 实现搜索框及输入框的设计与实现-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，搜索框和输入框是非常常见的组件。为了提高用户体验和界面美观度，我们可以使用 Material Design 来设计和实现搜索框和输入框。

什么是 Material Design

Material Design 是一种由 Google 推出的设计语言，旨在为 Web 和移动应用提供一致的视觉和操作体验。它强调材料的物理特性，如深度、阴影和动画效果，从而为用户提供更加真实的视觉体验。

Material Design 搜索框的设计

Material Design 搜索框的设计主要包含以下几个方面：

1. 材料特性

搜索框应该具有材料特性，如深度、阴影和动画效果。我们可以使用 CSS3 的 box-shadow 属性来实现搜索框的阴影效果，使用 transition 属性来实现动画效果。

.search-box {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease-in-out;
}
.search-box:focus {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

2. 输入框和按钮

搜索框包含输入框和按钮两个组件。输入框应该具有圆角和边框效果，按钮应该具有 Material Design 的特性，如阴影和涟漪效果。

<div class="search-box">
  <input type="text" class="search-input" placeholder="搜索">
  <button class="search-button">搜索</button>
</div>

// javascriptcn.com 代码示例
.search-input {
  border: none;
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease-in-out;
}
.search-input:focus {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

.search-button {
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease-in-out;
}
.search-button:hover {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

3. 涟漪效果

当用户点击按钮时，应该出现涟漪效果，以提高用户体验。

我们可以使用 CSS3 的伪元素 ::before 和 ::after 来实现涟漪效果。

// javascriptcn.com 代码示例
.search-button::before,
.search-button::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  transition: transform 0.3s ease-in-out;
}

.search-button::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.search-button::after {
  width: 50%;
  height: 50%;
  top: 25%;
  left: 25%;
}

.search-button:focus::before,
.search-button:focus::after {
  transform: scale(2);
}

Material Design 输入框的设计

Material Design 输入框的设计主要包含以下几个方面：

1. 材料特性

输入框应该具有材料特性，如深度、阴影和动画效果。我们可以使用 CSS3 的 box-shadow 属性来实现输入框的阴影效果，使用 transition 属性来实现动画效果。

.input-box {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease-in-out;
}
.input-box:focus-within {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

2. 输入框和标签

输入框包含输入框和标签两个组件。输入框应该具有圆角和边框效果，标签应该具有 Material Design 的特性，如阴影和动画效果。

<div class="input-box">
  <label class="input-label">用户名</label>
  <input type="text" class="input" placeholder="请输入用户名">
</div>

// javascriptcn.com 代码示例
.input-label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  font-size: 16px;
  color: #999;
  transition: transform 0.3s ease-in-out;
}

.input {
  border: none;
  border-radius: 20px;
  padding: 10px;
  padding-top: 30px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease-in-out;
}

.input:focus {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

.input:focus + .input-label {
  transform: translate(0, -20px);
  font-size: 12px;
  color: #333;
}

总结

通过 Material Design 的设计和实现，我们可以为搜索框和输入框增加材料特性、涟漪效果和动画效果，从而提高用户体验和界面美观度。同时，我们也可以根据实际需求进行组件的自定义和扩展，以达到更好的效果。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65695c23d2f5e1655d1e6fdd