Semantic-UI Comment Variations Minimal Variant
Last Updated :
12 Feb, 2022
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...