পৃষ্ঠাসমূহ

.

Search Your Article

Total Pageviews

Tuesday, March 7, 2017

Materialize - Dialogs

The Materialize provides various special methods to show unobtrusive alerts to the users. Materialize provides a term toast for them. Following is the syntax to show a dialog as toast.
Materialize.toast(message, displayLength, className, completeCallback);
Where

  • message - Message to be displayed to the user.
  • displayLength - duration of the message after which it will disappear.
  • className - style class to be applied to the toast. For example, 'rounded'
  • completeCallback - callback method to be called once toast is dismissed.
For tooltip, Materialize provides following CSS classes.
S.N.Class Name & Description
1tooltipped
Identifies component to have tooltip.
2data-position
Position of the tooltip; bottom, top, left, or right.
3data-delay
Sets the duration of the tooltip after which it will disappear.
4data-tooltip
Set the tooltip contents.

Example

The following example showcases the use of toasts and tooltips.
materialize_dialogs.htm
<html>
   <head>
      <title>The Materialize Dialogs Example</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 showToast(message, duration){
         Materialize.toast(message, duration);
      }
      function showToast1(message, duration){
         Materialize.toast('<i>'+ message + '</i>', duration);
      }
      function showToast2(message, duration){
         Materialize.toast(message, duration, 'rounded');
      }
      function showToast3(message, duration){
         Materialize.toast('Hello World!', duration, '', function toastCompleted(){
               alert('Toast dismissed!');
            });
      }
      
      </script>
   </head>
   <body class="container"> 
      <h4>Toasts</h4>
      <a class="btn" onclick="showToast('Hello World!', 3000)">Normal Alert!</a>
   <a class="btn" onclick="showToast1('Hello World!', 3000)">Italic Alert!</a>
   <a class="btn" onclick="showToast2('Hello World!', 3000)">Rounded Alert!</a>
   <br/><br/>
   <a class="btn" onclick="showToast3('Hello World!', 3000)">Callback Alert!</a>   
   <h4>Tooltips</h4>
   <a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am in bottom!">Bottom</a>
   <a class="btn tooltipped" data-position="left" data-delay="50" data-tooltip="I am in left!">Left</a>
   <a class="btn tooltipped" data-position="right" data-delay="50" data-tooltip="I am in right!">Right</a>
   <a class="btn tooltipped" data-position="top" data-delay="50" data-tooltip="I am in top!">Top</a>
   </body>  
</html>

Result

Verify the result.

No comments:

Post a Comment