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 =
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 =
</ 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 =
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 =
</ 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 =
</ 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 =
</ 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