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.
La interfaz de usuario semántica tiene un montón de componentes para el diseño de la interfaz de usuario. Uno de ellos es “Imagen”. Las imágenes son una herramienta importante para representar información en las páginas web. Los usuarios pueden interactuar con ellos haciendo clic o desplazándose sobre ellos. Dependiendo de los requisitos del uso de imágenes, existen diferentes estados de imágenes. Uno de ellos es el estado oculto.
El estado oculto de imagen de interfaz de usuario semántica se utiliza para ocultar una imagen de forma predeterminada. Es posible que el usuario deba ocultar algunas imágenes en la interfaz de usuario donde los usuarios no tienen acceso para interactuar. En ese caso, un estado oculto viene muy bien. Los usuarios pueden poner la imagen en un estado oculto. Se pueden ocultar diferentes imágenes dentro del código sin mostrarlo en la interfaz. Los usuarios pueden ocultar la imagen en ciertas condiciones según sus requisitos.
Imagen de interfaz de usuario semántica Clase de estado oculto:
- hidden: esta clase se utiliza para poner la imagen en un estado oculto y evitar cualquier interacción con ella.
Sintaxis:
<div class="ui container">
<img class="ui hidden image" src="" />
....
</div>
Ejemplo 1: Este ejemplo demuestra el estado oculto de la imagen utilizando la clase oculta. Los usuarios no podrán ver la imagen. Puede ver el resultado en la imagen a continuación, que muestra un estado oculto de la imagen.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Image Hidden State</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <br /><br /> <h2 class="ui header green">GeeksforGeeks</h2> <strong>Semantic UI Image Hidden State</strong> <hr> <br /> <strong> Hidden Image:</strong> <br /><br /> <img class="hidden medium ui image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200505154108/image30.png" /> </div> </body> </html>
Producción :
Estado oculto de imagen de interfaz de usuario semántica
Ejemplo 2: Este ejemplo demuestra el estado oculto de la imagen utilizando la clase oculta . Puede ver el resultado en la imagen a continuación, que muestra un logotipo oculto.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Image Hidden State</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <br/><br/> <h2 class="ui header green">GeeksforGeeks</h2> <strong>Semantic UI Image Hidden State</strong> <hr> <br/> <strong>Hidden Logo:</strong> <br /><br /> <img class="hidden small ui image" src= 'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg' /> </div> </body> </html>
Producción :
Estado oculto de imagen de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/image.html#hidden
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA