Semantic-UI Comment Variations Threaded Variant
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
Semantic UI has a bunch of components for users to design web pages. One of them is “Comment”. A comment is the user feedback to the website. There are different variations of comments. One of the variations is “threaded”
Semantic UI Comment Threaded Variation is a list of comments that can be threaded to show the relationship between different conversations or comments from users. For example, replying to a comment. In this article, we will implement comment threaded variation with code examples.
Semantic-UI Comment Variations Threaded Variant Class:
- threaded: This class is used to create a comment section to show the relationship between conversations.
Syntax:
<div class="ui threaded comments">
<div class="ui comment">
....
</div>
<div class="ui comment">
....
</div>
</div>
Below example illustrate the Semantic-UI Comment Variations Threaded Variant:
Example: The following example demonstrates the threaded comment variation with other relevant classes.
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= </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= </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= </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= </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= </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> |
Output :
Semantic-UI Comment Variations Threaded Variant
Reference Link: https://semantic-ui.com/views/comment.html#threaded
Please Login to comment...