解释 Materialise CSS 中的对话框-css教程-PHP中文网

首页

web前端

css教程

解释 Materialise CSS 中的对话框

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 19, 2023 pm 08:49 PM

Explain Dialogs in Materialize CSS

由于Materialize内置的响应式设计，使用它制作的网站可以自动调整大小以适应不同的设备类型。Materialize类是为了使网站适应任何屏幕尺寸而开发的。所有的个人电脑、平板电脑和移动设备都可以访问使用Materialize构建的网站。

Materialize的设计是扁平且极其简单的。它是根据这样的理解而制作的：添加新的CSS规则要比更改已经存在的规则简单得多。它支持阴影和鲜艳的色调。在所有平台和设备上，色调和色调都是一致的。可能最重要的是，使用它完全免费。

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

什么是Materialize CSS？

Materialize CSS是一个使用CSS、JavaScript和HTML开发的用户界面组件库。谷歌是设计它的公司。Material Design是CSS的另一个名称。它是一种将创新和技术与良好设计的经典原则融合在一起的设计语言。谷歌希望创建一个设计框架，以实现在任何平台上所有产品上的一致用户体验。

It is a set of UI components created by Google. It is used to build online pages and web apps that are aesthetically pleasing, consistent, and useful while adhering to contemporary web design concepts like browser portability, device independence, and gentle degradation. It is a conventional CSS with a small footprint.

It is open source and needs the jQuery JavaScript library to work correctly. It may be used to build reusable web components and is cross-browser compatible. Cards, tabs, navigation bars, toasts, and more upgraded and customized features are included. It offers updated variations of typical user interface elements like buttons, checkboxes, and text fields that have been modified to adhere to Material Design principles.

什么是对话框？

对话框是一种图形控件元素，以小窗口的形式出现，并向用户传达信息，同时要求用户做出反应。

Depending on whether they prevent communication with the software that opened the dialog, dialog boxes are categorized as "modal" or "modeless." The desired user interaction determines the type of dialogue box that will be displayed.

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

Dialogs in Materialize CSS

Dialogs in Materialize CSS give users access to more information as needed. These are not immediately displayed on the website. The information needed at that particular time is related to the dialog transitions. In order to display dialogs, Materialize offers several options. Dialogs are pieces of material that are normally hidden on a page but pop up with more information when required. The user shouldn't feel startled by the changes, which should make sense from the dialog's appearance. Toasts in Materialize give you a simple way to give your users discreet alerts. You may test out how responsively these toasts are put and sized by clicking the button below on various device sizes.

Use JavaScript code to programmatically invoke the Materialize.toast() function to accomplish this. An HTML String may also be supplied as the first argument. Once the toast has been dismissed, you can have it call back a certain function. You can easily customize the CSS style classes and add it to the toasts as as optional parameter.

语法

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

Parameter

Content- It is used to specify the content to be displayed on the user’s screen.
timeDuration- 用于指定在屏幕上显示消息的时间持续时间。
Class- 用于指定要应用于提示框的样式类的类型。
Callback- It is used to specify the callback method which is to be called after the toast is dismissed.

The following Materialize and CDN link needs to written within the

tag −

<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>

Example

的中文翻译为：

示例

The given below example exemplifies how to add different types of dialog boxes in a web page using 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 id="Materialize-CSS"> Materialize CSS </h2>
   <h4 id="Different-Dialog-boxes"> 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>

On clicking bold and rounded alert box button, a rounded shaped alert box with bold text will be displayed on the screen. On clicking the emphasized alert box button, a rectangular alert box with emphasized text will be displayed. Whereas on clicking underlined alert box, rectangular alert box with underlined text will be displayed.