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 >
< 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 >
< 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 >
< 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 >
< 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
Last Updated :
03 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...