解釋 Materialise CSS 中的對話框-css教學-PHP中文網

首頁

web前端

css教學

解釋 Materialise CSS 中的對話框

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 19, 2023 pm 08:49 PM

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, Matichcan user shouldn the mdia feel startled by erials, Matichccys, Matlogs syetchanges wherappy's, Matsretics 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 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 id="Materialize-CSS"> Materialize CSS </h2>
   <h4 id="Different-Dialog-boxes"> 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.