La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
El mensaje de interfaz de usuario semántica ofrece a los usuarios 2 estados de mensajes que están visibles y ocultos. En este artículo, veremos sobre el estado visible. El estado Visible del mensaje de la interfaz de usuario semántica se utiliza para mostrar el mensaje a la audiencia; este también es el estado predeterminado del componente del mensaje.
Mensaje de IU semántica Clase de estado visible:
- visible: Esta clase se utiliza para hacer visible el mensaje.
Sintaxis:
<div class="ui visible message">
...
</div>
El siguiente ejemplo ilustra el estado visible del mensaje de la interfaz de usuario semántica.
Ejemplo 1: En este ejemplo, veremos el mensaje visible .
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> <h1 class="ui header green"> GeeksforGeeks </h1> <strong>Semantic UI Message Visible State</strong> </center> <strong>Message Visible State:</strong> <div class="ui visible message"> <p>A Computer Science Portal for Geeks</p> </div> </body> </html>
Producción:
Estado visible del mensaje de la interfaz de usuario semántica
Ejemplo 2: En este ejemplo, mostraremos el mensaje visible y oculto .
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> <h1 class="ui header green"> GeeksforGeeks </h1> <strong>Semantic UI Message Visible State</strong> </center> <strong>Message Visible State:</strong> <div class="ui visible message"> <p>A Computer Science Portal for Geeks</p> </div> <strong>Message Hidden State:</strong> <div class="ui hidden message"> <p>A Computer Science Portal for Geeks</p> </div> </body> </html>
Producción:
Estado visible del mensaje de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/message.html#visible
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA