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. En este artículo, discutiremos la variación del ancho de ventana emergente en la interfaz de usuario semántica.
La variación de ancho de ventana emergente de interfaz de usuario semántica se utiliza para establecer el ancho del contenedor para mostrar la información. Podemos establecer el ancho del contenedor usando el atributo de variación de datos . La ventana emergente se utiliza para mostrar información adicional al usuario.
Clases de variación de ancho de ventana emergente de interfaz de usuario semántica:
- ancho: Se utiliza para crear un contenedor ancho para mostrar la información.
- very wide: Se utiliza para crear un contenedor de tamaño muy ancho para mostrar la información.
Sintaxis:
<i class="add icon"
data-content="Content"
data-variation="Class">
</i>
Ejemplo 1: el siguiente código demuestra la variación del ancho de la ventana emergente de la interfaz de usuario semántica mediante una clase amplia .
HTML
<!DOCTYPE html>
<html>
<head>
<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>
<h2 class="ui header green">
GeeksforGeeks
</h2>
<h3>
Semantic-UI Popup Width Variation
</h3>
<br>
<i class="circular desktop icon"
data-content="A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles"
data-variation="wide">
</i>
<script>
$('.icon').popup({});
</script>
</body>
</html>
Producción:
Variación de ancho de ventana emergente de interfaz de usuario semántica
Ejemplo 2: el siguiente código demuestra la variación del ancho de la ventana emergente de la interfaz de usuario semántica utilizando una clase muy amplia .
HTML
<!DOCTYPE html>
<html>
<head>
<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>
<h2 class="ui header green">
GeeksforGeeks
</h2>
<h3>
Semantic-UI Popup Width Variation
</h3>
<br>
<i class="circular add icon"
data-content="A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles"
data-variation="very wide">
</i>
<script>
$('.icon').popup({});
</script>
</body>
</html>
Producción:
Variación de ancho de ventana emergente de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/popup.html#width
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