Terangkan Dialog dalam Materialize CSS

Terima kasih kepada reka bentuk responsif terbina dalam Materialize, tapak web yang dibuat dengannya boleh mengubah saiz secara automatik agar sesuai dengan jenis peranti yang berbeza. Kelas Materialize telah dibangunkan untuk menyesuaikan tapak web kepada sebarang saiz skrin. Tapak web yang dibina dengan Materialize boleh diakses oleh semua PC, tablet dan peranti mudah alih.

Reka bentuk

Materialize adalah rata dan sangat mudah. Ia dibuat dengan pemahaman bahawa menambah peraturan CSS baharu adalah lebih mudah daripada menukar peraturan sedia ada. Ia menyokong bayang-bayang dan nada bersemangat. Nada dan nada adalah konsisten merentas semua platform dan peranti. Mungkin yang terbaik, ia benar-benar percuma untuk digunakan.

Dalam artikel ini, kita akan membincangkan tentang kotak dialog dalam Materialize CSS.

Apakah Materialize CSS?

Materialize CSS ialah perpustakaan komponen antara muka pengguna yang dibangunkan menggunakan CSS, JavaScript dan HTML. Google ialah syarikat yang mereka bentuknya. Reka Bentuk Bahan ialah nama lain untuk CSS. Ia adalah bahasa reka bentuk yang menggabungkan inovasi dan teknologi dengan prinsip klasik reka bentuk yang baik. Google mahu mencipta rangka kerja reka bentuk yang akan membolehkan pengalaman pengguna yang konsisten merentas semua produk pada mana-mana platform.

Ia ialah satu set komponen UI yang dicipta oleh Google Ia digunakan untuk membina halaman dalam talian dan apl web yang menarik dari segi estetika, konsisten dan berguna sambil mematuhi konsep reka bentuk web kontemporari seperti mudah alih penyemak imbas, kebebasan peranti dan kemerosotannya ialah CSS konvensional dengan jejak kecil

Ia adalah sumber terbuka dan memerlukan pustaka jQuery JavaScript untuk berfungsi dengan betul Ia boleh digunakan untuk membina komponen web yang boleh diguna semula dan serasi dengan penyemak imbas silang Kad, tab, bar navigasi, roti bakar dan lebih banyak ciri yang dipertingkatkan dan diperibadikan disertakan . Ia menawarkan variasi kemas kini elemen antara muka pengguna seperti butang, kotak pilihan dan medan teks yang telah diubah suai untuk mematuhi prinsip Reka Bentuk Bahan.

Apakah kotak dialog?

Kotak dialog ialah elemen kawalan grafik yang muncul dalam bentuk tetingkap kecil dan menyampaikan maklumat kepada pengguna sambil memerlukan pengguna bertindak balas.

Bergantung pada sama ada mereka menghalang komunikasi dengan perisian yang membuka dialog, kotak dialog dikategorikan sebagai "modal" atau " tanpa model." Interaksi pengguna yang dikehendaki menentukan jenis kotak dialog yang akan dipaparkan.

Elemen HTML "dialog" mewakili kotak dialog atau elemen interaktif lain seperti subtingkap, pemeriksaatau amaran boleh ditutup.

Dialog dalam Mewujudkan CSS

Dialog dalam Materialize CSS memberi pengguna akses kepada lebih banyak maklumat seperti yang diperlukan. Maklumat yang diperlukan pada masa itu adalah berkaitan dengan peralihan dialog, Materialize menawarkan beberapa pilihan. Dialog ialah kepingan bahan yang biasanya disembunyikan pada halaman tetapi muncul dengan lebih banyak maklumat apabila diperlukan. Pengguna tidak sepatutnya berasa terkejut dengan perubahan, yang sepatutnya masuk akal daripada penampilan dialog dalam Materialize memberi anda cara yang mudah berikan makluman bijak kepada pengguna anda Anda boleh menguji sejauh mana responsif roti bakar ini diletakkan dan bersaiz dengan mengklik butang di bawah pada pelbagai saiz peranti

Gunakan kod JavaScript untuk menggunakan fungsi Materialize.toast() untuk mencapai ini Rentetan HTML juga boleh dibekalkan sebagai argumen pertama Setelah roti bakar telah diketepikan, anda boleh memintanya memanggil semula fungsi tertentu boleh menyesuaikan kelas gaya CSS dengan mudah dan menambahkannya pada roti bakar sebagai parameter pilihan.

Tatabahasa

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

Parameter

• Kandungan- Ia digunakan untuk menentukan kandungan yang akan dipaparkan pada skrin pengguna.

• timeDuration- Digunakan untuk menentukan tempoh masa untuk memaparkan mesej pada skrin.

• Kelas- Digunakan untuk menentukan jenis kelas gaya yang akan digunakan pada petua alat.

• Panggil balik- Ia digunakan untuk menentukan kaedah panggil balik yang akan dipanggil selepas roti bakar diketepikan.

Pautan Materialize dan CDN berikut perlu ditulis dalam tag <head>

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

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Contoh yang diberikan di bawah menunjukkan cara menambah pelbagai jenis kotak dialog dalam halaman web menggunakan 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>

Apabila mengklik butang kotak amaran yang tebal dan bulat, kotak amaran berbentuk bulat dengan teks tebal akan dipaparkan pada skrin Apabila mengklik butang kotak amaran yang ditekankan, kotak amaran segi empat tepat dengan teks yang ditekankan akan dipaparkan , kotak amaran segi empat tepat dengan teks bergaris akan dipaparkan

Kesimpulan

Dalam artikel ini, kami menggunakan Materialize CSS untuk membuat kotak dialog. Kami mempelajari tentang fungsi Materialize toast(), yang membolehkan kami membuat kotak roti bakar tersuai. Kami juga mempelajari beberapa konsep JavaScript, seperti fungsi onclick().

Atas ialah kandungan terperinci Terangkan Dialog dalam Materialize CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!