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 interfaz de usuario semántica proporciona una variedad de etiquetas que pueden compartir colores juntas, esta clase permite al usuario agregar colores compartidos a un grupo de etiquetas. Para agregar un color a una etiqueta, debemos incluir el nombre del color dentro de la clase.
Clase de grupo de color de etiqueta de IU semántica:
- red: Esta clase se utiliza para establecer el color rojo en la etiqueta.
- naranja: esta clase se utiliza para establecer el color naranja en la etiqueta.
- amarillo: esta clase se utiliza para establecer el color amarillo en la etiqueta.
- oliva: Esta clase se utiliza para establecer el color oliva en la etiqueta.
- green: esta clase se utiliza para establecer el color verde en la etiqueta.
- verde azulado: esta clase se utiliza para establecer el color verde azulado en la etiqueta.
- azul: esta clase se utiliza para establecer el color azul en la etiqueta.
- violeta: Esta clase se utiliza para establecer el color violeta en la etiqueta.
- purple: esta clase se usa para establecer el color púrpura en la etiqueta.
- rosa: esta clase se utiliza para establecer el color rosa en la etiqueta.
- marrón: Esta clase se utiliza para establecer el color marrón de la etiqueta.
- gris: esta clase se utiliza para establecer el color gris en la etiqueta.
- black : esta clase se utiliza para establecer el color negro en la etiqueta.
Sintaxis:
<div class="ui Coloured-Group-Class labels"> <a class="ui label">...</a> <a class="ui label">...</a> ... ... </div>
Ejemplo 1: el siguiente código demuestra el uso de la clase de etiquetas con cualquier color.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic-UI Label Colored Group</title>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
/>
</head>
<style>
body
{
margin-left:10px;
margin-right:10px;
}
</style>
<body>
<br/>
<h1 class="ui header green">GeeksforGeeks</h1>
<strong>Semantic UI Label Colored Group</strong>
<br/><br/>
<div class="ui olive labels">
<a class="ui label">Label 1</a>
<br/>
<a class="ui label">Label 2</a>
</div>
</body>
</html>
Producción:
Grupo de colores de etiqueta 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 Colored Group</title>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
/>
</head>
<style>
body
{
margin-left:10px;
margin-right:10px;
}
</style>
<body>
<br/>
<h1 class="ui header green">GeeksforGeeks</h1>
<strong>Semantic UI Label Colored Group</strong>
<br/><br/>
<div class="ui green labels">
<a class="ui label">Group 1 Label 1</a>
<br/>
<a class="ui label">Group 1 Label 2</a>
</div>
<div class="ui yellow labels">
<a class="ui label">Group 2 Label 1</a>
<br/>
<a class="ui label">Group 2 Label 2</a>
</div>
</body>
</html>
Producción:
Grupo de colores de etiqueta de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/elements/label.html#colored-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