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. La mejor parte de este marco es que crea diseños hermosos y receptivos, ya que contiene componentes semánticos preconstruidos.
Un mensaje es un componente importante de nuestro sitio web que muestra algún tipo de información al usuario. Ahora, este mensaje puede tener diferentes tipos, es decir, el mensaje se puede mostrar en diferentes tipos y uno de esos tipos es el tipo de lista de mensajes .
Clase de tipo de lista de mensajes de IU semántica:
- mensaje: Es una clase que muestra un mensaje.
- lista: Se utiliza para crear una lista. La clase de mensaje puede ser su clase principal para mostrar un mensaje en forma de lista.
Sintaxis:
<div class="ui message">
<ul class="list">
<li>...</li>
...
</ul>
</div>
Ejemplo 1: En el siguiente programa, crearemos una lista de mensajes.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Message List Type</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <br> <div class="ui green huge header"> GeeksforGeeks </div> <div class="ui large header"> Message List Type </div> <div class="ui message"> <div class="header"> Cricket Facts </div> <ul class="list"> <!--List Message--> <li>Highest Runs Scorer Is Sachin</li> <li>Highest Wicket Taker Is Muralitharan</li> <li>Fastest Runs Getter Is Russell</li> </ul> </div> </body> </html>
Producción:
Ejemplo 2: En el siguiente ejemplo, crearemos un mensaje normal y una lista de mensajes para ver la diferencia entre ellos.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Message List Type</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <br> <div class="ui green huge header"> GeeksforGeeks </div> <br> <div class="ui large header"> Basic Message </div> <div class="ui message"> <div class="header"> Football Facts </div> <p> Mo Salah is the King Of Football. Messi is known as the God Of Football. Liverpool F.C. is the most successful English Club. </p> </div> <div class="ui large header">Message List</div> <div class="ui message"> <div class="header"> Football Facts </div> <ul class="list"> <!--List Message--> <li>Mo Salah is the King Of Football</li> <li>Messi is known as the God Of Football</li> <li> Liverpool F.C. is the most successful English Club </li> </ul> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/collections/message.html
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA