Semantic-UI es un marco de código abierto que tiene algunas clases predefinidas para hacer que nuestro sitio web se vea hermoso y receptivo. Es similar a bootstrap ya que tiene clases predefinidas para su uso. Usó CSS y jQuery para construir la interfaz. Tiene algunos tipos diferentes de elementos que nos ayudan a crear un hermoso sitio web. El mensaje de interfaz de usuario semántica se utiliza para mostrar información importante. La variación negativa/de error se utiliza para mostrar el mensaje negativo y de error. Usamos una clase negativa para mostrar un mensaje negativo y una clase de error para mostrar un mensaje de error. En este artículo, discutiremos la variación del mensaje negativo/error en la interfaz de usuario semántica.
Clases de variación de error/negativo de mensaje de interfaz de usuario semántica:
- negativo: esta clase se utiliza para mostrar el mensaje negativo.
- error: esta clase se utiliza para mostrar el mensaje de error.
Sintaxis:
<div class="ui Negative/Error-Variation-Classes message"> ..... </div>
Ejemplo 1: el siguiente código muestra la variación negativa/de error del mensaje de interfaz de usuario semántica para mostrar un mensaje negativo .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Message Negative / Error Variation</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3> Semantic-UI Message Negative / Error Variation </h3> </div> <div class="ui negative message"> <div class="header"> Sorry, you can't apply for this job. </div> <p> This job has expired </p> </div> </body> </html>
Producción:
Mensaje de interfaz de usuario semántica negativa/variación de error
Ejemplo 2: el siguiente código demuestra la variación negativa/de error del mensaje de interfaz de usuario semántica para mostrar un mensaje de error .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Message Negative / Error Variation</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3> Semantic-UI Message Negative / Error Variation </h3> </div> <div class="ui error message"> <div class="header"> There are some errors that occurred. </div> <ul class="list"> <li> You must enter your first name </li> <li> You must enter your mobile number </li> <li> You must enter your email id </li> </ul> </div> </body> </html>
Producción:
Mensaje de interfaz de usuario semántica negativa/variación de error
Referencia: https://semantic-ui.com/collections/message.html#negative–error
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA