Material Design 是 Google 推出的一种设计语言，旨在为用户提供更好的用户体验。在前端开发中，Material Design 控件是必不可少的一部分。在本文中，我们将介绍必须掌握的 10 个 Material Design 控件，并提供详细的学习和指导意义。
1. 按钮 (Button)
按钮是 Material Design 中最常用的控件之一。它们用于触发操作，例如提交表单或导航到其他页面。按钮有许多不同的样式，包括平面、凸起和浮动按钮。下面是一个示例代码：
<button class="mdc-button">Submit</button>
2. 文本框 (Text Field)
文本框用于用户输入文本。它们可以用于登录表单、搜索表单等。Material Design 的文本框具有动态标签和浮动标签的功能。下面是一个示例代码：
<div class="mdc-text-field"> <input type="text" class="mdc-text-field__input" id="my-text-field"> <label class="mdc-floating-label" for="my-text-field">Label</label> <div class="mdc-line-ripple"></div> </div>
3. 单选框 (Radio Button)
单选框用于让用户从一组选项中选择一个选项。Material Design 的单选框使用圆形按钮表示选中状态。下面是一个示例代码：
// javascriptcn.com 代码示例
<div class="mdc-form-field">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios">
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
<label for="radio-1">Option 1</label>
</div>4. 复选框 (Checkbox)
复选框用于让用户从一组选项中选择多个选项。Material Design 的复选框使用方形复选框表示选中状态。下面是一个示例代码：
// javascriptcn.com 代码示例
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input class="mdc-checkbox__native-control" type="checkbox" id="checkbox-1">
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
<div class="mdc-checkbox__ripple"></div>
</div>
<label for="checkbox-1">Option 1</label>
</div>5. 下拉菜单 (Dropdown)
下拉菜单用于显示一组选项，并且只有一个选项可以同时可见。Material Design 的下拉菜单使用文本框和下拉箭头来表示当前选项。下面是一个示例代码：
// javascriptcn.com 代码示例
<div class="mdc-select">
<div class="mdc-select__anchor">
<input type="text" class="mdc-select__selected-text">
<i class="mdc-select__dropdown-icon"></i>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface">
<ul class="mdc-list">
<li class="mdc-list-item" data-value="option1">Option 1</li>
<li class="mdc-list-item" data-value="option2">Option 2</li>
</ul>
</div>
</div>6. 滑块 (Slider)
滑块用于让用户在一个范围内选择一个值。Material Design 的滑块使用一个滑块按钮和一个轨道来表示当前值。下面是一个示例代码：
// javascriptcn.com 代码示例
<div class="mdc-slider">
<div class="mdc-slider__track-container">
<div class="mdc-slider__track"></div>
<div class="mdc-slider__track-marker-container"></div>
</div>
<div class="mdc-slider__thumb-container">
<div class="mdc-slider__pin">
<span class="mdc-slider__pin-value-marker"></span>
</div>
<svg class="mdc-slider__thumb" width="21" height="21">
<circle cx="10.5" cy="10.5" r="7.875"></circle>
</svg>
<div class="mdc-slider__focus-ring"></div>
</div>
</div>7. 进度条 (Progress Bar)
进度条用于显示任务的进度。Material Design 的进度条使用一个轨道和一个进度条来表示当前进度。下面是一个示例代码：
// javascriptcn.com 代码示例
<div class="mdc-linear-progress" role="progressbar" aria-label="Example Progress Bar" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0">
<div class="mdc-linear-progress__buffering-dots"></div>
<div class="mdc-linear-progress__buffer"></div>
<div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
<span class="mdc-linear-progress__bar-inner"></span>
</div>
<div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
<span class="mdc-linear-progress__bar-inner"></span>
</div>
</div>8. 菜单 (Menu)
菜单用于显示一个选项列表。Material Design 的菜单使用一个按钮和一个选项列表来表示当前选项。下面是一个示例代码：
// javascriptcn.com 代码示例
<button class="mdc-button mdc-button--raised" id="demo-menu">
Menu
</button>
<div class="mdc-menu mdc-menu-surface" tabindex="-1" id="demo-menu-list">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
<li class="mdc-list-item" role="menuitem" tabindex="0">Option 1</li>
<li class="mdc-list-item" role="menuitem" tabindex="0">Option 2</li>
</ul>
</div>9. 卡片 (Card)
卡片用于显示内容，例如图片、文本等。Material Design 的卡片具有圆角和阴影的特点。下面是一个示例代码：
<div class="mdc-card">
<img src="path/to/image" class="mdc-card__media-item">
<div class="mdc-card__primary-action">
<div class="mdc-card__headline">Title</div>
<div class="mdc-card__subtitle">Subtitle</div>
<div class="mdc-card__body">Body</div>
</div>
</div>10. 对话框 (Dialog)
对话框用于显示一条消息或询问用户是否执行某个操作。Material Design 的对话框具有阴影和动画的特点。下面是一个示例代码：
// javascriptcn.com 代码示例
<div class="mdc-dialog">
<div class="mdc-dialog__surface">
<h2 class="mdc-dialog__title">Title</h2>
<div class="mdc-dialog__content">Content</div>
<footer class="mdc-dialog__actions">
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="cancel">Cancel</button>
<button type="button" class="mdc-button mdc-dialog__button" data-mdc-dialog-action="accept">Accept</button>
</footer>
</div>
<div class="mdc-dialog__scrim"></div>
</div>总结
在本文中，我们介绍了必须掌握的 10 个 Material Design 控件，并提供了详细的学习和指导意义。这些控件是前端开发中必不可少的一部分，可以帮助您提供更好的用户体验。希望这篇文章能够对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655eb493d2f5e1655d8d8f16