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 tamaño de ventana emergente de IU semántica se puede utilizar para mostrar ventanas emergentes en diferentes tamaños. Podemos tener variaciones emergentes que van desde mini a enorme .
Clases de variación de tamaño de ventana emergente de interfaz de usuario semántica:
- mini : esta clase hace que la ventana emergente sea de tamaño mini.
- tiny : esta clase hace que la ventana emergente sea de tamaño minúsculo.
- small : esta clase hace que la ventana emergente sea de un tamaño pequeño.
- large : esta clase hace que la ventana emergente sea de gran tamaño.
- enorme : esta clase hace que la ventana emergente sea de gran tamaño.
Sintaxis : agregue el tamaño deseado de las clases anteriores y agregue a la ventana emergente de la siguiente manera:
<i class="circular globe icon link" data-content="" data-variation="mini" ></i>
Ejemplo : en el siguiente ejemplo, tenemos diferentes tamaños de ventanas emergentes para diferentes íconos.
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>
<style>
.icon {
margin: 8px !important;
}
</style>
</head>
<body>
<div class="ui container">
<center>
<div class="ui header green">
<h1>
GeeksforGeeks
</h1>
</div>
<strong>
Semantic UI Popup Size Variation
</strong>
</center>
<div class="ui segment">
<h1>Welcome to GeeksforGeeks</h1>
<p>Find the best programming tutorials here.</p>
<center>
<i class="circular 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="mini">
Mini
</i>
<i class="circular 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="tiny">
Tiny
</i>
<i class="circular 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="small">
Small
</i>
<i class="circular 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="large">
Large
</i>
<i class="circular 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="huge">
Huge
</i>
</center>
<br />
</div>
</div>
<script>
$('.icon').popup()
</script>
</body>
</html>
Producción:
Variación del tamaño de la ventana emergente de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/popup.html#size
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA