Expliquer les boîtes de dialogue dans Materialise CSS

Grâce à la conception réactive intégrée de Materialize, les sites Web créés avec celui-ci peuvent automatiquement être redimensionnés pour s'adapter à différents types d'appareils. La classe Materialise a été développée pour adapter le site Web à n'importe quelle taille d'écran. Les sites Web créés avec Materialise sont accessibles sur tous les PC, tablettes et appareils mobiles.

Le design de

Materialize est plat et extrêmement simple. Il est réalisé en sachant que l’ajout de nouvelles règles CSS est beaucoup plus simple que la modification de règles déjà existantes. Il prend en charge les ombres et les teintes vibrantes. Le ton et le ton sont cohérents sur toutes les plateformes et tous les appareils. Mieux encore, son utilisation est entièrement gratuite.

Dans cet article, nous discuterons des boîtes de dialogue dans Materialise CSS.

Qu'est-ce que Materialise CSS ?

Materialize CSS est une bibliothèque de composants d'interface utilisateur développée en utilisant CSS, JavaScript et HTML. Google est l'entreprise qui l'a conçu. Material Design est un autre nom pour CSS. Il s’agit d’un langage de conception qui allie innovation et technologie aux principes classiques d’un bon design. Google souhaitait créer un cadre de conception permettant une expérience utilisateur cohérente sur tous les produits, sur n'importe quelle plate-forme.

Il s'agit d'un ensemble de composants d'interface utilisateur créés par Google. Il est utilisé pour créer des pages en ligne et des applications Web esthétiques, cohérentes et utiles tout en adhérant aux concepts de conception Web contemporains tels que la portabilité du navigateur, l'indépendance des appareils et la dégradation douce. est un CSS conventionnel avec un faible encombrement

.

Il est open source et nécessite la bibliothèque jQuery JavaScript pour fonctionner correctement. Il peut être utilisé pour créer des composants Web réutilisables et est compatible avec plusieurs navigateurs. Des cartes, des onglets, des barres de navigation, des toasts et des fonctionnalités plus mises à niveau et personnalisées sont inclus. . Il propose des variantes mises à jour d'éléments typiques de l'interface utilisateur tels que des boutons, des cases à cocher et des champs de texte qui ont été modifiés pour adhérer aux principes de Material Design.

Qu'est-ce qu'une boîte de dialogue ?

Une boîte de dialogue est un élément de contrôle graphique qui apparaît sous la forme d'une petite fenêtre et transmet des informations à l'utilisateur tout en lui demandant de réagir.

Selon qu'elles empêchent la communication avec le logiciel qui a ouvert la boîte de dialogue, les boîtes de dialogue sont classées comme « modales » ou « sans modèle ». L'interaction utilisateur souhaitée détermine le type de boîte de dialogue qui sera affichée.

L'élément

HTML "dialog" représente une boîte de dialogue ou un autre élément interactif tel qu'une sous-fenêtre, un inspecteurou une alerte fermable.

Boîtes de dialogue dans Materialise CSS

Les boîtes de dialogue dans Materialize CSS permettent aux utilisateurs d'accéder à plus d'informations selon leurs besoins. Celles-ci ne sont pas immédiatement affichées sur le site Web. Les informations nécessaires à ce moment précis sont liées aux transitions de dialogue. Afin d'afficher les boîtes de dialogue, Materialise propose plusieurs options. Les boîtes de dialogue sont des éléments qui sont normalement cachés sur une page mais qui apparaissent avec plus d'informations lorsque cela est nécessaire. L'utilisateur ne devrait pas se sentir surpris par les modifications, ce qui devrait être logique d'après l'apparence de la boîte de dialogue. Toasts dans Materialise vous offre un moyen simple de le faire. donnez à vos utilisateurs des alertes discrètes. Vous pouvez tester la réactivité de ces toasts et leur taille en cliquant sur le bouton ci-dessous sur différentes tailles d'appareils

.

Utilisez du code JavaScript pour appeler par programme la fonction Materialize.toast() pour ce faire. Une chaîne HTML peut également être fournie comme premier argument. Une fois le toast rejeté, vous pouvez lui faire rappeler une certaine fonction. peut facilement personnaliser les classes de style CSS et l'ajouter aux toasts comme paramètre facultatif.

Grammaire

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

Paramètre

• Contenu- Il est utilisé pour spécifier le contenu à afficher sur l'écran de l'utilisateur.

• timeDuration- Utilisé pour spécifier la durée d'affichage du message à l'écran.

• Class- Utilisé pour spécifier le type de classe de style à appliquer à l'info-bulle.

• Callback- Il est utilisé pour spécifier la méthode de rappel qui doit être appelée après le rejet du toast.

Le lien Materialise et CDN suivant doit être écrit dans la balise

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

La traduction chinoise de

Exemple

est :

Exemple

L'exemple ci-dessous illustre comment ajouter différents types de boîtes de dialogue dans une page Web à l'aide de Materialise 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>

En cliquant sur le bouton de la boîte d'alerte en gras et arrondi, une boîte d'alerte de forme arrondie avec du texte en gras s'affichera à l'écran. En cliquant sur le bouton de la boîte d'alerte soulignée, une boîte d'alerte rectangulaire avec du texte souligné sera affichée. , une boîte d'alerte rectangulaire avec le texte souligné sera affichée

.

Conclusion

Dans cet article, nous utilisons Materialise CSS pour créer des boîtes de dialogue. Nous avons découvert la fonction matérialiser toast(), qui nous permet de créer des boîtes à toast personnalisées. Nous avons également appris quelques concepts JavaScript, comme la fonction onclick().

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!