前言
Dialog 是移动端和 Web 应用程序中经常使用的一种 UI 控件。它通常用于向用户请求输入一些信息、展示一些信息或者确认某种操作等。
Material Design 是由谷歌提出的一种 UI 设计规范，它主要关注在界面设计中的颜色、排版、字体等问题上，使得应用程序的视觉效果更加丰富和充实。
在本文中，我们将介绍如何在 Material Design 中实现自定义的 Dialog，为开发者提供参考和指导。
运用 Material Design 设计规范
在使用 Material Design 设计规范时，我们需要努力遵循它的标准和准则。这绝不只是一种美学问题，而且也是一个用户体验问题。
在设计 Dialog 时，我们应该引用 Material Design 中的“Components/Dialogs”部分。这个部分详细阐述了如何设计和实现 Dialog。
<center></center>实现自定义的 Dialog
在 HTML 中，Dialog 通常是通过弹出层层实现的。可以使用 CSS 中的 position 和 z-index 属性，来确定 Dialog 弹出层的位置和优先级。
在 Javascript 中，可以使用如下代码来打开 Dialog：
const showDialog = () => {
const dialog = document.querySelector('.mdl-dialog')
dialog.showModal()
}同样的，通过点击按钮关闭 Dialog 的代码如下：
const hideDialog = () => {
const dialog = document.querySelector('.mdl-dialog')
dialog.close()
}实现全屏 Dialog
全屏 Dialog 通常是用于比较复杂的用户输入场景下，例如注册页面或者设置页面等。
首先，在 HTML 中我们需要定义一个全屏的 Dialog 弹出层：
<dialog class="mdl-dialog mdl-dialog--full-screen"> <!-- Dialog 内容 --> </dialog>
接着，在 Javascript 中我们需要打开这个 Dialog：
const showFullScreenDialog = () => {
const dialog = document.querySelector('.mdl-dialog--full-screen')
dialog.showModal()
}实现自定义样式
我们可以通过在 CSS 中定义一些新的类来为 Dialog 添加自我独特的样式。
例如，在我们的 Dialog 中添加一个自定义类 .my-dialog：
<dialog class="mdl-dialog my-dialog"> <!-- Dialog 内容 --> </dialog>
在 CSS 中，我们可以给这个类添加自定义样式：
.my-dialog {
background: #FFFFFF;
padding: 32px;
box-shadow: 0px 16px 32px rgba(51, 51, 51, 0.16);
}实现自定义按钮
我们可以使用 CSS 来自定义 Dialog 按钮的样式，从而使之与我们的应用程序相符合。
首先，我们可以在 HTML 中添加一个自定义类 .my-dialog__button 来自定义 Dialog 按钮：
<dialog class="mdl-dialog"> <!-- Dialog 内容 --> <button class="mdl-button my-dialog__button">确定</button> <button class="mdl-button my-dialog__button">取消</button> </dialog>
接着，在 CSS 中为这个类添加自定义样式：
-- -------------------- ---- ------- ------------------ - ----------------- -------- ------ -------- ------------- ----- - ------------------------ - ----------------- -------- -
实现自定义图标
可以使用标准的 Material Design 图标库来为 Dialog 添加图标。
例如，在 HTML 中添加一个 div 元素，并引用 Material Design 图标库：
<dialog class="mdl-dialog">
<!-- Dialog 内容 -->
<div class="my-dialog__icon">
<i class="material-icons">info_outline</i>
</div>
</dialog>在 CSS 中添加样式：
-- -------------------- ---- ------- ---------------- - ------ ----- ------- ----- ----------------- -------- ------ -------- -------- ----- ------------ ------- ---------------- ------- -------------- ---- ------------- ----- - ---------------- - - ---------- ----- ------------ ---- -
结论
在 Material Design 下实现自定义的 Dialog，是一个相对简单但非常实用的技能。在本文中，我们介绍了如何运用 Material Design 的准则和标准来设计 Dialog，并提供了一些示例代码来帮助开发者实现自定义的 Dialog。
希望这篇文章对你提供一些指导和启示，帮助你打造更加人性化和用户友好的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e376c53d5693f0747d0d4
