La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
Un elemento de interfaz de usuario semántica se utiliza para mostrar grandes cantidades de contenido en una página. La variación del elemento de la interfaz de usuario semántica nos ofrece 6 tipos de variaciones que se pueden usar con este elemento para cambiar el tipo de visualización de este elemento.
Variaciones de elementos de la interfaz de usuario semántica:
- Apilamiento : Esto se usa para crear una tabla donde los elementos se apilan de manera receptiva.
- Dividido : Esto se utiliza para que los elementos se puedan dividir de tal manera que el contenido agrupado sea fácil de distinguir.
- Relajado : Esto se usa para crear un grupo de artículos que tienen un relleno relajado para más espacio entre los artículos.
- Enlazar elemento : se utiliza para que el contenido del elemento se vincule a otra página.
- Alineación vertical : se utiliza para especificar la alineación vertical del elemento.
- Contenido flotante : Esto se usa para hacer que los elementos floten hacia la izquierda o hacia la derecha.
Nota: La variante Relajada no se puede usar con Dividido o Apilado ya que estos 3 son opuestos entre sí.
Sintaxis:
<div class="ui item-variations-class item-type-class">
<div class="item">
...
</div>
</div>
Los siguientes ejemplos ilustran las variaciones de elementos de la interfaz de usuario semántica:
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <strong>Semantic-UI Item Variations</strong> </center> <br><br> <strong>Divided, Floating and Link Item Variant:</strong> <br> <div class="ui divided items container"> <div class="item"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png"> </div> <div class="content"> <a class="header" href="https://www.geeksforgeeks.org/"> Geeksforgeeks </a> <div class="meta"> <span>A Computer Science Portal for Geeks</span> </div> <div class="extra"> This is where GeeksforGeeks comes into picture - A computer science portal for geeks, by geeks. ...GeeksforGeeks.org was created with a goal in mind to provide well written, well thought and well explained solutions for selected questions. </div> </div> </div> <div class="item"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220211141617/Screenshot20220211141558-200x189.png"> </div> <div class="content"> <a class="header">Sandeep Jain</a> <div class="meta"> <span>Founder of Geeksforgeeks</span> </div> <div class="extra"> <p> Expert Advice series, we’re constantly trying to provide you with several enriching advice and mentorship every month to resolve all your career-related concerns and make your journey smoother. </p> <div class="ui right floated green button"> Connect </div> </div> </div> </div> </div> </body> </html>
Producción:
Variaciones de elementos de la interfaz de usuario semántica
Ejemplo 2: En este ejemplo, el segundo elemento está alineado en la parte inferior.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <strong>Semantic-UI Item Variations</strong> </center> <br><br> <strong>Stacking, Vertical Alignment Item Variant:</strong> <br> <div class="ui unstackable items container"> <div class="item"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220211141617/Screenshot20220211141558-200x189.png"> </div> <div class="content"> <a class="header">Sandeep Jain</a> <div class="meta"> <span>Founder of Geeksforgeeks</span> </div> <div class="extra"> <p> Expert Advice series, we’re constantly trying to provide you with several enriching advice and mentorship every month to resolve all your career-related concerns and make your journey smoother. </p> <div class="ui right floated green button"> Connect </div> </div> </div> </div> <div class="item"> <div class="ui small image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png"> </div> <div class="bottom aligned content"> <div class="header"> Geeksforgeeks </div> </div> </div> </div> </body> </html>
Producción:
Variaciones de elementos de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/views/item.html#variations
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA