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 al usuario. Ahora, estas etiquetas se pueden crear de varias maneras y pueden tener diferentes apariencias. Un tamaño de grupo de etiquetas es un grupo de etiquetas que pueden tener los mismos tamaños juntas.
Clases de tamaño de grupo de etiquetas de IU semántica :
- mini: esta clase se utiliza para mostrar el grupo de etiquetas de tamaño mini.
- tiny: esta clase se utiliza para mostrar el grupo de etiquetas de tamaño minúsculo.
- pequeño: esta clase se utiliza para mostrar el grupo de etiquetas de tamaño pequeño.
- grande: esta clase se utiliza para mostrar el grupo de etiquetas de gran tamaño.
- big: esta clase se utiliza para mostrar el grupo de etiquetas de gran tamaño.
- enorme: esta clase se utiliza para mostrar el grupo de etiquetas de gran tamaño.
- masivo: esta clase se utiliza para mostrar el grupo de etiquetas de tamaño masivo.
Sintaxis:
<div class="ui group_size labels">
Los siguientes ejemplos demostrarán las clases de tamaño de grupo de etiquetas en la interfaz de usuario semántica.
Ejemplo 1: este ejemplo muestra el grupo de etiquetas usando el tamaño grande .
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> </head> <body> <br> <div class="ui green huge header"> GeeksforGeeks </div> <div class="ui large header"> Label Group Size </div> <br> <div class="ui big labels"> <!--Label Group Size--> <div class="ui blue label"> GFG </div> <div class="ui blue label"> Geek </div> <div class="ui blue label"> GeeksforGeeks </div> <div class="ui blue label"> GeeksForLife </div> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo muestra el grupo de etiquetas utilizando todos los tamaños disponibles.
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> </head> <body> <br> <div class="ui green huge header"> GeeksforGeeks </div> <div class="ui large header"> Label Group Size </div> <br> <div class="ui mini labels"> <!--Label Group Size Mini--> <div class="ui red label"> Mini </div> <div class="ui red label"> Mini </div> <div class="ui red label"> Mini </div> </div> <br> <div class="ui tiny labels"> <!--Label Group Size Tiny--> <div class="ui purple label"> Tiny </div> <div class="ui purple label"> Tiny </div> <div class="ui purple label"> Tiny </div> </div> <br> <div class="ui small labels"> <!--Label Group Size Small--> <div class="ui black label"> Small </div> <div class="ui black label"> Small </div> <div class="ui black label"> Small </div> </div> <br> <div class="ui large labels"> <!--Label Group Size Large--> <div class="ui yellow label"> Large </div> <div class="ui yellow label"> Large </div> <div class="ui yellow label"> Large </div> </div> <br> <div class="ui big labels"> <!--Label Group Size Big--> <div class="ui orange label"> Big </div> <div class="ui orange label"> Big </div> <div class="ui orange label"> Big </div> </div> <br> <div class="ui huge labels"> <!--Label Group Size Huge--> <div class="ui blue label"> Huge </div> <div class="ui blue label"> Huge </div> <div class="ui blue label"> Huge </div> </div> <br> <div class="ui massive labels"> <!--Label Group Size Massive--> <div class="ui green label"> Massive </div> <div class="ui green label"> Massive </div> <div class="ui green label"> Massive </div> </div> </body> </html>
Producción:
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