Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. En este artículo, vamos a aprender sobre el contenido de acciones de comentarios.
Está equipado con componentes semánticos preconstruidos que ayudan a crear diseños receptivos utilizando HTML fácil de usar.
Un comentario puede contener una lista de acciones que un usuario puede realizar en relación con este comentario en una aplicación.
Clase de contenido de acciones de comentario de interfaz de usuario semántica:
- acciones: esta clase se utiliza para proporcionar alguna acción en el comentario.
Sintaxis:
<div class="actions">...</div>
Ejemplo 1: El siguiente ejemplo ilustra el contenido de las acciones de comentario de la interfaz de usuario semántica con la clase de respuesta , guardar , ocultar y un icono .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
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=
"https://media.geeksforgeeks.org/wp-content/uploads/20220216122335/g-200x200.png">
</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>
Producción:
Contenido de acciones de comentarios de interfaz de usuario semántica
Ejemplo 2: el siguiente código demuestra el uso de la clase de acciones con un icono y una clase de respuesta .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <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> <h2>Semantic UI Comment Action</h2> </center> <div class="ui comments"> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220216122335/g-200x200.png"> </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>
Producción:
Contenido de acciones de comentarios de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/views/comment.html#actions
Publicación traducida automáticamente
Artículo escrito por volumezero9786 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA