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. Aquí, en este artículo, aprenderemos sobre la variante de enlace de elemento de interfaz de usuario semántica.
La variante de enlace de elemento de interfaz de usuario semántica se utiliza para hacer que un elemento se pueda vincular. Para que el usuario pueda visitar el contenido principal que está vinculado a esos elementos completos.
Variaciones de elementos de IU semántica Clase de variante de enlace:
- link: esta clase se utiliza para hacer que el elemento se pueda vincular.
Sintaxis:
<div class="ui link items">
......
</div>
El siguiente ejemplo ilustra la variante del enlace de variaciones de elementos de la interfaz de usuario semántica:
Ejemplo 1: en este ejemplo, crearemos una lista de dos elementos, uno se podrá vincular y el otro no.
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 Link Variant </strong> </center> <br/><br/> <strong> Item Link Variant: </strong> <br/> <div class="ui link items"> <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> <br/> <strong> Item non Link Variant: </strong> <br/> <div class="ui items"> <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> </div> </body> </html>
Producción:
Variaciones de elementos de IU semántica Variante de enlace
Ejemplo 2: en este ejemplo, todos los elementos se podrán vincular.
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 Link Variant</strong> </center> <br/><br/> <strong> Item Link Variant: </strong> <br/> <div class="ui link items"> <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 IU semántica Variante de enlace
Referencia: https://semantic-ui.com/views/item.html#link-item
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA