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. Este marco nos permite usar varios de sus estilos y propiedades para hacer que un sitio web sea más fácil de usar.
Se utiliza una etiqueta de interfaz de usuario semántica para crear clasificaciones de contenido significativas, las etiquetas dan descripciones a partes de contenido. En la etiqueta Semantic UI se ofrecen 4 tipos de Contenido. Estos son los tipos Detalle, Ícono, Imagen y Enlace . El contenido de la imagen de la etiqueta se usa para mostrar la imagen con algún contenido breve o texto, por ejemplo, nombre, posición, etc.
Clase de contenido de imagen de etiqueta de interfaz de usuario semántica:
- image: Esta clase se utiliza para insertar la imagen dentro de la etiqueta.
Sintaxis:
<a class="ui image label">
<img src="image-source">
...
</a>
Ejemplo 1: el siguiente código muestra el contenido de la imagen de la etiqueta mediante la clase de etiquetas de imagen de la interfaz de usuario.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Label Image Content</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <h1 class="ui header green"> GeeksforGeeks </h1> <strong> Semantic UI Label Image Content </strong> <br /> <a class="ui image label"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> GeeksforGeeks </a> </body> </html>
Producción:
Contenido de imagen de etiqueta de interfaz de usuario semántica
Ejemplo 2: Para cambiar el color de la etiqueta de la imagen, tenemos que agregar el color en la clase.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Label Image Content</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <h1 class="ui header green"> GeeksforGeeks </h1> <strong> Semantic UI Label Image Content </strong> <br /> <a class="ui green image label"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> GeeksforGeeks </a> </body> </html>
Producción:
Contenido de imagen de etiqueta de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/label.html#image
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA