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 tipos de feeds, antes de aprender sobre los tipos de feeds.
Clases de tipo de fuente de interfaz de usuario semántica:
- Feed: Esto se utiliza para crear un contenedor, donde se llevan a cabo varios eventos cronológicos.
Sintaxis:
<div class="ui feed">
<div class="event">
...
</div>
...
</div>
Ejemplo 1: en el siguiente ejemplo, hemos creado un feed estándar .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Feed Types</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 Types</h4> <hr> <br/> <div class="ui feed"> <div class="event"> <div class="label"> <i class="pencil alternate icon"></i> </div> <div class="content"> <div class="date"> 5 minutes ago </div> <div class="summary"> A CSS 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> 21 Likes </a> </div> </div> </div> <div class="event"> <div class="label"> <i class="pencil alternate icon"></i> </div> <div class="content"> <div class="date"> 15 minutes ago </div> <div class="summary"> A React 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> 54 Likes </a> </div> </div> </div> <div class="event"> <div class="label"> <i class="pencil alternate icon"></i> </div> <div class="content"> <div class="date"> 2 hours ago </div> <div class="summary"> A Database 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> 312 Likes </a> </div> </div> </div> </div> </div> </body> </html>
Producción:
Tipos de fuentes de interfaz de usuario semántica
Ejemplo 2: en el siguiente ejemplo, hemos creado un feed estándar con eventos de contenido de imagen .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Feed Types</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 Types</h4> <hr> <br /> <div class="ui feed"> <div class="event"> <div class="label"> <i class="pencil alternate icon"></i> </div> <div class="content"> <div class="date"> 5 minutes ago </div> <div class="summary"> Two web development articles 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/20210310114057/web-development-image.png"> </a> <a> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png"> </a> </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 21 Likes </a> </div> </div> </div> <div class="event"> <div class="label"> <i class="pencil alternate icon"></i> </div> <div class="content"> <div class="date"> 15 minutes ago </div> <div class="summary"> A React 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/20210322182303/ReactJS-Tutorial.png"> </a> </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 54 Likes </a> </div> </div> </div> <div class="event"> <div class="label"> <i class="pencil alternate icon"></i> </div> <div class="content"> <div class="date"> 2 hours ago </div> <div class="summary"> A Database 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/uploads/20200827091919/DBMS.png"> </a> </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 312 Likes </a> </div> </div> </div> </div> </div> </body> </html>
Producción:
Tipos de fuentes de interfaz de usuario semántica
Referencias: 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