Semantic-UI Comment Variations Minimal Variant
Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.
Semantic-UI Comment Minimal Variation shows a list of comments with CSS and buttons for a reply. The Minimal variation hides the extra content that is least required for a user until the user requires to interact with the comment.
Semantic-UI Comment Minimal Variation classes:
- minimal: On adding this class to the comments div container, the extra information hides from the page.
Syntax:
<div class="ui comments minimal"> ... </div>
Example: In the following example, we have added a button to enable or disable minimal of the comment.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link href= rel="stylesheet" /> <script src= </script> <script src= </script> </head> <body> <h1>GeeksforGeeks</h1> <strong> Semantic-UI Comment Minimal Variation </strong> <div class="ui mini comments" id="comments"> <h3 class="ui dividing header" id="commentsHeader"> Comments </h3> <div class="comment"> <div class="content"> <a class="author"> Manav </a> <div class="metadata"> <span class="date"> Today at 5:42PM </span> </div> <div class="text"> How artistic! <br /> The article is so well explained </div> <div class="actions"> <a class="reply"> Reply </a> </div> </div> </div> <div class="comment"> <div class="content"> <a class="author"> Raju </a> <div class="metadata"> <span class="date"> Yesterday at 12:30AM </span> </div> <div class="text"> <p> Well researched article! </p> </div> <div class="actions"> <a class="reply"> Reply </a> </div> </div> </div> </div> <button class="ui button mini" id="minimalButton" onclick="minimalComment()"> Enable/Disable Minimal </button> <script> function minimalComment() { $(".comments").toggleClass("minimal"); } </script> </body> </html> |
Output:
Semantic-UI Comment Variations Minimal Variant
Reference: https://react.semantic-ui.com/views/comment/#variations-minimal
Please Login to comment...