Semantic-UI Comment Reply Form Content
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.
HTML
< !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" > w3wiki </ 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.w3wiki.net/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.
HTML
<!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" > w3wiki </ 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.w3wiki.net/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.w3wiki.net/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.w3wiki.net/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
Contact Us