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.
<!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>
Reference Link: https://semantic-ui.com/views/comment.html#threaded