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 su uso y tiene diferentes elementos para hacer que su sitio web se vea más sorprendente. 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 al usuario. Ahora, estas etiquetas se pueden crear de varias maneras y pueden tener diferentes apariencias. Esto se puede lograr con la ayuda de Label Variations.
Variaciones de etiquetas de la IU semántica: Hay cuatro tipos de variaciones de etiquetas en la IU semántica.
- Circular : esta clase se utiliza para configurar la etiqueta en forma circular.
- Básico : esta clase se usa para establecer la etiqueta en una forma básica.
- Coloreado : esta clase se utiliza para establecer diferentes colores.
- Tamaño : esta clase se utiliza para establecer etiquetas con varios tamaños.
Sintaxis:
<div class="ui Label-Variations label"> .... </div>
Nota: La sintaxis para las otras variaciones de etiquetas es la misma y la única diferencia es el nombre de la variación de etiquetas que debe reemplazarse en consecuencia. En el caso de variación de etiqueta de color, tenemos que escribir el nombre del color en lugar del nombre de la variación de etiqueta.
Ejemplo 1: En el siguiente programa, usaremos las variaciones de etiquetas circulares y básicas .
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">
<style>
body{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<div class="ui green huge header">
GeeksforGeeks
</div>
<div class="ui medium header">
Semantic UI Label variations
</div>
<div class="ui small header"> Circular labels</div>
<!--Circular Label-->
<div class="ui blue circular label">
1
</div>
<div class="ui blue circular label">
2
</div>
<div class="ui blue circular label">
3
</div>
<div class="ui blue circular label">
4
</div>
<div class="ui small header">Basic labels</div>
<!--Basic Label-->
<div class="ui basic label">
GFG
</div>
<div class="ui basic label">
Geeks
</div>
<div class="ui basic label">
GeeksforGeeks
</div>
<div class="ui basic label">
Geek1
</div>
</body>
</html>
Producción:
Variaciones de etiquetas de interfaz de usuario semántica
Ejemplo 2: En el siguiente programa, usaremos las variaciones de etiquetas de colores y tamaños.
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">
<style>
body{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<br>
<div class="ui green huge header">
GeeksforGeeks
</div>
<div class="ui medium header">
Semantic UI Label Variations
</div>
<div class="ui small header">Colored label</div>
<!-- Colored Label-->
<div class="ui blue label">
Blue
</div>
<div class="ui yellow label">
Yellow
</div>
<div class="ui green label">
Green
</div>
<div class="ui red label">
Red
</div>
<div class="ui small header">Size label</div>
<!--Size Label-->
<div class="ui large label">
Large Size
</div>
<div class="ui medium label">
Medium Size
</div>
<div class="ui small label">
Small Size
</div>
<div class="ui huge label">
Huge Size
</div>
</body>
</html>
Producción:
Variaciones 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