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 flotante en la interfaz de usuario semántica.
Clase de variación flotante de mensaje de interfaz de usuario semántica:
- flotante: Esta clase crea el efecto flotante del mensaje sobre el contenido de la pantalla.
Sintaxis:
<div class="ui floating message"> <i class=".... icon"></i> <div class="content"> ... </div> </div>
Ejemplo 1: Este ejemplo describe el mensaje de variación flotante.
HTML
<!DOCTYPE html> <html> <head> <head>Semantic-UI Message Floating Variation</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 Floating Type </strong> </center> <br /> <br /> <div class=" ui container"> <div class="ui floating message"> <p>A basic floating message</p> </div> </div> </body> </html>
Producción:
Variación flotante del mensaje de interfaz de usuario semántica
Ejemplo 2: Este ejemplo describe el mensaje de lista de variación flotante.
HTML
<!DOCTYPE html> <html> <head> <head>Semantic-UI Message Floating Variation</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 Floating Type </strong> </center> <br /> <br /> <div class="ui container"> <div class="ui floating message"> <div class="header"> New Update 2.3.1 available </div> <ul class="list"> <li>Enhanced UI with new features</li> <li> Auto save work feature added </li> <li>Improved the launch performance</li> </ul> </div> </div> </body> </html>
Producción:
Variación flotante del mensaje de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/message.html#floating
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA