Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces 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. Semantic-UI tiene encabezados realmente geniales que se pueden usar con texto, íconos y muchos más.
Un mensaje muestra información relacionada con algún contenido. Semantic-UI tiene un elemento de mensaje realmente genial que se puede usar con texto, íconos y muchos más. La interfaz de usuario semántica tiene diferentes tipos de variaciones de mensajes, como variaciones de tamaño, variaciones adjuntas, variaciones compactas y mensajes de variaciones de color. En este artículo, aprenderemos sobre la variación adjunta de mensajes en la interfaz de usuario semántica.
El mensaje adjunto en la interfaz de usuario semántica se puede formatear para adjuntarlo a otro contenido. No tiene ningún margen inferior como un elemento de mensaje normal. Para convertir un elemento de mensaje normal en un mensaje adjunto en la interfaz de usuario semántica, usamos la clase adjunta junto con las clases ui y message.
Clase de variación adjunta del mensaje de IU semántica:
- adjunto: la clase adjunta hace que el elemento del mensaje se adjunte a otro contenido haciendo que su margen inferior sea cero.
Sintaxis:
<div class="ui attached message"> content.... </div>
Ejemplo 1: este ejemplo demuestra el elemento de mensaje adjunto en la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Message Attached Variation</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 style="padding: 30px;"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Semantic UI Message</strong> <br /><br /> </center> <div class="ui attached message">Attached message</div> <div class="ui attached segment"> <img src= "http://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png" /> </div> </body> </html>
Producción:
Variación adjunta de mensaje de interfaz de usuario semántica
Ejemplo 2: este ejemplo muestra varios elementos de mensajes adjuntos con variaciones de error y advertencia en la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Message Attached Variation</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 style="padding: 30px;"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Semantic UI Message</strong> <br /><br /> </center> <div class="ui attached error message"> Attached message </div> <div class="ui attached segment"> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles </p> <img src= "http://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png" /> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. </p> </div> <div class="ui bottom attached warning message"> <i class="icon help"></i> Dont miss opportunity learn at GeeksforGeeks. </div> </body> </html>
Producción:
Variación adjunta de mensaje de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/message.html#attached
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA