Semantic UI ofrece muchos componentes para que los usuarios diseñen su interfaz. Uno de ellos es «Mensaje». Puede construir cualquier componente según su uso. Hay diferentes tipos de mensajes.
Crearemos una interfaz de usuario para mostrar los diferentes tipos de mensajes. Después de crear esta plantilla básica, puede trabajar con diferentes componentes de la interfaz de usuario semántica.
Clase de tipos de mensajes de interfaz de usuario semántica:
- mensaje: Un mensaje simple básico.
- mensaje de lista : Un mensaje con una lista en su cuerpo.
- mensaje de icono : Un mensaje que tiene un icono.
- bloque descartable : un mensaje con una opción de ocultación para el usuario.
Sintaxis:
<div class="ui icon message"> .... </div>
Ejemplo 1: Este ejemplo demuestra el mensaje básico utilizando la clase de mensaje .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h2 style="color:green">GeeksforGeeks</h2> <b> <p>Semantic UI message types</p> </b> <div class="ui message"> <div class="header"> Message header </div> <p>This is the basic message.</p> </div> </div> </body> </html>
Producción:
Tipos de mensajes de interfaz de usuario semántica
Ejemplo 2: Este ejemplo demuestra el mensaje usando la clase de lista . La lista se implementa dentro del elemento HTML ul .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h2 style="color:green">GeeksforGeeks</h2> <b> <p>Semantic UI list message</p> </b> <div class="ui message" style="margin:50px"> <div class="header"> header for list message </div> <ul class="list"> <li>Introduction to Propositional Logic</li> <li>Propositional Equivalences</li> <li>Predicates and Quantifiers</li> </ul> </div> </div> </body> </html>
Producción:
Tipos de mensajes de interfaz de usuario semántica
Ejemplo 3: Este ejemplo demuestra el mensaje usando la clase icon .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h2 style="color:green">GeeksforGeeks</h2> <b> <p>Semantic UI icon message</p> </b> <div class="ui icon message" > <i class="inbox icon"></i> <div class="content"> <div class="header"> Icon Message </div> <p>Get your mails ...</p> </div> </div> </div> </body> </html>
Producción:
Tipos de mensajes de interfaz de usuario semántica
Ejemplo 4: Este ejemplo demuestra el mensaje descartable usando la clase icon . Los mensajes se pueden ocultar haciendo clic en el signo de la cruz con la ayuda del método jQuery click() .
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<h2 style="color:green">GeeksforGeeks</h2>
<b>
<p>Semantic UI dismissable message</p>
</b>
<div class="ui message ">
<i class="close icon"></i>
<div class="header">
Welcome to GeeksforGeeks!
</div>
<p>This is a special dismissable message which
you can dismiss by clicking on cross sign.
</p>
</div>
</div>
</div>
<script>
$('.message .close').on('click', function() {
$(this).closest('.message').transition('hide');
});
</script>
</body>
</html>
Producción:
Tipos de mensajes de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/message.html
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA