Semantic UI es el marco de código abierto que utilizó CSS y jQuery para hacer que nuestros sitios web se vean hermosos y receptivos. Tiene clases predefinidas como bootstrap para usar para hacer que nuestro sitio web sea más interactivo. Tiene algunos componentes semánticos preconstruidos y podemos usar estos componentes para crear un sitio web receptivo.
Semantic-UI Popup se utiliza para mostrar información adicional al usuario. En este artículo, discutiremos las variaciones emergentes en la interfaz de usuario semántica.
Variaciones emergentes de la interfaz de usuario semántica:
- Básico : esta variación se utiliza para crear una ventana emergente básica.
- Ancho : esta variación se usa para establecer el ancho de la ventana emergente.
- Fluido : esta variación toma todo el ancho del contenedor compensado.
- Tamaño : esta variación se utiliza para establecer el tamaño de la ventana emergente.
- Fluido : esta variación no tiene un ancho máximo.
- Invertida : Esta variación tiene su color invertido.
Clases de variaciones emergentes de interfaz de usuario semántica:
- básico: esta clase se utiliza para crear una ventana emergente básica.
- ancho: esta clase se usa para crear una ventana emergente ancha.
- very wide: esta clase se utiliza para crear una ventana emergente muy amplia.
- fluido: esta clase se utiliza para crear una ventana emergente de ancho completo.
- mini: esta clase se utiliza para crear una ventana emergente de tamaño mini.
- tiny: esta clase se utiliza para crear una ventana emergente de tamaño minúsculo.
- pequeño: esta clase se utiliza para crear ventanas emergentes de tamaño pequeño.
- grande: esta clase se utiliza para crear ventanas emergentes de gran tamaño.
- que fluye: esta clase se utiliza para crear una ventana emergente que fluye.
- invertido: esta clase se utiliza para crear una ventana emergente de color invertido.
Sintaxis:
<div class="ui icon button"
data-content=""
data-variation="Popup-Variations-Class">
<i class="add icon"></i>
</div>
Ejemplo 1: el siguiente código demuestra las variaciones básicas, de ancho y fluidas de la ventana emergente de interfaz de usuario semántica .
HTML
<!DOCTYPE html>
<html>
<head>
<title> Semantic-UI Popup Variations </title>
<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>
</head>
<body>
<div class="ui container center aligned">
<h2 class="ui green header"> GeeksforGeeks </h2>
<h3> Semantic-UI Popup Variations </h3>
<strong>
Basic:
</strong> <br>
<div class="ui icon button"
data-content="GeeksforGeeks"
data-variation="basic">
<i class="cloud download icon"></i>
</div> <br> <br>
<strong>
Width:
</strong> <br>
<i class="circular play icon link"
data-content=
"A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science"
data-variation="wide">
</i>
<i class="circular play icon link"
data-content=
"A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science"
data-variation="very wide">
</i> <br> <br>
<strong>
Fluid:
</strong> <br>
<div class="ui button">
Fluid Popup
</div>
<div class="ui fluid popup">
<div class="ui three column divided
center aligned grid">
<div class="column">GFG 1</div>
<div class="column">GFG 2</div>
<div class="column">GFG 3</div>
</div>
</div>
<script>
$('.icon').popup({});
$('.button').popup({});
</script>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código muestra las variaciones de tamaño de ventana emergente, fluidez e inversión de la interfaz de usuario semántica
HTML
<!DOCTYPE html>
<html>
<head>
<title> Semantic-UI Popup Variations </title>
<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>
</head>
<body>
<div class="ui container center aligned">
<h2 class="ui green header"> GeeksforGeeks </h2>
<h3> Semantic-UI Popup Variations </h3>
<strong>
Size:
</strong> <br>
<i class="circular play icon link"
data-content="GeeksforGeeks Mini"
data-variation="mini">
</i>
<i class="circular play icon link"
data-content="GeeksforGeeks Tiny"
data-variation="tiny">
</i>
<i class="circular play icon link"
data-content="GeeksforGeeks Small"
data-variation="small">
</i>
<i class="circular play icon link"
data-content="GeeksforGeeks Large"
data-variation="large">
</i> <br> <br>
<strong>
Flowing:
</strong> <br>
<i class="circular add icon link"
data-content=
"It contains well written, well thought
and well explained computer science and
programming articles"
data-variation="flowing"
data-position="top center">
</i> <br><br>
<strong>
Inverted:
</strong> <br>
<i class="circular add icon link"
data-content= "GeeksforGeeks"
data-variation="inverted"
data-position="top center">
</i>
</div>
<script>
$('.icon').popup({});
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/modules/popup.html
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA