Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear una excelente interfaz de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. Utiliza una clase para agregar CSS a los elementos. Un mensaje muestra información relacionada con algún contenido.
Ejemplo 1:
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <div class="ui message"> <div class="header"> Geeksforgeeks </div> <p>A computer science Portal.</p> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Ejemplo 2: mensaje de lista
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <div class="ui message"> <div class="header"> New Courses </div> <ul> <li>Data Structure</li> <li>AngularJS</li> <li>NodeJS</li> </ul> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Ejemplo 3: este ejemplo crea un mensaje descartable. Esto requiere que se importe la biblioteca jQuery.
Sintaxis:
$('.message .close').on('click', function() {
$(this).closest('.message').transition('fade');
});
Código completo:
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<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">
<div class="ui message">
<i class="close icon"></i>
<div class="header">
Thank you for Choosing Geeksforgeeks!
</div>
<p>Hope you have great learning here.</p>
</div>
</div>
<script>
$('.message .close').on('click', function () {
$(this).closest('.message').transition('fade');
});
</script>
</body>
</html>
Producción:
Nota:
- Puede agregar información de clase, error, éxito, positivo y advertencia para cambiar el aspecto del mensaje. Por ejemplo: Para mostrar el mensaje de advertencia: class=’mensaje de advertencia de ui’.
- Puede escribir cualquier clase de color o tamaño para cambiar el color o el tamaño de la clase respectivamente.
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA