Semantic UI ofrece muchos componentes para que los usuarios diseñen su interfaz. Uno de ellos es «Mensaje». Hay diferentes estados de mensajes. Puede usarlos según sus requisitos.
Los estados de mensajes de la interfaz de usuario semántica le permitirán ocultar o hacer que el mensaje sea visible para el usuario. Podemos crear una interfaz de usuario para mostrar los diferentes estados de los mensajes.
Clase de estados de mensaje de interfaz de usuario semántica:
- oculto : puede ocultar un mensaje de su interfaz de usuario. Es útil cuando necesita ocultar un mensaje con ciertas condiciones. Oculte algunos mensajes según sus requisitos.
- visible : puede configurar un mensaje como visible para forzar que se muestre según el requisito. Puede ser muy útil en escenarios en los que desea resaltar un aviso cada vez que se abre su sitio web o mostrar algún mensaje de forma permanente.
Sintaxis:
<div class="ui hidden message"> .... </div>
Ejemplo 1: El siguiente ejemplo demuestra la clase de mensaje oculto .
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> <div class="ui container"> <h2 style="color:green">GeeksforGeeks</h2> <b> <p>Semantic UI Message states</p> </b> <p>No messages shown.</p> <div class="ui hidden message"> <p>Please hide this message</p> </div> </div> </body> </html>
Producción:
Estados de mensajes de interfaz de usuario semántica
Ejemplo 2: El siguiente ejemplo demuestra la clase de mensaje visible .
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> <div class="ui container"> <h2 style="color:green">GeeksforGeeks</h2> <b> <p>Semantic UI Message states</p> </b> <p>Messages shown .</p> <div class="ui visible message"> <p>Please show this message . </p> </div> </div> </body> </html>
Producción:
Estados de mensajes de interfaz de usuario semántica
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