Variaciones de comentarios de interfaz de usuario semántica Variante con hilos

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.

La interfaz de usuario semántica tiene un montón de componentes para que los usuarios diseñen páginas web. Uno de ellos es «Comentario». Un comentario es la retroalimentación del usuario al sitio web. Hay diferentes variaciones de comentarios. Una de las variaciones es «roscada»

La variación enstringda de comentarios de la interfaz de usuario semántica es una lista de comentarios que se pueden enstringr para mostrar la relación entre diferentes conversaciones o comentarios de los usuarios. Por ejemplo, responder a un comentario. En este artículo, implementaremos una variación de subprocesos de comentarios con ejemplos de código.

Variaciones de comentario de interfaz de usuario semántica Clase de variante enhebrada:

threaded: esta clase se usa para crear una sección de comentarios para mostrar la relación entre las conversaciones.

Sintaxis:

<div class="ui threaded comments">
     <div class="ui comment">
        ....
     </div>
     <div class="ui comment">
       ....
     </div>
</div>

El siguiente ejemplo ilustra la variante de subprocesos de variaciones de comentarios de interfaz de usuario semántica:

Ejemplo: El siguiente ejemplo demuestra la variación de comentarios enstringdos con otras clases relevantes.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
  
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>
  
<body>
    <center>
        <h1 class="ui green">Geeksforgeeks</h1>
        <strong>Semantic UI Comment threaded</strong>
    </center>
  
    <div class="ui threaded comments">
        <h3 class="ui dividing header"></h3>
  
        <!-- first user's comment -->
        <div class="comment">
            <a class="avatar">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220201153721/Screenshot13-300x226.png">
            </a>
            <div class="content">
                <a class="author">John</a>
                <div class="metadata">
                    <span class="date">
                      Yesterday at 9:10PM
                    </span>
                </div>
                <div class="text">
                    <p>This platform is outstanding.</p>
                </div>
                <div class="actions">
                    <a class="reply">Reply</a>
                </div>
            </div>
        </div>
  
        <!-- second user's comment -->
        <div class="comment">
            <a class="avatar">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220201153713/Screenshot11-300x235.png">
            </a>
            <div class="content">
                <a class="author">Peter</a>
                <div class="metadata">
                    <span class="date">
                      Today at 12:30AM
                    </span>
                </div>
                <div class="text">
                    <p>This platform helped me learn DSA.</p>
                </div>
                <div class="actions">
                    <a class="reply">Reply</a>
                </div>
            </div>
  
            <!-- Comment Threaded Variation -->
            <!-- Reply to second user's comment -->
            <div class="comments">
                <div class="comment">
                    <a class="avatar">
                        <img src=
 "https://media.geeksforgeeks.org/wp-content/uploads/20220129092238/images.png">
                    </a>
                    <div class="content">
                        <a class="author">
                          Geeks for Geeks
                        </a>
                        <div class="metadata">
                            <span class="date">Just now</span>
                        </div>
                        <div class="text">
                            Thanks Peter xD
                        </div>
                        <div class="actions">
                            <a class="reply">Reply</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
  
        <!-- Third user's comment -->
        <div class="comment">
            <a class="avatar">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220201154607/Screenshot15-300x207.png">
            </a>
            <div class="content">
                <a class="author">Joe</a>
                <div class="metadata">
                    <span class="date">5 days ago</span>
                </div>
                <div class="text">
                    Dude, this is fantastic. Thanks so much 🙂
                </div>
                <div class="actions">
                    <a class="reply">Reply</a>
                </div>
            </div>
        </div>
  
        <form class="ui reply form">
            <div class="field">
                <textarea></textarea>
            </div>
            <button class="ui primary button">
            Reply
          </button>
        </form>
    </div>
</body>
  
</html>

Producción :

Variaciones de comentarios de interfaz de usuario semántica Variante con hilos

Enlace de referencia: https://semantic-ui.com/views/comment.html#threaded

Publicación traducida automáticamente

Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta