解释 Materialize CSS 中的对话框

cssweb developmentfront end technology更新于 2025/1/13 18:20:17

由于 Materialize 内置的响应式设计，使用它创建的网站会根据不同类型的设备自动调整大小。Materialize 类的开发旨在使网站能够适应任何屏幕尺寸。所有 PC、平板电脑和移动设备都可以访问使用 Materialize 构建的网站。

Materialize 采用扁平化设计，设计极其简洁。它的理念是，添加新的 CSS 规则比更改现有规则要简单得多。它支持阴影和鲜艳色调。在所有平台和设备上，色调和色调都保持一致。或许最重要的是，使用它完全免费。

在本文中，我们将讨论 Materialize CSS 中的对话框。

什么是 Materialize CSS?

Materialize CSS 是一个使用 CSS、JavaScript 和 HTML 开发的用户界面组件库。它的设计者是 Google 公司。Material Design 是 Materialize CSS 的另一个名称。它是一种将创新和技术与久经考验的优秀设计原则融合在一起的设计语言。Google 希望创建一个设计框架，使其所有产品在任何平台上都能提供一致的用户体验。

它是 Google 创建的一组 UI 组件。它用于构建美观、一致且实用的在线页面和 Web 应用，同时遵循浏览器可移植性、设备独立性和温和降级等现代 Web 设计理念。它是一种占用空间较小的传统 CSS。

它是开源的，需要 jQuery JavaScript 库才能正常工作。它可用于构建可重复使用的 Web 组件，并且兼容跨浏览器。它包含卡片、标签、导航栏、消息框以及更多升级和自定义功能。它提供了按钮、复选框和文本字段等典型用户界面元素的更新版本，这些元素已根据 Material Design 原则进行了修改。

什么是对话框?

对话框是一个图形控制元素，它显示为一个小窗口，用于向用户传达信息，同时请求用户做出响应。

根据对话框是否阻止与打开对话框的软件进行通信，对话框分为"模态"或"非模态"。所需的用户交互决定了要显示的对话框类型。

HTML 元素"dialog"表示对话框或其他交互元素，例如子窗口、检查器或可关闭的警报。

Materialize CSS 中的对话框

Materialize CSS 中的对话框允许用户根据需要访问更多信息。这些信息不会立即显示在网站上。特定时间所需的信息与对话框的转换有关。为了显示对话框，Materialize 提供了多种选项。对话框是一些通常隐藏在页面上的材料，但在需要时会弹出以显示更多信息。用户不应该对这些变化感到吃惊，这些变化应该与对话框的外观相符。Materialize 中的提示框 (Toast) 为您提供了一种简单的方式来向用户提供谨慎的警报。您可以通过在各种设备尺寸上点击下方按钮来测试这些提示框的显示和大小响应速度。

使用 JavaScript 代码以编程方式调用 Materialize.toast() 函数来实现此目的。也可以提供 HTML 字符串作为第一个参数。toast 消息消失后，您可以让它回调某个函数。您可以轻松自定义 CSS 样式类，并将其作为可选参数添加到 toast 消息中。

语法

Materialize.toast(content, timeDuration, class, callback);

参数

Content- 用于指定要在用户屏幕上显示的内容。
timeDuration- 用于指定消息必须在屏幕上显示的最长持续时间。
Class- 用于指定要应用于 Toast 的样式类的类型。
Callback- 用于指定 Toast 关闭后要调用的回调方法。

以下 Materialize 和 CDN 链接需要在 <head> 中写入标签 −

<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript" src = "https://code.jquery.com/jquery2.1.1.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script>

示例

以下示例演示了如何使用 Materialize CSS 在网页中添加不同类型的对话框。

<!DOCTYPE html>
<html>
<head>
   <title> Dialogs in Materialize CSS </title>
   <meta name= "viewport" content= "width = device-width, initial-scale = 1">
   <link rel= "stylesheet" href= "https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel= "stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
   <script type= "text/javascript" src= "https://code.jquery.com/jquery-2.1.1.min.js"> </script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   <script>
      function Box1(content, timeDuration) {
         Materialize.toast( '<b>' + content + '</b>', timeDuration, 'rounded' );
      }
      function Box2(content, timeDuration) {
         Materialize.toast('<em>' + content + '</em>', timeDuration );
      }
      function Box3(content, timeDuration) {
         Materialize.toast( '<u>' + content + '<u>', timeDuration );
      }
   </script>
</head>
<body class= "container">
   <h2 style= "textalign:center"> Materialize CSS </h2>
   <h4> Different Dialog boxes </h4>
   <a class= "btn" onclick= "Box1('Bold N rounded Alert!', 2000)"> Bold And rounded Alert box!! </a> <br> <br>
   <a class= "btn" onclick= "Box2('Emphasized Alert!', 2000)"> Emphasized Alert box!! </a> <br> <br>
   <a class= "btn" onclick= "Box3('Underlined Alert!', 2000)"> Underlined Alert box!! </a> <br> <br>
</body>
</html>

点击粗体圆角警告框按钮时，屏幕上将显示一个带有粗体文本的圆角警告框。点击强调警告框按钮时，屏幕上将显示一个带有强调文本的矩形警告框。点击带下划线的警告框时，屏幕上将显示带有下划线文本的矩形警告框。