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 que se usan para crear excelentes interfaces de usuario. Es un marco de desarrollo utilizado para crear diseños hermosos y receptivos.
Semantic-UI Comment Collapsed State muestra una lista de comentarios con CSS y botones para una respuesta. El estado contraído se utiliza para mostrar u ocultar los comentarios de la pantalla.
Clases de estado colapsadas de comentario de interfaz de usuario semántica :
- colapsado : al agregar esta clase al contenedor div, el contenedor se oculta de la vista o página web.
Sintaxis :
<div class="ui comments collapsed"> ... </div>
Ejemplo : en el siguiente ejemplo, hemos agregado un botón para mostrar u ocultar el comentario de la pantalla.
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" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<strong>
Semantic-UI Comment Collapsed State
</strong>
<button class="ui button red mini"
onclick="collapseComment()">
Hide/Show Comments
</button>
<div class="ui mini comments" id="comments">
<h3 class="ui dividing header"
id="commentsHeader">
Comments
</h3>
<div class="comment">
<div class="content">
<a class="author">
Manav
</a>
<div class="metadata">
<span class="date">
Today at 5:42PM
</span>
</div>
<div class="text">
How artistic!
</div>
<div class="actions">
<a class="reply">
Reply
</a>
</div>
</div>
</div>
<div class="comment">
<div class="content">
<a class="author">
Elliot Fu
</a>
<div class="metadata">
<span class="date">
Yesterday at 12:30AM
</span>
</div>
<div class="text">
<p>
This has been very useful for
my research. Thanks as well!
</p>
</div>
<div class="actions">
<a class="reply">
Reply
</a>
</div>
</div>
</div>
</div>
<script>
function collapseComment() {
$(".comments").toggleClass("collapsed");
}
</script>
</body>
</html>
Producción:
Comentario de IU semántica Estado colapsado
Referencia: https://semantic-ui.com/views/comment.html#collapsed
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA