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 varios elementos diferentes para usar para hacer que su sitio web se vea más increíble. Semantic-UI nos brinda una manera muy fácil de diseñar imágenes en lugar de usar códigos CSS largos. Ofrece imágenes en diferentes estados como ocultas y deshabilitadas. También nos proporciona diferentes tipos como imagen normal y enlaces de imagen y también en diferentes variaciones.
En este artículo, aprenderemos sobre los estados de imagen de la interfaz de usuario semántica y su implementación mediante un código de ejemplo.
Estados de la imagen de la interfaz de usuario semántica: hay dos estados en las imágenes de la interfaz de usuario semántica que incluyen el estado oculto y el estado deshabilitado. Comprendamos ahora cada uno de ellos.
1. Estado oculto : aunque la imagen está incluida en el código, no podremos ver la imagen en la página web porque la imagen está oculta cuando usamos la clase .hidden a la imagen.
Sintaxis:
<img class="hidden ui image" src=".....">
Ejemplo:
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" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <div class="ui container kk"> <h2 class="ui header green kk">Geeksforgeeks</h2> <strong>Semantic-UI Image Hidden State</strong> <br /><br /> <img class="hidden medium ui image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png" /> <br> <p>We will not be able to see image</p> </div> </center> </body> </html>
Salida: Podemos observar que la imagen no es visible en la salida.
2. Estado deshabilitado : en el estado de IU semántica deshabilitada, la imagen será visible pero podemos observar que la imagen no se puede seleccionar y se deshabilitará aunque sea visible
Sintaxis:
<img class="disabled ui image" src=".....">
Ejemplo:
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" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <div class="ui container kk"> <h2 class="ui header green kk">Geeksforgeeks</h2> <strong>Semantic-UI Image Disabled State</strong> <br><br> <img class="disabled medium ui image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png"> <br> <p> We will be able to see image but in disabled state <p> </div> </center> </body> </html>
Salida: Podemos observar que la imagen está en un estado deshabilitado
Referencia: https://semantic-ui.com/elements/image.html#states
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA