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 de advertencia, variaciones compactas y mensajes de variaciones de color. En este artículo, aprenderemos sobre la variación compacta de mensajes en la interfaz de usuario semántica.
El mensaje compacto en la interfaz de usuario semántica solo puede ocupar el ancho de su contenido. No toma el ancho de su contenedor principal como un elemento de mensaje normal. Para convertir un elemento de mensaje normal en un mensaje compacto en la IU semántica, usamos la clase compacta junto con las clases ui y message.
Clase de variación compacta de mensaje de IU semántica:
- compact: La clase compact hace que el elemento del mensaje ocupe solo el ancho de su contenido.
Sintaxis:
<div class="ui compact message"> content.... </div>
Ejemplo 1: este ejemplo demuestra la diferencia entre un elemento de mensaje normal y compacto en la interfaz de usuario semántica.
HTML
<!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 style="padding: 30px;"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Semantic UI Message</strong> <br /><br /> </center> <div class="ui compact message"> <p>This is a compact message.</p> </div> <div class="ui message"> <p>This is a normal message.</p> </div> <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> </body> </html>
Producción:
Producción
Ejemplo 2: este ejemplo demuestra el elemento de mensaje compacto con diferentes colores en la interfaz de usuario semántica.
HTML
<!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 style="padding: 30px;"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Semantic UI Message</strong> <br /><br /> </center> <div class="ui red compact message">Red Compact GeeksforGeeks</div> <div class="ui orange compact message">Orange Compact GeeksforGeeks</div> <div class="ui yellow compact message">Yellow Compact GeeksforGeeks</div> <div class="ui olive compact message">Olive Compact GeeksforGeeks</div> <div class="ui green compact message">Green Compact GeeksforGeeks</div> <div class="ui teal compact message">Teal Compact GeeksforGeeks</div> <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> </body> </html>
Producción:
Producción
Referencia: https://semantic-ui.com/collections/message.html#compact
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA