La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para páginas web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos. Hace que las páginas web se vean increíbles y receptivas.
La ventana emergente de interfaz de usuario semántica se utiliza para mostrar información adicional a través de ventanas emergentes para el usuario. Alerta y proporciona al usuario la información necesaria. Las ventanas emergentes pueden ayudar a ahorrar espacio y solo muestran información cuando el usuario interactúa con la página web.
La variación fluida de la ventana emergente de la interfaz de usuario semántica permite que la ventana emergente tome toda el área del contenedor desplazado. Los datos en sí se adaptan al espacio disponible y el espacio en consecuencia.
Clases de variación de fluido emergente de interfaz de usuario semántica:
- fluido : esta clase se usa para agregar el elemento emergente y ocupará el ancho de su contenedor.
Sintaxis: agregue la clase de fluido a la ventana emergente de la siguiente manera:
<div class="ui fluid popup">
...
</div>
Ejemplo: En el siguiente ejemplo, tenemos un elemento emergente con algunos datos que encajarán dentro de la ventana emergente fluida .
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<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">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<style>
.icon {
margin: 16px;
}
</style>
</head>
<body>
<div class="ui container">
<center>
<div class="ui header green">
<h1>
GeeksforGeeks
</h1>
</div>
<strong>Semantic UI Popup Fluid Variation</strong>
</center>
<div class="ui segment">
<h1>Welcome to GeeksforGeeks</h1>
<p>Find the best programming tutorials here.</p>
<center>
<div class="ui button">Show fluid popup</div>
<div class="ui fluid popup">
<div class="ui four column divided
center aligned grid">
<div class="column">Data Structure</div>
<div class="column">Algorithms</div>
<div class="column">Web Development</div>
</div>
</div>
</center>
</div>
</div>
<script>
$('.button').popup({})
</script>
</body>
</html>
Producción:
Enlace de referencia: https://semantic-ui.com/modules/popup.html#fluid
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA