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. Echemos un vistazo a varios contenidos de alimentación.
Contenido de fuente de interfaz de usuario semántica:
- Etiqueta : la interfaz de usuario semántica nos permite agregar una etiqueta al feed, como una imagen, un icono, etc., utilizando laclase de etiqueta .
- Fecha : la interfaz de usuario semántica nos permite agregar una marca de tiempo al contenido del feed que indica su origen utilizando la clase de fecha .
- Información adicional : podemos agregar un montón de contenido adicional al feed, como un conjunto de imágenes, texto, etc. usando laclase adicional .
Sintaxis:
<div class="ui feed">
<div class="event">
<div class="label">
...
</div>
...
</div>
...
</div>
Ejemplo 1: en el siguiente ejemplo, hemos creado un feed con eventos de etiquetas .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Feed Content</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 Content</h4> <hr> <br /> <div class="ui 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="summary"> Mr. Sandeep at <a href="https://www.geeksforgeeks.org" target="blank"> GeeksforGeeks </a> liked your profile. </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="summary"> A Node.js article got published at <a href="https://www.geeksforgeeks.org" target="blank"> GeeksforGeeks </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="summary"> A Git article got published at <a href="https://www.geeksforgeeks.org" target="blank"> GeeksforGeeks </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:
Contenido de fuente de interfaz de usuario semántica
Ejemplo 2: en el siguiente ejemplo, hemos creado un evento con fechas utilizando la clase de fecha .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Feed Content</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 Content</h4> <hr> <br /> <div class="ui 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="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="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="meta"> <a class="like"> <i class="like icon"></i> 212 Likes </a> </div> </div> </div> </div> </div> </body> </html>
Producción:
Contenido de fuente de interfaz de usuario semántica
Ejemplo 3: En el siguiente ejemplo, hemos creado un feed con eventos informativos usando una clase adicional . Se muestran tanto texto adicional como imágenes adicionales .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Feed Content</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 Content</h4> <hr> <br /> <div class="ui 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:
Contenido de fuente de interfaz de usuario semántica
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