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 mejor parte de este marco es que crea diseños hermosos y receptivos, ya que contiene componentes semánticos preconstruidos.
Una etiqueta es un componente importante de nuestro sitio web que muestra información al usuario. Ahora, estas etiquetas se pueden crear de varias maneras y pueden tener diferentes apariencias. Podemos crear una etiqueta con un ícono al lado, con una imagen al lado, etc. Esto se puede lograr con la ayuda del contenido de la etiqueta, que proporciona varias propiedades a nuestra etiqueta.
Contenido de la etiqueta de IU semántica:
- Detalle : si queremos que nuestra etiqueta muestre un mensaje se utiliza el contenido de la etiqueta detallada . Muestra el detalle de la etiqueta.
- Icono : si queremos que nuestra etiqueta muestre un icono,se utiliza el contenido de la etiqueta del icono. Esta etiqueta muestra el icono seleccionado.
- Imagen : si queremos que nuestra etiqueta muestre una imagen en particular, se utiliza el contenido de la etiqueta de imagen. Esta etiqueta muestra la imagen seleccionada.
- Enlace : si queremos que nuestra etiqueta tenga la forma de un enlace,se utiliza el contenido de la etiqueta del enlace. Esta etiqueta tiene la forma de un enlace.
Sintaxis:
<div class="ui label">
<div class="label-content">
...
</div>
</div>
Ejemplo 1: En el siguiente ejemplo, utilizaremos las clases de contenido de etiqueta de icono y detalle.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Label Variations</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> <br> <div class="ui green huge header"> GeeksforGeeks </div> <div class="ui large header">Label Content</div> <br> <div class="ui Big header">Detail</div> <div class="ui label"> Cricket <div class="detail"> <!--Detail Content--> Sport played with a bat and a ball. </div> </div> <br> <br> <div class="ui label"> Football <div class="detail"> <!--Detail Content--> Sport played with a ball. </div> </div> <div class="ui Big header">Icon</div> <div class="ui label"> <i class="truck icon"></i> <!--Icon Content--> This Is Truck </div> <div class="ui label"> <i class="motorcycle icon"></i> <!--Icon Content--> This Is Motorcycle </div> </body> </html>
Producción
Ejemplo 2: En el siguiente ejemplo, utilizaremos las clases de contenido de etiqueta de enlace e imagen.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Label Variations</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> <br> <div class="ui green huge header"> GeeksforGeeks </div> <div class="ui large header">Label Content</div> <br> <div class="ui Big header">Image</div> <div class="ui label"> <img class="ui Geek image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png"> <!--Image Content--> GeeksforGeeks </div> <div class="ui label"> <img class="ui Geek image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png"> <!--Image Content--> All Hail GFG </div> <div class="ui Big header">Link</div> <a class="ui label"> <!--Link Content--> <i class="truck icon"></i> Truck </a> <a class="ui label"> <!--Link Content--> <i class="mail icon"></i> Mail </a> </body> </html>
Producción
Referencia: https://semantic-ui.com/elements/label.html
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA