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.
El elemento de interfaz de usuario semántica nos ofrece tipos de elementos, contenido de elementos y variaciones de elementos. Los elementos son los componentes que se han utilizado para crear páginas web más interactivas. La vista de elementos de la interfaz de usuario semántica presenta grandes colecciones de contenido del sitio para su visualización.
Elemento de interfaz de usuario semántica:
- Tipo de elemento de interfaz de usuario semántica : solo hay un tipo de elemento que es el elemento en sí mismo, para crear varios elementos, debemos agregar la clase de elementos en el elemento principal.
- Contenido del elemento de la interfaz de usuario semántica : hay 8 tipos de contenido que se pueden usar como un elemento en la interfaz de usuario semántica, como imagen, contenido, encabezado, metadatos, enlace, descripción, contenido adicional y calificación. Para cada tipo de contenido tenemos diferentes artículos.
- Variaciones de elementos de la interfaz de usuario semántica : hay 6 tipos de variaciones que se pueden usar como un elemento en la interfaz de usuario semántica, como apilamiento, dividido, relajado, elemento de enlace, alineación vertical, contenido flotante.
Clase de elemento de interfaz de usuario semántica:
- item: esta clase es imprescindible para trabajar con el elemento en Semantic-UI Item.
Sintaxis:
<div class="ui item-variations-class item-type-class">
<div class="item">
<div class=" item-content-class">
....
</div>
</div>
</div>
Los siguientes ejemplos ilustran el elemento de interfaz de usuario semántica:
Ejemplo 1: en este ejemplo, crearemos un elemento simple que contendrá contenido de imagen, encabezado y descripción.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <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</strong> </center> <br><br> <div class="ui 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">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> </body> </html>
Producción:
Elemento de interfaz de usuario semántica
Ejemplo 2: En este ejemplo, crearemos tres secciones de elementos que contienen diferentes contenidos.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <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</strong> </center> <br><br> <div class="ui divided items container"> <div class="item"> <div class="ui tiny image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png"> </div> <div class="middle aligned content"> 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 class="item"> <div class="ui tiny image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png"> </div> <div class="middle aligned content"> 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 class="item"> <div class="ui tiny image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png"> </div> <div class="middle aligned content"> 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> </body> </html>
Producción:
Elemento de interfaz de usuario semántica
Ejemplo 3: En este ejemplo, usaremos una variante de elemento que es contenido flotante.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <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</strong> </center> <br><br> <div class="ui divided items container"> <div class="item"> <div class="ui tiny image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png"> </div> <div class="middle aligned content"> 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 class="extra"> <div class="ui right floated button"> Explore </div> </div> </div> </div> </body> </html>
Producción:
Elemento de interfaz de usuario semántica
Referencia: https://semantic-ui.com/views/item.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA