Terwujud - Dialog

Materialize menyediakan berbagai metode khusus untuk menampilkan peringatan yang tidak mengganggu kepada pengguna. Materialize memberikan istilah bersulang untuk mereka. Berikut ini adalah sintaks untuk menampilkan dialog sebagai toast.

Materialize.toast(message, displayLength, className, completeCallback);

Dimana,

message - Pesan untuk ditampilkan kepada pengguna.
displayLength - Durasi pesan setelah itu akan hilang.
className- Kelas gaya untuk diterapkan pada roti panggang. Misalnya, 'bulat'.
completeCallback - Metode panggilan balik yang akan dipanggil setelah toast ditutup.

Untuk keterangan alat, Materialize menyediakan kelas CSS berikut.

Sr.No.	Nama & Deskripsi Kelas
1	tooltipped Mengidentifikasi komponen untuk memiliki tooltip.
2	data-position Posisi tooltip; bawah, atas, kiri, atau kanan.
3	data-delay Menyetel durasi keterangan alat setelah itu akan menghilang.
4	data-tooltip Setel konten tooltip.

Contoh

Contoh berikut menunjukkan penggunaan toast dan 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>

Hasil

Verifikasi hasilnya.