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. Utiliza una clase para agregar CSS a los elementos.
Los comentarios son una excelente manera de mostrar los comentarios de los usuarios e interactuar sobre el contenido con otros usuarios. La interfaz de usuario semántica nos proporciona un elemento de comentario con estilo de interfaz de usuario semántica. Echemos un vistazo a varias variaciones de comentarios junto con ejemplos.
Variaciones de comentarios de la interfaz de usuario semántica:
- Threaded : la interfaz de usuario semántica nos permite conectar múltiples comentarios, ilustrando así la relación entre ellos.
- Mínimo : a menos que el usuario coloque el cursor sobre un comentario, la interfaz de usuario semántica oculta información adicional de la vista del usuario.
- Tamaño : la interfaz de usuario semántica nos permite cambiar el tamaño de los comentarios utilizando varias clases.
Sintaxis:
<div class="ui Thread-Variation
Minimal-Variation Size-Variation comments">
<div class="comment">
...
</div>
</div>
Nota: Utilice la sintaxis anterior según la necesidad mediante una combinación de las clases mencionadas anteriormente. Consulte los ejemplos a continuación para una mejor comprensión de las clases.
Ejemplo 1: En el siguiente ejemplo, hemos creado una variación de comentario de subprocesamiento .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Comment Variations</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Comment Variations</h4> <hr><br/> <div class="ui threaded comments"> <h2 class="ui dividing header">Comments</h2> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Mr. Anonymous</a> <div class="text"> I am watching you. I know all about you. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> <div class="ui comments"> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Praneeth</a> <div class="text"> Lol. You know nothing about me. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Srinivas</a> <div class="text"> Yeah so true, you know nothing about us. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Mr. Anonymous</a> <div class="text"> Keep Dreaming. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> </div> </div> </body> </html>
Producción:
Comentario semántico de la interfaz de usuario enhebrado Variaciones
Ejemplo 2: En el siguiente ejemplo, hemos creado una variación de comentario mínima .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Comment Variations</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Comment Variations</h4> <hr><br/> <div class="ui threaded minimal comments"> <h2 class="ui dividing header">Comments</h2> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Mr. Anonymous</a> <div class="text"> I am watching you. I know all about you. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> <div class="ui comments"> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Praneeth</a> <div class="text"> Lol. You know nothing about me. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Srinivas</a> <div class="text"> Yeah so true, you know nothing about us. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Mr. Anonymous</a> <div class="text"> Keep Dreaming. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> </div> </div> </body> </html>
Producción:
Variaciones mínimas de comentario de interfaz de usuario semántica
Ejemplo 3: En el siguiente ejemplo, hemos ilustrado la variación del comentario de tamaño .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Comment Variations</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> <script src= "https://code.jquery.com/jquery-3.1.1.min.js" integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Comment Variations</h4> <hr><br/> <div class="ui mini comments"> <h2 class="ui dividing header">Mini Comments</h2> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Mr. Anonymous</a> <div class="text"> I am watching you. I know all about you. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Praneeth</a> <div class="text"> Lol. You know nothing about me. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> </div> <div class="ui tiny comments"> <h2 class="ui dividing header">Tiny Comments</h2> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Mr. Anonymous</a> <div class="text"> I am watching you. I know all about you. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Praneeth</a> <div class="text"> Lol. You know nothing about me. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> </div> <div class="ui small comments"> <h2 class="ui dividing header">Small Comments</h2> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Mr. Anonymous</a> <div class="text"> I am watching you. I know all about you. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Praneeth</a> <div class="text"> Lol. You know nothing about me. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> </div> <div class="ui comments"> <h2 class="ui dividing header">Standard Comments</h2> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Mr. Anonymous</a> <div class="text"> I am watching you. I know all about you. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Praneeth</a> <div class="text"> Lol. You know nothing about me. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> </div> <div class="ui large comments"> <h2 class="ui dividing header">Large Comments</h2> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Mr. Anonymous</a> <div class="text"> I am watching you. I know all about you. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Praneeth</a> <div class="text"> Lol. You know nothing about me. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> </div> <div class="ui big comments"> <h2 class="ui dividing header">Big Comments</h2> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Mr. Anonymous</a> <div class="text"> I am watching you. I know all about you. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Praneeth</a> <div class="text"> Lol. You know nothing about me. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> </div> <div class="ui massive comments"> <h2 class="ui dividing header">Massive Comments</h2> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Mr. Anonymous</a> <div class="text"> I am watching you. I know all about you. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src= "https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg"> </a> <div class="content"> <a class="author">Praneeth</a> <div class="text"> Lol. You know nothing about me. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> </div> </div> </body> </html>
Producción:
Variaciones de tamaño de comentario de interfaz de usuario semántica
Referencias: https://semantic-ui.com/views/comment.html
Publicación traducida automáticamente
Artículo escrito por coder_srinivas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA