Erklären Sie Dialoge in Materialise CSS

Dank des integrierten responsiven Designs von Materialise können damit erstellte Websites automatisch in der Größe angepasst werden, um sie an verschiedene Gerätetypen anzupassen. Die Materialise-Klasse wurde entwickelt, um die Website an jede Bildschirmgröße anzupassen. Mit Materialise erstellte Websites können von allen PCs, Tablets und Mobilgeräten aufgerufen werden.

Das Design von

Materialise ist flach und extrem einfach. Dabei wird davon ausgegangen, dass das Hinzufügen neuer CSS-Regeln viel einfacher ist als das Ändern bereits bestehender Regeln. Es unterstützt Schatten und lebendige Farbtöne. Der Ton und Ton sind auf allen Plattformen und Geräten einheitlich. Das Beste ist vielleicht, dass die Nutzung völlig kostenlos ist.

In diesem Artikel besprechen wir Dialogfelder in Materialise CSS.

Was ist Materialise CSS?

Materialise CSS ist eine Komponentenbibliothek für Benutzeroberflächen, die mit CSS, JavaScript und HTML entwickelt wurde. Google ist das Unternehmen, das es entwickelt hat. Material Design ist ein anderer Name für CSS. Es handelt sich um eine Designsprache, die Innovation und Technologie mit den klassischen Prinzipien guten Designs verbindet. Google wollte ein Design-Framework schaffen, das ein einheitliches Benutzererlebnis für alle Produkte auf jeder Plattform ermöglicht.

Es handelt sich um eine Reihe von UI-Komponenten, die von Google erstellt wurden, um Online-Seiten und Web-Apps zu erstellen, die ästhetisch ansprechend, konsistent und nützlich sind und gleichzeitig moderne Webdesign-Konzepte wie Browser-Portabilität, Geräteunabhängigkeit und sanfte Verschlechterung einhalten ist ein herkömmliches CSS mit geringem Platzbedarf

Es ist Open Source und benötigt die jQuery-JavaScript-Bibliothek, um ordnungsgemäß zu funktionieren. Es kann zum Erstellen wiederverwendbarer Webkomponenten verwendet werden und ist browserübergreifend kompatibel. Karten, Registerkarten, Navigationsleisten, Toasts und weitere aktualisierte und angepasste Funktionen sind enthalten . Es bietet aktualisierte Variationen typischer Benutzeroberflächenelemente wie Schaltflächen, Kontrollkästchen und Textfelder, die geändert wurden, um den Material Design-Prinzipien zu entsprechen.

Was ist ein Dialogfeld?

Ein Dialogfeld ist ein grafisches Steuerelement, das in Form eines kleinen Fensters erscheint und dem Benutzer Informationen übermittelt und ihn gleichzeitig zu einer Reaktion auffordert.

Je nachdem, ob sie die Kommunikation mit der Software verhindern, die den Dialog geöffnet hat, werden Dialogfelder als „

modal“ oder „modelllos“ kategorisiert. Die gewünschte Benutzerinteraktion bestimmt die Art des Dialogfelds, das angezeigt wird. Das

HTML-Element „

dialog“ stellt ein Dialogfeld oder ein anderes interaktives Element wie ein Unterfenster, einen Inspektoroder eine schließbare Warnung dar.

Dialoge in Materialise CSS

Dialoge in

Materialise CSS geben Benutzern bei Bedarf Zugriff auf weitere Informationen. Diese werden nicht sofort auf der Website angezeigt. Um Dialoge anzuzeigen, bietet Materialise mehrere Optionen. Dialoge sind Teile des Materials, die normalerweise auf einer Seite versteckt sind, aber bei Bedarf mit weiteren Informationen angezeigt werden. Der Benutzer sollte sich durch die Änderungen nicht erschrecken, was aufgrund des Erscheinungsbilds des Dialogs eine einfache Möglichkeit sein sollte Geben Sie Ihren Benutzern diskrete Benachrichtigungen. Sie können testen, wie reaktionsfähig diese Toasts sind, indem Sie auf die Schaltfläche unten auf verschiedenen Gerätegrößen klicken Verwenden Sie JavaScript-Code, um die Funktion

Materialize.toast()

als erstes Argument aufzurufen. Sobald der Toast verworfen wurde, können Sie ihn eine bestimmte Funktion zurückrufen lassen Sie können die CSS-Stilklassen einfach anpassen und als optionalen Parameter zu den Toasts hinzufügen. Grammatik

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

Parameter

• Inhalt – Wird verwendet, um den Inhalt anzugeben, der auf dem Bildschirm des Benutzers angezeigt werden soll.

• timeDuration – Wird verwendet, um die Zeitdauer anzugeben, für die die Nachricht auf dem Bildschirm angezeigt wird.

• Klasse – Wird verwendet, um den Typ der Stilklasse anzugeben, die auf den Tooltip angewendet werden soll.

• Rückruf – Wird verwendet, um die Rückrufmethode anzugeben, die aufgerufen werden soll, nachdem der Toast verworfen wurde.

Der folgende Materialise- und CDN-Link muss in das 93f0f5c25f18dab9d176bd4f6de5d30e-Tag geschrieben werden −

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

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

Das folgende Beispiel veranschaulicht, wie man mit Materialise CSS verschiedene Arten von Dialogfeldern zu einer Webseite hinzufügt.

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

Beim Klicken auf die fettgedruckte und abgerundete Warnfeldschaltfläche wird ein abgerundetes Warnfeld mit fettgedrucktem Text auf dem Bildschirm angezeigt. Wenn Sie auf die hervorgehobene Warnfeldschaltfläche klicken, wird beim Klicken auf das unterstrichene Warnfeld angezeigt , wird ein rechteckiges Warnfeld mit unterstrichenem Text angezeigt

Fazit

In diesem Artikel verwenden wir Materialise CSS, um Dialogfelder zu erstellen. Wir haben etwas über die Funktion Materialise toast() erfahren, mit der wir benutzerdefinierte Toastboxen erstellen können. Wir haben auch einige JavaScript-Konzepte gelernt, beispielsweise die Funktion onclick().

Das obige ist der detaillierte Inhalt vonErklären Sie Dialoge in Materialise CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!