Semantic UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como bootstrap.
La interfaz de usuario semántica proporciona a los usuarios varias clases de tipos de mensajes diferentes que se pueden usar para diferentes propósitos para mostrar un mensaje con una buena interfaz. En este artículo, veamos los mensajes de variación de advertencia en la interfaz de usuario semántica.
Clases de mensajes de tipo de variación flotante de interfaz de usuario semántica:
- advertencia: Esto indica que el mensaje es de tipo advertencia mediante un color.
Sintaxis:
<div class="ui warning message">
.....
</div>
Ejemplo-1: Este ejemplo demuestra la variación de advertencia de mensaje básico.
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> <center> <h1 class="ui green header">GeeksforGeeks</h1> <strong> Semantic-UI Message Warning variation </strong> </center> <br /> <br /> <div class="ui container"> <div class="ui warning message"> <div class="header"> Some files not loaded enable JavaScript to load them </div> </div> </div> </body> </html>
Producción :
Variación de advertencia de mensaje de interfaz de usuario semántica
Ejemplo-2: Este ejemplo demuestra la variación de advertencia 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" />
<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>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>
Semantic-UI Message Warning variation
</strong>
</center>
<br />
<br />
<div class="ui container">
<div class="ui warning message transition">
<i class="close icon"></i>
<div class="header">
A newer version available download
to have the better experience
</div>
Visit <a href="#"> this </a> page to know more about the update
</div>
</div>
</body>
<script>
$('.message .close').on('click', function () {
$(this).closest('.message').transition('fade up');
});
</script>
</html>
Producción :
Variación de advertencia de mensaje de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/message.html#warning
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA