Material Design 选择控件实现方法

Material Design 是 Google 推出的一套视觉设计语言，旨在为用户提供简洁、直观、一致的用户体验。而选择控件是 Material Design 中非常重要的一部分，它可以帮助用户方便地进行多选或单选操作，同时提供良好的用户反馈。

在本文中，我们将介绍 Material Design 中的选择控件实现方法，包括单选框、复选框和开关。

单选框

单选框一般用于在一组选项中进行单选操作。在 Material Design 中，单选框由圆形的选择框和选项文本组成，用户可以通过点击选择框或选项文本来进行选择操作。

HTML 结构

单选框的 HTML 结构非常简单，由一个 input 元素和一个 label 元素组成。其中，input 元素的 type 属性为 "radio"，name 属性表示该单选框所属的一组选项，value 属性表示该选项的值，而 label 元素的 for 属性应该与 input 元素的 id 属性相同，这样用户点击 label 元素时就会触发 input 元素的选中操作。

<div class="md-radio">
  <input type="radio" id="option1" name="group1" value="option1">
  <label for="option1">选项一</label>
</div>
<div class="md-radio">
  <input type="radio" id="option2" name="group1" value="option2">
  <label for="option2">选项二</label>
</div>

CSS 样式

为了实现 Material Design 风格的单选框，我们需要为 input 元素和 label 元素设置一些样式。

// www.javascriptcn.com code example
.md-radio {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.md-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.md-radio input[type="radio"] + label {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-left: 32px;
  cursor: pointer;
}
.md-radio input[type="radio"] + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border: 2px solid #2196F3;
  border-radius: 50%;
  box-sizing: border-box;
}
.md-radio input[type="radio"]:checked + label:before {
  background-color: #2196F3;
}

这些样式将单选框的选择框设置为圆形，选中时填充颜色，未选中时显示边框。

JavaScript 行为

单选框的 JavaScript 行为非常简单，只需要监听 input 元素的 change 事件即可。

const radios = document.querySelectorAll('input[type="radio"]');
radios.forEach(radio => {
  radio.addEventListener('change', event => {
    console.log(`选中了 ${event.target.value}`);
  });
});

复选框

复选框一般用于在一组选项中进行多选操作。在 Material Design 中，复选框由方形的选择框和选项文本组成，用户可以通过点击选择框或选项文本来进行选择操作。

HTML 结构

复选框的 HTML 结构与单选框类似，也由一个 input 元素和一个 label 元素组成。不同的是，input 元素的 type 属性为 "checkbox"，而 label 元素的 for 属性应该与 input 元素的 id 属性相同。

<div class="md-checkbox">
  <input type="checkbox" id="option1" name="group1" value="option1">
  <label for="option1">选项一</label>
</div>
<div class="md-checkbox">
  <input type="checkbox" id="option2" name="group1" value="option2">
  <label for="option2">选项二</label>
</div>

CSS 样式

复选框的 CSS 样式与单选框类似，只需要将选择框的形状改为方形即可。

// www.javascriptcn.com code example
.md-checkbox input[type="checkbox"] + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border: 2px solid #2196F3;
  box-sizing: border-box;
}
.md-checkbox input[type="checkbox"]:checked + label:before {
  background-color: #2196F3;
}

JavaScript 行为

复选框的 JavaScript 行为也非常简单，只需要监听 input 元素的 change 事件即可。

const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', event => {
    console.log(`选中了 ${event.target.value}`);
  });
});

开关

开关一般用于切换一个选项的状态，例如打开或关闭一个功能。在 Material Design 中，开关由圆形的选择框和选项文本组成，用户可以通过拖动选择框来进行切换操作。

HTML 结构

开关的 HTML 结构与单选框和复选框略有不同，由一个 label 元素、一个 input 元素和一个 span 元素组成。其中，input 元素的 type 属性为 "checkbox"，而 label 元素的 for 属性应该与 input 元素的 id 属性相同。

<div class="md-switch">
  <label for="switch1">开关</label>
  <input type="checkbox" id="switch1">
  <span></span>
</div>

CSS 样式

开关的 CSS 样式也比较特殊，需要通过伪元素来实现圆形选择框和拖动效果。

// www.javascriptcn.com code example
.md-switch {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.md-switch label {
  flex: 1;
  margin-right: 16px;
}
.md-switch input[type="checkbox"] {
  display: none;
}
.md-switch span {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  border-radius: 20px;
  background-color: #BDBDBD;
  transition: background-color 0.3s;
}
.md-switch span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #FFFFFF;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
  transition: transform 0.3s;
}
.md-switch input[type="checkbox"]:checked + span {
  background-color: #2196F3;
}
.md-switch input[type="checkbox"]:checked + span:before {
  transform: translateX(16px);
}

这些样式将开关的选择框设置为圆形，选中时填充颜色，未选中时显示灰色。同时，为了实现拖动效果，我们使用了 transform 属性来改变选择框的位置。

JavaScript 行为

开关的 JavaScript 行为也比较简单，只需要监听 input 元素的 change 事件即可。

const switches = document.querySelectorAll('input[type="checkbox"]');
switches.forEach(switch => {
  switch.addEventListener('change', event => {
    console.log(`开关状态为 ${event.target.checked ? '开' : '关'}`);
  });
});

结语

本文介绍了 Material Design 中的三种选择控件实现方法，包括单选框、复选框和开关。通过 HTML、CSS 和 JavaScript 的结合，我们可以轻松地实现 Material Design 风格的选择控件，为用户提供良好的选择体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d53f00a941bf71349b27ee