En este artículo, vamos a aprender acerca de las respuestas a los comentarios del contenido. Semantic-UI es un marco de desarrollo front-end de código abierto como bootstrap que se utiliza para diseñar un sitio web receptivo.
Está equipado con componentes semánticos preconstruidos que ayudan a crear diseños receptivos utilizando HTML fácil de usar, y utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
Hay cuatro tipos de contenido en el elemento de comentario, y estos contenidos se enumeran a continuación:
- Contenido del avatar: la imagen de perfil que está presente en el lado izquierdo del comentario, y esa imagen de perfil de tamaño pequeño se llama avatar.
- Contenido de metadatos: cada vez que una persona hace un comentario en un sitio web, se define una cantidad arbitraria de metadatos. Un comentario puede contener información adicional sobre el comentario.
- Acciones: un comentario puede contener una lista de algunas acciones que un usuario puede realizar en relación con el comentario, por ejemplo, si un usuario desea ocultar el comentario, puede ocultar el comentario si hubiera una opción para eso.
- Formulario de respuesta: un comentario puede contener un formulario para responder a un comentario, y este puede tener un contenido arbitrario.
En palabras simples, cada vez que hizo un comentario en su perfil de Instagram, debajo de su comentario hay una opción para responderlo nuevamente.
Sintaxis:
<div class="actions">
<a class="reply">reply</a>
</div>
Acercarse:
- Cree un archivo HTML e importe el marco de la interfaz de usuario semántica.
- Después de eso, solo tienes que incluir un comentario con el formulario de respuesta.
- En el paso final, puede aplicar algunas propiedades CSS para mejorar la interfaz de su sitio web.
Ejemplo 1: El siguiente ejemplo ilustra el contenido del formulario de respuesta de comentarios de Semantic-UI.
HTML
< !DOCTYPE html > <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <strong> Semantic UI - Comment Reply Form Content </strong> </center> <div class="ui large comments"> <h3 class="ui dividing header"> Comments </h3> <div class="comment"> <a class="avatar"> <!-- If you need any profile picture --> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220210074537/color3.png" /> </a> <div class="content"> <a class="author">Avantika</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> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo ilustra el contenido del formulario de respuesta de comentarios de Semantic-UI.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <strong> Semantic UI - Comment Reply Form Content </strong> </center> <div class="ui large comments"> <h3 class="ui dividing header"> Comments </h3> <div class="ui comments"> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220525220724/green1-300x171.jpg"> </a> <div class="content"> <a class="author">Kishor</a> <div class="metadata"> <span class="date">Today at 6:42PM</span> </div> <div class="text"> cool! </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220210074518/color11-300x169.png"> </a> <div class="content"> <a class="author">raja</a> <div class="metadata"> <span class="date">Yesterday at 12:30AM</span> </div> <div class="text"> <p>This page is awesome </p> </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> <div class="comments"> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220210074140/color2-300x166.jfif"> </a> <div class="content"> <a class="author">Krishna</a> <div class="metadata"> <span class="date">Just now</span> </div> <div class="text"> Thank you raja and kishor. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> </div> </div> <div class="comment"> <form class="ui reply form"> <grammarly-extension data-grammarly-shadow-root="true" style="position: absolute; top: 0px; left: 0px; pointer-events: none;" class="cGcvT"> </grammarly-extension> <grammarly-extension data-grammarly-shadow-root="true" style="mix-blend-mode: darken; position: absolute; top: 0px; left: 0px; pointer-events: none;" class="cGcvT"></grammarly-extension> <div class="field"> <textarea spellcheck="false"></textarea> </div> <div class="ui blue labeled submit icon button"> <i class="icon edit"></i> Add Reply </div> </form> </div> </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/views/comment.html#reply-form
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA