搜尋

首頁 >web前端 >css教學 >解釋 Materialise CSS 中的對話框

解釋 Materialise CSS 中的對話框

WBOY
WBOY轉載
2023-08-19 20:49:021469瀏覽

Explain Dialogs in Materialize CSS

由於Materialize內建的響應式設計，使用它製作的網站可以自動調整大小以適應不同的裝置類型。 Materialize類別是為了使網站適應任何螢幕尺寸而開發的。所有的個人電腦、平板電腦和行動裝置都可以存取使用Materialize建立的網站。

Materialize的設計是扁平且極為簡單的。它是根據這樣的理解而製作的：新增新的CSS規則比更改已經存在的規則簡單得多。它支援陰影和鮮豔的色調。在所有平台和設備上，色調和色調都是一致的。可能最重要的是，使用它完全免費。

在本文中，我們將討論Materialize CSS中的對話方塊。

什麼是Materialize CSS？

Materialize CSS是一個使用CSS、JavaScript和HTML開發的使用者介面元件庫。谷歌是設計它的公司。 Material Design是CSS的另一個名稱。它是一種將創新和技術與良好設計的經典原則融合在一起的設計語言。谷歌希望創建一個設計框架，以實現在任何平台上所有產品上的一致用戶體驗。

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 websign congraence webssign congraence, lethhering to contemporary websign congraation demol 完成, letheld, lesignal websm. . 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 comcrossible. Cards, tabs, navigation bars, to navigation and patible. Cards, 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 priprincles.

##什麼是對話框？

對話方塊是一種圖形控制元素，以小視窗的形式出現，並向使用者傳達訊息，同時要求使用者做出反應。

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元素"

dialog"表示對話方塊或其他互動元素，如子視窗、檢查器或可關閉的警告。

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 log trans partic , 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 erials, Matichc​​an user shouldn the mdia feel startled by erials, Matichc​​cys, Matlogs s​​yetchanges wherappy's, Mats​​retics erials, Matlog; 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 it back a certain function. You can easily customize the CSS style classes and add it to the toasts as as optional parameter.

文法

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

Parameter

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

  • #timeDuration- 用於指定螢幕上顯示訊息的時間持續時間。

  • Class- 用於指定要套用於提示框的樣式類別的類型。

  • 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 93f0f5c25f18dab9d176bd4f6de5d30e 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 combox with hasized 反對 3bed alert box, rectangular alert box with underlined text will be displayed.

Conclusion

在本文中，我們使用Materialize CSS來建立對話方塊。我們學習了Materialize toast()函數，它使我們能夠建立自訂的提示框。我們也學習了一些JavaScript概念，像是onclick()函數。

以上是解釋 Materialise CSS 中的對話框的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript jquery css html String while using class Interface function this alert display ui Access
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除
上一篇：如何使用CSS中的::before偽選擇器來放置背景影像？下一篇：如何使用CSS中的::before偽選擇器來放置背景影像？

相關文章

看更多