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. El tipo de bloque descartable se usa para ocultar el mensaje cuando el usuario lo desea. Para ocultar el mensaje, usaremos el método jQuery click() . En este artículo, discutiremos el tipo de bloque descartable de mensaje en la interfaz de usuario semántica.
Clases de tipo de bloque descartable de mensaje de interfaz de usuario semántica:
- mensaje: Esta clase se utiliza para crear el mensaje.
- icono de cierre: esta clase se utiliza para crear el icono de cierre para descartar el mensaje.
Sintaxis:
<div class="ui message">
<i class="close icon"></i>
<div class="header">
....
</div>
</div>
Ejemplo: El siguiente ejemplo demuestra el tipo de bloque descartable de mensaje de interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container center aligned">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h3>
Semantic-UI Message Dismissable Block Type
</h3>
<div class="ui message">
<i class="close icon"></i>
<div class="header">
GeeksforGeeks
</div>
<p>
A Computer Science portal for geeks.
</p>
</div>
</div>
<script>
$('.message .close').on('click', function() {
$(this).closest('.message').transition('slide');
});
</script>
</body>
</html>
Producción:
Tipo de bloque descartable de mensaje de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/message.html#dismissable-block
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA