Semantic-UI Comment States
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. It uses a class to add CSS to the elements.
Comments are an excellent way to display user feedback and interact about the content with other users. Semantic UI provides us with a Semantic UI styled comment element. Let’s have a look at various comment states.
Semantic UI Comment States:
- Collapsed: Semantic UI allows us to hide the comments from the user’s view by using the collapsed state. Comments can be viewed at the will of the user.
Syntax:
<div class="ui collapsed comments"> <div class="comment"> ... </div> ... </div>
Note: Use the above syntax according to the need by using a combination of Semantic UI classes. Refer to the examples below for a better understanding of the classes.
Example 1: In the below example, we have created standard comments which can be collapsed at will.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic UI Comment States</ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < script src = "https://code.jquery.com/jquery-3.1.1.min.js" integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ script > </ head > < body > < div class = "ui container" > < h2 class = "ui green header" >w3wiki</ h2 > < h4 >Semantic UI Comment States</ h4 > < hr > < br /> < button class = "ui button" onclick = "toggleComments()" > Toggle Comments </ button > < div class = "ui collapsed comments" > < h2 class = "ui dividing header" >Comments</ h2 > < div class = "comment" > < a class = "avatar" > < img src = "https://media.w3wiki.net/img-practice/user_web-1598433228.svg" > </ a > < div class = "content" > < a class = "author" >Mr. Anonymous</ a > < div class = "text" > I am watching you. I know all about you. </ div > < div class = "actions" > < a class = "reply" >Reply</ a > </ div > </ div > </ div > < div class = "comment" > < a class = "avatar" > < img src = "https://media.w3wiki.net/img-practice/user_web-1598433228.svg" > </ a > < div class = "content" > < a class = "author" >Praneeth</ a > < div class = "text" > Lol. You know nothing about me. </ div > < div class = "actions" > < a class = "reply" >Reply</ a > </ div > </ div > </ div > </ div > </ div > < script > const toggleComments = () => { const comments = document.querySelector(".comments"); comments.classList.toggle("collapsed"); } </ script > </ body > </ html > |
Output:
Example 2: In the below example, we have created standard comments with a reply form which can be collapsed at will.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic UI Comment States</ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < script src = "https://code.jquery.com/jquery-3.1.1.min.js" integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ script > </ head > < body > < div class = "ui container" > < h2 class = "ui green header" >w3wiki</ h2 > < h4 >Semantic UI Comment States</ h4 > < hr > < br /> < button class = "ui button" onclick = "toggleComments()" > Toggle Comments </ button > < div class = "ui collapsed comments" > < h2 class = "ui dividing header" >Comments</ h2 > < div class = "comment" > < a class = "avatar" > < img src = "https://media.w3wiki.net/img-practice/user_web-1598433228.svg" > </ a > < div class = "content" > < a class = "author" >Mr. Anonymous</ a > < div class = "text" > I am watching you. I know all about you. </ div > < div class = "actions" > < a class = "reply" >Reply</ a > </ div > </ div > </ div > < div class = "comment" > < a class = "avatar" > < img src = "https://media.w3wiki.net/img-practice/user_web-1598433228.svg" > </ a > < div class = "content" > < a class = "author" >Praneeth</ a > < div class = "text" > Lol. You know nothing about me. </ div > < form class = "ui reply form" > < div class = "field" > < textarea ></ textarea > </ div > < div class = "ui primary submit labeled icon button" > < i class = "icon edit" ></ i > Add Reply </ div > </ form > </ div > </ div > </ div > </ div > < script > const toggleComments = () => { const comments = document.querySelector(".comments"); comments.classList.toggle("collapsed"); } </ script > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/views/comment.html