Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. In this article, we are going to learn about comment actions content.
It is equipped with pre-built semantic components that help create responsive layouts using user-friendly HTML.
A comment can contain a list of actions a user may perform related to this comment in an application.
Semantic UI Comment Actions Content Class:
- actions: This class is used to provide some action on the comment.
Syntax:
<div class="actions">...</div>
Example 1:The below example illustrates the Semantic UI comment actions content with the reply, save, hide, and an icon class.
<!DOCTYPE html> <html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<style>
body
{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<center>
<h1 class="ui header green">GeeksforGeeks</h1>
<strong>Semantic UI Comment Action</strong>
</center>
<div class="ui comments">
<div class="comment">
<a class="avatar">
<img src=
</a>
<div class="content">
<a class="author">Priya</a>
<div class="text">
GeeksforGeeks is the best site to learn DSA.
</div>
<div class="actions">
<a class="reply">Reply</a>
<a class="save">Save</a>
<a class="hide">Hide</a>
<a> <i class="expand icon"></i> Full-screen
</a>
</div>
</div>
</div>
</div>
<form class="ui reply form">
<div class="field">
<textarea></textarea>
</div>
<div class="ui primary submit labeled icon button">
<i class="icon edit"></i> Add Comment
</div>
</form>
</body>
</html>
|
Output:
Semantic-UI Comment Actions Content
Example 2: The following code demonstrates the use of the actions class with an icon and reply class.
<!DOCTYPE html> <html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui header green">GeeksforGeeks</h1>
<h2>Semantic UI Comment Action</h2>
</center>
<div class="ui comments">
<div class="comment">
<a class="avatar">
<img src=
</a>
<div class="content">
<a class="author">Author</a>
<div class="text">
GeeksforGeeks is the best site to learn DSA.
</div>
<div class="actions">
<a class="reply">Reply</a>
<a>
<i class="expand icon"></i>
Full-screen
</a>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Comment Actions Content
Reference link: https://semantic-ui.com/views/comment.html#actions