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, ya que muestra información de contenido al usuario. Ahora, estas etiquetas se pueden crear de varias maneras y pueden tener diferentes apariencias, como una etiqueta de color, una etiqueta en forma de etiqueta, una etiqueta circular, etc. Esto se puede lograr con la ayuda de grupos de etiquetas.
Grupos de etiquetas de IU semántica: hay cuatro tipos de grupos de etiquetas en la IU semántica.
- Tamaño del grupo : varias etiquetas pueden tener los mismos tamaños juntas.
- Grupo de colores : varias etiquetas pueden tener los mismos colores juntas.
- Grupo de etiquetas : varias etiquetas pueden contener un formato de etiqueta.
- Grupo circular : varias etiquetas pueden tener una forma circular.
Sintaxis:
<div class="ui Label-groups labels">
<a class="ui label">
....
</a>
....
</div>
Nota: La sintaxis para los otros grupos de etiquetas es la misma y la única diferencia es el nombre del grupo de etiquetas que debe reemplazarse en consecuencia. En el caso de grupo de colores y tamaño de grupo, tenemos que escribir el nombre del color o especificar el tamaño respectivamente en lugar del nombre del grupo de etiquetas.
Ejemplo 1: En el siguiente programa, utilizaremos los grupos de etiquetas de tamaño de grupo y grupo de colores. El desarrollador puede usar diferentes tamaños como mini, diminuto, enorme, masivo y diferentes colores según las necesidades de la aplicación.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic-UI Label Groups</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>
<div class="ui green huge header">GeeksforGeeks</div>
<div class="ui large header">Semantic UI Label Groups</div>
<div class="ui large header">Group Size</div>
<div class="ui huge labels"> <!--Group Size-->
<div class="ui label">
Sachin
</div>
<div class="ui label">
Sehwag
</div>
<div class="ui label">
Gambhir
</div>
<div class="ui label">
Dhoni
</div>
</div>
<div class="ui large header">Colored Groups</div>
<div class="ui red labels"> <!--Colored Group-->
<div class="ui label">
Mo Salah
</div>
<div class="ui label">
Sadio Mane
</div>
<div class="ui label">
Gerrard
</div>
<div class="ui label">
Allison
</div>
</div>
</body>
</html>
Producción:
Grupos de etiquetas de interfaz de usuario semántica
Ejemplo 2: En el siguiente programa, usaremos el grupo de etiquetas y los grupos de etiquetas de grupo circular.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic-UI Label Groups</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>
<div class="ui green huge header">GeeksforGeeks</div>
<div class="ui large header">Semantic UI Label Groups</div>
<div class="ui large header">Tag Group</div>
<div class="ui tag labels"> <!--Tag Group -->
<div class="ui label">
Rs. 5
</div>
<div class="ui label">
Rs. 500
</div>
<div class="ui label">
Rs. 10000
</div>
<div class="ui label">
Rs. 50000
</div>
</div>
<div class="ui large header">Circular Group</div>
<!--Circular Group-->
<div class="ui circular labels">
<div class="ui label">
Superman
</div>
<div class="ui label">
Batman
</div>
<div class="ui label">
Iron Man
</div>
<div class="ui label">
Hulk
</div>
</div>
</body>
</html>
Producción:
Grupos de etiquetas de interfaz de usuario semántica
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