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 de flujo de la ventana emergente de la interfaz de usuario semántica establece la ventana emergente sin un ancho máximo para que pueda fluir su ancho junto con el contenido.
Clases de variación de flujo emergente de interfaz de usuario semántica:
- flowing : Agregando esta variación, el contenido ocupa toda la pantalla.
Sintaxis : agregue la clase que fluye a la variación de datos de la siguiente manera:
<div class="ui flowing popup">
....
</div>
o
<i data-variation="flowing"></i>
Ejemplo: En el siguiente ejemplo, tenemos un ícono con la opción de flujo habilitada, donde la ventana emergente se extiende por toda la pantalla.
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 Flowing Variation
</strong>
</center>
<div class="ui segment">
<h1>Welcome to GeeksforGeeks</h1>
<p>Find the best programming tutorials here.</p>
<center>
<i class="circular huge globe icon link"
data-content="The computer science
portal for geeks. You will find
lots of tutorials here related
to studies, projects and exams."
data-variation="flowing"
data-position="bottom center"></i>
</center>
<br />
</div>
</div>
<script>
$('.icon').popup({})
</script>
</body>
</html>
Producción:
Enlace de referencia: https://semantic-ui.com/modules/popup.html#flowing
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA