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 . Este marco nos permite usar varios de sus estilos y propiedades para hacer que un sitio web sea más fácil de usar.
En este artículo, crearemos un tipo de etiqueta horizontal utilizando el marco de la 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.
El tipo horizontal de etiqueta de interfaz de usuario semántica se utiliza para formatear el contenido de la etiqueta a lo largo de su tamaño horizontalmente.
Clase de tipo horizontal de etiqueta de interfaz de usuario semántica:
- horizontal: Esta clase se utiliza para hacer la etiqueta en formato horizontal.
Sintaxis:
<a class="item">
<div class="ui horizontal label"> ... </div>
...
</a>
Ejemplo 1: El siguiente ejemplo ilustra el icono de tipo horizontal de la etiqueta de IU semántica utilizando la etiqueta y la clase horizontal .
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> <title>Semantic-UI Label Horizontal Type</title> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Label Horizontal Type</h3> <a class="item"> <div class="ui green horizontal label"> Site </div> GeeksforGeeks </a> </div> </body> </html>
Producción:
producción
Ejemplo 2: En este ejemplo, crearemos algunas etiquetas horizontales en forma de elementos de la lista usando Semantic-UI.
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> <title>Semantic-UI Label Horizontal Type</title> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Label Horizontal Type</h3> <div class="ui selection list"> <a class="item"> <div class="ui green horizontal label">Site</div> GeeksforGeeks </a> <a class="item"> <div class="ui yellow horizontal label">Topic</div> Semantic UI </a> <a class="item"> <div class="ui blue horizontal label">Label</div> Horizontal </a> </div> </div> </body> </html>
Producción:
producción
Referencia: https://semantic-ui.com/elements/label.html#horizontal
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA