La interfaz de usuario semántica ofrece un componente de mensaje para que los usuarios lo muestren. Hay diferentes variaciones de mensajes. Crearemos una interfaz de usuario que muestre las diferentes variaciones de los mensajes. Después de crear esta plantilla básica, puede trabajar con diferentes componentes de la interfaz de usuario semántica.
Clase de variaciones de mensajes de IU semántica:
- compacto : cuando un usuario desea que el tamaño del mensaje ocupe el mismo ancho que su contenido.
- flotante : cuando el usuario quiere hacer flotar un mensaje sobre algún contenido de la interfaz de usuario.
- adjunto : cuando el usuario desea adjuntar el mensaje a otro contenido.
- advertencia : Cuando el usuario quiere mostrar mensajes de advertencia.
- info : cuando el usuario desea formatear un mensaje para mostrar información.
- positivo : cuando el usuario desea formatear un mensaje para mostrar información positiva o exitosa.
- negativo : cuando el usuario desea formatear un mensaje para mostrar información negativa o de error.
- coloreado : cuando el usuario desea formatear un mensaje con diferentes colores.
- tamaño : cuando el usuario desea formatear un mensaje con diferentes tamaños.
Sintaxis:
<div class="ui compact message"> .... </div>
Ejemplo 1: El siguiente ejemplo muestra mensajes usando clases compactas , flotantes y de mensajes .
HTML
<!DOCTYPE html> <html> <head> <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 compact message"> <p>Compact Message in UI.</p> </div> <div class="ui floating message"> <p>Floating message !!</p> </div> <div class="ui message"> <p>Non floating message ( Basic Message )</p> </div> </body> </html>
Producción:
Ejemplo 2: el siguiente ejemplo muestra los mensajes que usan las clases adjunto , advertencia , información y mensaje .
HTML
<!DOCTYPE html> <html> <head> <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 attached message"> <div class="header"> Welcome to Geeks for Geeks! </div> <p>Fill out your email to get started .</p> </div> <div class="ui form attached fluid segment"> <input placeholder="Email" type="text"> </div> <div class="ui warning message"> <p>Warning for the user !! </p> </div> <div class="ui info message"> <p>Display information for the user. </p> </div> </body> </html>
Producción:
Ejemplo 3: el siguiente ejemplo muestra mensajes que usan clases de mensaje positivo , negativo y .
HTML
<!DOCTYPE html> <html> <head> <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 positive message"> <p>Congrats , your request has been approved. </p> </div> <div class="ui negative message"> <p>Sorry , your request has not been approved. </p> </div> </body> </html>
Producción:
Ejemplo 4: el siguiente ejemplo muestra los mensajes que utilizan las clases red , orange , yellow , olive , green y message .
HTML
<!DOCTYPE html> <html> <head> <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 red message">Red</div> <div class="ui orange message">Orange</div> <div class="ui yellow message">Yellow</div> <div class="ui olive message">Olive</div> <div class="ui green message">Green</div> </body> </html>
Producción:
Ejemplo 5: el siguiente ejemplo muestra los mensajes que utilizan las clases mini , tiny , small , large , mass y message .
HTML
<!DOCTYPE html> <html> <head> <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 mini message"> Mini Message !! </div> <div class="ui tiny message"> Tiny Message !! </div> <div class="ui small message"> Small Message !! </div> <div class="ui large message"> Large Message !! </div> <div class="ui massive message"> Massive Message !! </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/collections/message.html
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA