Explain Dialogs in Materialize CSS

Thanks to Materialize's built-in responsive design, websites made with it can automatically resize to fit different device types. The Materialize class was developed to adapt the website to any screen size. Websites built with Materialize can be accessed by all PCs, tablets and mobile devices.

Materialize is flat and extremely simple. It is made with the understanding that adding new CSS rules is much simpler than changing already existing ones. It supports shadows and vibrant tones. The tone and tone are consistent across all platforms and devices. Perhaps best of all, it's completely free to use.

In this article, we will discuss dialog boxes in Materialize CSS.

What is Materialize CSS?

Materialize CSS is a user interface component library developed using CSS, JavaScript and HTML. Google is the company that designed it. Material Design is another name for CSS. It is a design language that blends innovation and technology with the classic principles of good design. Google wanted to create a design framework that would enable a consistent user experience across all products on any platform.

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.

What is a dialog box?

A dialog box is a graphical control element that appears in the form of a small window and conveys information to the user while requiring the user to react.

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 element "dialog" represents a dialog box or other interactive element, such as a child window, an inspector , or a closeable warning.

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.

grammar

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

Parameter

• Content- It is used to specify the content to be displayed on the user’s screen.

• timeDuration - Used to specify the time duration for displaying the message on the screen.

• Class - Used to specify the type of style class to be applied to the tooltip.

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

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

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.

Conclusion

In this article, we use Materialize CSS to create dialog boxes. We learned about the Materialize toast() function, which allows us to create custom toast boxes. We also learned some JavaScript concepts, such as the onclick() function.

The above is the detailed content of Explain Dialogs in Materialize CSS. For more information, please follow other related articles on the PHP Chinese website!