Semantic UI es el marco de código abierto que utilizó CSS y jQuery para hacer que nuestros sitios web se vean hermosos y receptivos. Tiene clases predefinidas como bootstrap para usar para hacer que nuestro sitio web sea más interactivo. Tiene algunos componentes semánticos preconstruidos y podemos usar estos componentes para crear un sitio web receptivo.
El mensaje de interfaz de usuario semántica se utiliza para mostrar un mensaje que puede explicar el contenido cercano. La variación positiva/de éxito se utiliza para mostrar tipos de mensajes positivos y de éxito. Podemos usar la clase positiva cuando queremos mostrar información positiva y la clase de éxito cuando queremos mostrar el éxito de nuestra tarea. En este artículo, discutiremos la Variación Positiva/Éxito del Mensaje en la IU Semántica.
Mensaje de interfaz de usuario semántica Positivo / Clases de variación de éxito:
- positivo: esta clase se utiliza para mostrar un mensaje positivo.
- éxito: esta clase se utiliza para mostrar los mensajes de finalización exitosa de la tarea.
Sintaxis:
<div class="ui Positive/Success-Variation-Classes message">
...
</div>
Ejemplo 1: el siguiente código demuestra la variación positiva del mensaje de la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> </head> <body> <center> <h2 style="color: green"> GeeksforGeeks </h2> <h3> Semantic UI Message Positive Variation </h3> </center> <div class="ui positive message"> <div class="header"> Reward from GeeksforGeeks </div> <p>Go to <a target="_blank" href="https://www.geeksforgeeks.org/"> https://www.geeksforgeeks.org/ </a> to claim the reward. </p> </div> </body> </html>
Producción:
Mensaje de interfaz de usuario semántica Variación positiva/de éxito
Ejemplo 2: el siguiente código muestra la variación de éxito del mensaje de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> </head> <body> <center> <h2 style="color: green"> GeeksforGeeks </h2> <h3> Semantic UI Message Success Variation </h3> </center> <div class="ui success message"> <div class="header"> Registration Successful!! </div> <p> You can now login to check your details. </p> </div> </body> </html>
Producción:
Mensaje de interfaz de usuario semántica Variación positiva/de éxito
Referencia: https://semantic-ui.com/collections/message.html#positive–success
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA