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 Minimal Variation muestra una lista de comentarios con CSS y botones para una respuesta. La variación Mínima oculta el contenido adicional que menos se requiere para un usuario hasta que el usuario requiera interactuar con el comentario.
Clases de variación mínima de comentario de interfaz de usuario semántica :
- minimal : al agregar esta clase al contenedor div de comentarios, la información adicional se oculta de la página.
Sintaxis :
<div class="ui comments minimal"> ... </div>
Ejemplo: en el siguiente ejemplo, hemos agregado un botón para habilitar o deshabilitar el mínimo del comentario.
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 Minimal Variation
</strong>
<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!
<br />
The article is so well explained
</div>
<div class="actions">
<a class="reply">
Reply
</a>
</div>
</div>
</div>
<div class="comment">
<div class="content">
<a class="author">
Raju
</a>
<div class="metadata">
<span class="date">
Yesterday at 12:30AM
</span>
</div>
<div class="text">
<p>
Well researched article!
</p>
</div>
<div class="actions">
<a class="reply">
Reply
</a>
</div>
</div>
</div>
</div>
<button class="ui button mini"
id="minimalButton"
onclick="minimalComment()">
Enable/Disable Minimal
</button>
<script>
function minimalComment() {
$(".comments").toggleClass("minimal");
}
</script>
</body>
</html>
Producción:
Variaciones de comentarios de interfaz de usuario semántica Variante mínima
Referencia: https://react.semantic-ui.com/views/comment/#variations-minimal
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA