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. Semantic-UI Popup Basic Variation se usa para mostrar un cuadro emergente que puede proporcionar un formato más básico.
Valor de atributo de variación básica emergente de interfaz de usuario semántica:
- data-variation=”basic”: este atributo se utiliza para mostrar la información emergente básica.
Sintaxis:
<div class="ui icon button" data-content=""
data-variation="basic">
<i class="add icon"></i>
</div>
Ejemplo 1: En este ejemplo, describiremos la variación básica emergente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Popup Basic Variation
</title>
<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>
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Popup Basic Variation</h3>
<div class="ui icon button"
data-content="Welcome GeeksforGeeks"
data-variation="basic">
<i class="laptop icon"></i>
</div>
<div class="ui icon button"
data-content="Noida"
data-variation="basic">
<i class="map marker icon"></i>
</div>
</div>
<script>
$('.icon').popup()
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, describiremos la variación básica emergente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Popup Basic Variation
</title>
<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>
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Popup Basic Variation</h3>
<i class="circular big laptop icon"
data-content="Welcome GeeksforGeeks"
data-variation="basic">
</i>
<i class="circular large map icon button"
data-content="Noida" data-variation="basic">
</i>
</div>
<script>
$('.icon').popup()
</script>
</body>
</html>
Producción:
Variación básica emergente de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/popup.html#basic
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA