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 mensajes de iconos, mensajes de lista, mensajes descartables y mensajes de colores. En este artículo, aprenderemos sobre las variaciones de color de los mensajes en la interfaz de usuario semántica.
Para crear una variación de color del mensaje de la interfaz de usuario semántica, usamos el color deseado como una clase junto con la interfaz de usuario y las clases de mensajes . Por ejemplo, si necesitamos una variación de color rojo del mensaje de la interfaz de usuario semántica, usamos red, ui y message como clases para padre <div>. Esto hace que el color de fondo del elemento del mensaje sea el color mencionado.
Clase de variación de color de la tarjeta de interfaz de usuario semántica:
- rojo: esta clase se utiliza para establecer el color en rojo.
- naranja: esta clase se utiliza para establecer el color en naranja.
- amarillo: esta clase se utiliza para establecer el color en amarillo.
- oliva: esta clase se utiliza para establecer el color en oliva.
- verde: esta clase se utiliza para establecer el color en verde.
- verde azulado: esta clase se usa para establecer el color en verde azulado.
- azul: esta clase se utiliza para establecer el color en azul.
- púrpura: esta clase se usa para establecer el color en púrpura.
- violeta: esta clase se utiliza para establecer el color en violeta.
- rosa: esta clase se utiliza para establecer el color en rosa.
- marrón: esta clase se usa para establecer el color en marrón.
- gris: esta clase se utiliza para establecer el color en gris.
- negro: esta clase se usa para establecer el color en negro
Sintaxis:
<div class="ui Colored-Variation-Class message">
// content
</div>
Ejemplo 1: este ejemplo muestra variaciones de color rojo, naranja, amarillo, verde oliva, verde y verde azulado del mensaje de la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Message Colored 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"> </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 red message"> Red GeeksforGeeks </div> <div class="ui orange message"> Orange GeeksforGeeks </div> <div class="ui yellow message"> Yellow GeeksforGeeks </div> <div class="ui olive message"> Olive GeeksforGeeks </div> <div class="ui green message"> Green GeeksforGeeks </div> <div class="ui teal message"> Teal GeeksforGeeks </div> </body> </html>
Producción:
Variación de color del mensaje de interfaz de usuario semántica
Ejemplo 2: Este ejemplo muestra variaciones de color azul, violeta, púrpura, rosa, marrón y negro del mensaje semántico-Ui.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Message Colored 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"> </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 blue message"> Blue GeeksforGeeks </div> <div class="ui violet message"> Violet GeeksforGeeks </div> <div class="ui purple message"> Purple GeeksforGeeks </div> <div class="ui pink message"> Pink GeeksforGeeks </div> <div class="ui brown message"> Brown GeeksforGeeks </div> <div class="ui black message"> Black GeeksforGeeks </div> </body> </html>
Producción:
Variación de color del mensaje de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/message.html#colored
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA