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 de discapacidad.
El estado de desactivación de la imagen de IU semántica se utiliza para mostrar una imagen desactivada de forma predeterminada. Es posible que el usuario necesite mostrar algunas imágenes en la interfaz de usuario donde los usuarios no tienen acceso para interactuar. En ese caso, un estado deshabilitado es útil. Los usuarios pueden mostrar la imagen en un estado deshabilitado.
Imagen de interfaz de usuario semántica Clase de estado deshabilitada:
- disabled: esta clase se utiliza para mostrar la imagen en un estado deshabilitado y también para evitar cualquier interacción con ella.
Sintaxis:
<div class="ui container">
....
<img class="ui disabled image" src="" />
....
</div>
Ejemplo 1: Este ejemplo demuestra el estado deshabilitado de la imagen usando la clase deshabilitada . Los usuarios no podrán interactuar con la imagen haciendo clic en ella. Puede ver el resultado en la imagen a continuación, que muestra una imagen deshabilitada.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Image Disabled 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 Disabled State</strong> <hr><br /> <strong> Disabled Image:</strong> <br /><br /> <img class="disabled medium ui image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200505154108/image30.png" /> </div> </body> </html>
Producción:
Imagen de interfaz de usuario semántica deshabilitada
Ejemplo 2: Este ejemplo demuestra el estado deshabilitado de la imagen usando la clase deshabilitada . Puede ver el resultado en la imagen a continuación, que muestra un logotipo deshabilitado.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Image Disabled 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 Disabled State</strong> <hr><br/> <strong> Disabled Logo:</strong> <br /><br /> <img class="disabled small ui image" src= 'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg' /> </div> </body> </html>
Producción:
Imagen de interfaz de usuario semántica deshabilitada
Enlace de referencia: https://semantic-ui.com/elements/image.html#disabled
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA