La interfaz de usuario semántica es un marco que se utiliza para crear una excelente interfaz de usuario. Es un marco de código abierto que utiliza CSS y jQuery . 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.
En este artículo, aprenderemos a usar el tipo flotante de etiqueta del marco de interfaz de usuario semántica. Se utiliza una etiqueta de interfaz de usuario semántica para crear clasificaciones de contenido significativas. En la etiqueta Semantic UI, se ofrecen 9 tipos de etiquetas. Estos son Etiqueta, Imagen, Apuntar, Esquina, Etiqueta, Cinta, Adjunto, Horizontal y Flotante.
La etiqueta de tipo flotante se usa para agregar el pequeño detalle en la esquina superior de la etiqueta. La etiqueta flotante se coloca dentro del contenedor en relación con el contenedor.
Clase de tipo flotante de etiqueta de interfaz de usuario semántica:
- flotante: esta clase se utiliza para hacer la etiqueta de tipo flotante.
Sintaxis:
<div class="ui compact menu">
<a class="item">
text...
<div class="floating ui label">
text...
</div>
</a>
</div>
Nota: Para hacer que el texto flote al contenedor, tenemos que hacer un contenedor, estamos tomando el menú, es una clase predefinida para agregar elementos en él.
Ejemplo 1: en este ejemplo, agregaremos la etiqueta de tipo flotante del marco de la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Label Floating Type</title> <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> <title>GeeksforGeeks</title> </head> <body> <br /> <div class="ui compact menu"> <a class="item"> GeeksforGeeks <div class="floating ui label">site</div> </a> </div> </body> </html>
Para usar el tipo flotante de etiqueta, primero debemos crear un elemento y un contenedor para que la posición de la etiqueta flotante sea relativa.
Producción:
Tipo flotante de etiqueta de interfaz de usuario semántica
Ejemplo 2: en este ejemplo, agregaremos la etiqueta de tipo flotante del marco de la interfaz de usuario semántica con colores.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Label Floating Type</title> <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> <title>GeeksforGeeks</title> </head> <body> <br /> <div class="ui compact menu"> <a class="item"> GeeksforGeeks <div class="floating ui green label"> site </div> </a> <a class="item"> Geek <div class="floating ui red label"> Username </div> </a> </div> </body> </html>
Los colores también tienen sus nombres de clase, de modo que para usar el color verde tenemos que incluir el nombre del color, es decir, verde, dentro de la clase junto con la clase flotante.
Producción:
Tipo flotante de etiqueta de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/label.html#floating
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA