La interfaz de usuario semántica es un marco que se utiliza para crear una excelente interfaz de usuario. Es un marco de código abierto que utiliza CSS y jQuery . 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.
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 el grupo de etiquetas, una sola clase hará que todo el grupo de etiquetas tenga el mismo estilo. En la etiqueta Semantic UI, se ofrecen 4 tipos de grupos. Estos son Tamaño de grupo, Grupo de colores, Grupo de etiquetas, Grupo circular.
En este artículo, aprenderemos a usar el marco Label Circular Group of Semantic UI.
El grupo Etiqueta circular se utiliza para hacer que la forma de la etiqueta básica sea circular. Las etiquetas pueden compartir formas en el grupo circular de etiquetas, es decir, si incluimos la clase circular globalmente, todas las etiquetas dentro del div pueden compartir el mismo formato.
Clase de grupo circular de etiqueta de interfaz de usuario semántica:
- circular: esta clase se utiliza para hacer que la etiqueta sea circular.
Sintaxis:
<div class="ui circular labels">
<a class="ui label">
...
</a>
...
</div>
Ejemplo 1:
HTML
<!DOCTYPE html> <html lang="en"> <head> <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> <title>GeeksforGeeks</title> </head> <body> <br /> <h1 class="ui header green">GeeksforGeeks</h1> <strong>Semantic UI Label Circular Group</strong> <div class="ui labels circular"> <a class="ui label">Geeks</a> <a class="ui label">for</a> <a class="ui label">Geeks</a> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, cambiaremos el color de la etiqueta circular, tenemos que agregar el color en la clase.
HTML
<!DOCTYPE html> <html lang="en"> <head> <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> <title>GeeksforGeeks</title> </head> <body> <br /> <h1 class="ui header green">GeeksforGeeks</h1> <strong>Semantic UI Label Circular Group</strong> <div class="ui labels circular"> <a class="ui green label">Geeks</a> <a class="ui yellow label">for</a> <a class="ui red label">Geeks</a> </div> </body> </html>
Producción:
Ejemplo 3: En este ejemplo, crearemos etiquetas circulares sin texto.
HTML
<!DOCTYPE html> <html lang="en"> <head> <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> <title>GeeksforGeeks</title> </head> <body> <br /> <h1 class="ui header green">GeeksforGeeks</h1> <strong>Semantic UI Label Circular Group</strong> <div class="ui labels circular"> <a class="ui green label"></a> <a class="ui yellow label"></a> <a class="ui red label"></a> <a class="ui blue label"></a> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/label.html#circular-group
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA