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= rel="stylesheet" /> <script src= integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script> </head> <body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</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= </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= </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:
Semantic-UI Comment States
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= rel="stylesheet" /> <script src= integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script> </head> <body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</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= </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= </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:
Semantic-UI Comment States
Reference: https://semantic-ui.com/views/comment.html
Please Login to comment...