El marco de código abierto de la interfaz de usuario semántica brinda íconos o glifos que se usan para mostrar imágenes relacionadas con algunos elementos usando CSS y jQuery para excelentes interfaces de usuario. Es un marco de desarrollo utilizado para crear diseños hermosos y receptivos.
Semantic-UI Feed se utiliza para mostrar actualizaciones en orden cronológico. El feed de un usuario o las actualizaciones de sus redes sociales o blog se presentan de forma secuencial estándar. Los contenidos, fechas, como botones y enlaces, se pueden colocar incluyendo imágenes en el feed.
Semantic-UI Feed Date Content muestra la fecha en el contenido de la fuente. La fecha debe colocarse con el estilo y la alineación adecuados para ver claramente la actualización.
Clases de contenido de fecha de fuente de interfaz de usuario semántica :
- fecha: Esta clase se utiliza para definir o mencionar la fecha.
Sintaxis :
<div class="content">
<div class="date"> ... </div>
...
</div>
El siguiente ejemplo ilustra la fecha del contenido de la fuente de la interfaz de usuario semántica:
Ejemplo : en el siguiente ejemplo, tenemos tres eventos con fechas en el contenido dentro del feed.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet"/>
<style>
div {
margin-left: 15px;
}
</style>
</head>
<body>
<center>
<h1>
GeeksforGeeks
</h1>
<strong>
Semantic-UI Feed Content Date
</strong>
</center>
<div class="ui feed">
<div class="content">
<div class="date">
3 days ago
</div>
<div class="summary">
Your post was liked
</div>
</div>
</div>
<div class="event">
<div class="content">
<div class="summary">
Wow! amazing
<div class="date">
2 Days Ago
</div>
</div>
<div class="meta">
<a class="like">
<i class="like icon">
</i>
8 Likes
</a>
</div>
</div>
</div>
<div class="event">
<div class="content">
<div class="summary">
GeeksforGeeks posted a new post
<div class="date">
7 Days Ago
</div>
</div>
<div class="meta">
<a class="like">
<i class="like icon">
</i>
5 Likes
</a>
</div>
</div>
</div>
</body>
</html>
Producción:
Fecha del contenido de la fuente de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/views/feed.html#date
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA