In this article, we are going to learn about comment replies from content. Semantic-UI is an open-source front-end development framework like bootstrap that is used to design a responsive website.
It is equipped with pre-built semantic components that help create responsive layouts using user-friendly HTML, and it uses predefined CSS and jQuery to incorporate different frameworks.
There are four types of content in the comment element, and these contents are listed below:
- Avatar content: The profile image that is present on the left side of the comment, and that small-size profile image is called an avatar.
- Metadata content: Whenever an individual makes any comment on a website then there is an arbitrary amount of metadata is defined. A comment can contain extra information about the comment.
- Actions: A comment can contain a list of some actions a user may perform related to the comment for example if a user wants to hide the comment then they can hide the comment if there was an option for that.
- Reply form: A comment can contain a form to reply to a comment, and this may have arbitrary content.
In simple words, whenever you made a comment on your Instagram profile then beneath your comment there is an option of replying to them again.
Syntax:
<div class="actions">
<a class="reply">reply</a>
</div>
Approach:
- Create an HTML file and import semantic-UI framework.
- After that, you just have to include a comment with the reply form.
- In the final step, you can apply some CSS properties to enhance your website interface.
Example1: The below example illustrates the Semantic-UI comment reply form content.
< !DOCTYPE html >
<html>
<head>
<link
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui header green">
GeeksforGeeks
</h1>
<strong>
Semantic UI - Comment Reply Form Content
</strong>
</center>
<div class="ui large comments">
<h3 class="ui dividing header">
Comments
</h3>
<div class="comment">
<a class="avatar">
<!-- If you need any profile picture -->
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220210074537/color3.png" />
</a>
<div class="content">
<a class="author">Avantika</a>
<div class="metadata">
<span class="date">
Today at 5:42PM
</span>
</div>
<div class="text">
How artistic!
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example2: The below example illustrates the Semantic-UI comment reply form content.
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui header green">
GeeksforGeeks
</h1>
<strong>
Semantic UI - Comment Reply Form Content
</strong>
</center>
<div class="ui large comments">
<h3 class="ui dividing header">
Comments
</h3>
<div class="ui comments">
<div class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220525220724/green1-300x171.jpg">
</a>
<div class="content">
<a class="author">Kishor</a>
<div class="metadata">
<span class="date">Today at 6:42PM</span>
</div>
<div class="text">
cool!
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220210074518/color11-300x169.png">
</a>
<div class="content">
<a class="author">raja</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>This page is awesome </p>
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
<div class="comments">
<div class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220210074140/color2-300x166.jfif">
</a>
<div class="content">
<a class="author">Krishna</a>
<div class="metadata">
<span class="date">Just now</span>
</div>
<div class="text">
Thank you raja and kishor.
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<form class="ui reply form">
<grammarly-extension data-grammarly-shadow-root="true"
style="position: absolute; top: 0px; left: 0px; pointer-events: none;"
class="cGcvT">
</grammarly-extension>
<grammarly-extension data-grammarly-shadow-root="true"
style="mix-blend-mode: darken; position: absolute;
top: 0px; left: 0px; pointer-events: none;"
class="cGcvT"></grammarly-extension>
<div class="field">
<textarea spellcheck="false"></textarea>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://semantic-ui.com/views/comment.html#reply-form