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. 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.
El grupo de etiquetas de etiquetas de interfaz de usuario semántica es el grupo de etiquetas que pueden compartir el formato de etiqueta. Tenemos que incluir la clase de etiqueta en el div externo cuando agregamos las etiquetas en él, compartirán automáticamente el formato de etiqueta.
Clase de grupo de etiquetas de etiquetas de IU semántica:
- tag : Esta clase se usa para hacer la etiqueta de la etiqueta.
Sintaxis:
<div class="ui tag labels">
<a class="ui label">
....
</a>
....
</div>
Ejemplo 1: el código siguiente muestra el grupo de etiquetas de etiquetas mediante la clase de etiquetas de etiquetas de la interfaz de usuario .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic-UI Label Tag Group</title>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
<style>
body{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<h1 class="ui header green">GeeksforGeeks</h1>
<strong> Semantic UI Label Tag Group </strong>
<br/><br/>
<div class="ui tag labels">
<a class="ui label">My label 1 </a>
<br/><br/>
<a class="ui label">Hello User! </a>
</div>
</body>
</html>
Producción:
Grupo de etiquetas de etiquetas de interfaz de usuario semántica
Ejemplo 2: Para cambiar el color de la etiqueta, tenemos que agregar el color en la clase.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic-UI Label Tag Group</title>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
<style>
body{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<h1 class="ui header green"> GeeksforGeeks </h1>
<strong> Semantic UI Label Tag Group </strong>
<br/><br/>
<div class="ui tag labels">
<a class="ui green label">My label 1</a>
<br/><br/>
<a class="ui red label">Hello User!</a>
</div>
</body>
</html>
Producción:
Grupo de etiquetas de etiquetas de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/elements/label.html#tag-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