Explain Dialogs in Materialize CSS

Due to Materialize's built-in responsive design, websites made with it automatically resize themselves for different device types. The Materialize classes were developed so that the website could adapt to any screen size. All PC, tablet, and mobile devices can access the websites built with Materialize.

Materialize is flat and extremely simple by design. It is made with the understanding that it is far simpler to add new CSS rules than it is to change the ones already in place. Both shadows and vivid hues are supported. Across all platforms and devices, the hues and tones are consistent. And maybe most importantly, using it is completely free.

In this article, we will discuss about dialogs 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 that materializes. It is a design language that fuses innovation and technology with the tried-and-true principles of good design. Google wants to create a design framework that enables a consistent user experience across all of their 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 are dialogs?

The dialog box is a graphical control element that appears as a small window and conveys information to the user while also asking for a reaction.

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.

The HTML element "dialog" symbolizes a dialog box or other interactive element, like a subwindow, inspector, or dismissible alert.

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.

Syntax

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

Parameter

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

• timeDuration- It is used to specify the time duration up to which the message has to be displayed on the screen.

• Class- It is used to specify the type of style class which is to be applied on the toast.

• 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 <head> 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 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 have used Materialize CSS to create dialog boxes. We have studied about the Materialize toast() function which enables us to create customized toasts. We have also learnt some JavaScript concepts like onclick() function.