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 nos ofrece 2 estados del mensaje que son visibles y ocultos. En este artículo, conoceremos el estado oculto. El estado oculto del mensaje de la interfaz de usuario semántica se utiliza para ocultar el mensaje a la audiencia.
Mensaje de interfaz de usuario semántica Clase de estado oculto:
- hidden: esta clase se utiliza para crear el mensaje oculto.
Sintaxis:
<div class="ui hidden message">
...
</div>
Nota: hay una cosa a tener en cuenta en los estados ocultos, este estado no solo oculta el mensaje, sino que también elimina el espacio para ese mensaje.
El siguiente ejemplo ilustra el estado oculto del mensaje de la interfaz de usuario semántica.
Ejemplo 1: En este ejemplo, usaremos el estado oculto del mensaje.
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 Hidden State</strong> </center> <strong>Message Hidden State:</strong> <div class="ui hidden message"> <p>A Computer Science Portal for Geeks</p> </div> </body> </html>
Producción:
Estado oculto del mensaje de la interfaz de usuario semántica
Ejemplo 2: En este ejemplo, usaremos ambos estados de un mensaje oculto y 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 Hidden State</strong> </center> <strong>Message Hidden State:</strong> <div class="ui hidden message"> <p>A Computer Science Portal for Geeks</p> </div> <br> <strong>Message Visible State:</strong> <div class="ui visible message"> <p>A Computer Science Portal for Geeks</p> </div> </body> </html>
Producción:
Estado oculto del mensaje de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/message.html#hidden
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA