Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. 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. Utiliza una clase para agregar CSS a los elementos.
Los elementos de alimentación se utilizan para documentar la actividad del sitio web/del usuario de manera secuencial. El feed contiene varios eventos realizados por varios usuarios. La interfaz de usuario semántica nos proporciona un feed con estilo de interfaz de usuario semántica. Echemos un vistazo a varias clases de variaciones de alimentación, antes de conocer las variaciones de alimentación.
Clases de variación de fuente de interfaz de usuario semántica:
- feed: Crea un contenedor, donde se llevan a cabo varios eventos cronológicos.
- event: Contiene la información del evento, es parte del feed.
- contenido: crea un contenedor para el contenido del evento.
- resumen: crea un contenedor para información breve sobre el evento.
- etiqueta: crea una etiqueta para el evento, que puede contener iconos, imágenes, etc.
- fecha: contiene información sobre la fecha del evento.
- meta: contiene metainformación sobre el evento, como me gusta, no me gusta, etc.
- pequeño: crea un pequeño feed.
- grande: crea un feed grande.
Sintaxis:
<div class="ui size-class feed">
<div class="event">
...
</div>
...
</div>
Ejemplo 1: En el siguiente ejemplo, hemos creado un pequeño feed.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Feed Variations</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Feed Variations</h4> <hr /> <br /> <div class="ui small feed"> <div class="event"> <div class="label"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg" /> </div> <div class="content"> <div class="date"> 15 minutes ago </div> <div class="summary"> Mr. Sandeep at <a href="https://www.geeksforgeeks.org" target="blank"> GeeksforGeeks </a> liked your profile. </div> <div class="extra text"> Hey there, I really liked your profile. Ping me if you are up for a conversation. </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 39 Likes </a> </div> </div> </div> <div class="event"> <div class="label"> <i class="pencil icon"></i> </div> <div class="content"> <div class="date"> 45 minutes ago </div> <div class="summary"> A Node.js article got published at <a href="https://www.geeksforgeeks.org" target="blank"> GeeksforGeeks </a> . </div> <div class="extra images"> <a> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190531152042/node1.png" /> </a> </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 124 Likes </a> </div> </div> </div> <div class="event"> <div class="label"> <i class="pencil alternate icon"></i> </div> <div class="content"> <div class="date"> 3 hours ago </div> <div class="summary"> A Git article got published at <a href="https://www.geeksforgeeks.org" target="blank"> GeeksforGeeks </a> . </div> <div class="extra images"> <a> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200529213529/Git-vs-GitHub.png" /> </a> </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 212 Likes </a> </div> </div> </div> </div> </div> </body> </html>
Producción:
Pienso de tamaño pequeño
Ejemplo 2: En el siguiente ejemplo, hemos creado un feed de gran tamaño.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Feed Variations</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Feed Variations</h4> <hr /> <br /> <div class="ui large feed"> <div class="event"> <div class="label"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg" /> </div> <div class="content"> <div class="date"> 15 minutes ago </div> <div class="summary"> Mr. Sandeep at <a href="https://www.geeksforgeeks.org" target="blank"> GeeksforGeeks </a> liked your profile. </div> <div class="extra text"> Hey there, I really liked your profile. Ping me if you are up for a conversation. </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 39 Likes </a> </div> </div> </div> <div class="event"> <div class="label"> <i class="pencil icon"></i> </div> <div class="content"> <div class="date"> 45 minutes ago </div> <div class="summary"> A Node.js article got published at <a href="https://www.geeksforgeeks.org" target="blank"> GeeksforGeeks </a> . </div> <div class="extra images"> <a> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190531152042/node1.png" /> </a> </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 124 Likes </a> </div> </div> </div> <div class="event"> <div class="label"> <i class="pencil alternate icon"></i> </div> <div class="content"> <div class="date"> 3 hours ago </div> <div class="summary"> A Git article got published at <a href="https://www.geeksforgeeks.org" target="blank"> GeeksforGeeks </a> . </div> <div class="extra images"> <a> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200529213529/Git-vs-GitHub.png" /> </a> </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 212 Likes </a> </div> </div> </div> </div> </div> </body> </html>
Producción:
Pienso de gran tamaño
Referencia: https://semantic-ui.com/views/feed.html
Publicación traducida automáticamente
Artículo escrito por tejsidda34 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA