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 invertida de ventana emergente de interfaz de usuario semántica se utiliza para mostrar la ventana emergente en color invertido. La variación invertida invierte el color y el color de fondo del elemento.
Valor de atributo de variación invertida emergente de interfaz de usuario semántica:
- data-variation=”inverted”: este valor de atributo se utiliza para crear un elemento emergente invertido.
Sintaxis:
<div class="ui icon button" data-tooltip=""
data-position="top left" data-variation="inverted">
<i class="icon-name icon"></i>
</div>
Ejemplo 1: en este ejemplo, describiremos la variación invertida emergente de la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Popup Inverted 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 Inverted Variation</h3>
<div class="ui icon button"
data-content="Welcome GeeksforGeeks"
data-variation="inverted">
<i class="laptop icon"></i>
</div>
<div class="ui icon button"
data-content="5th Floor, A-118, Sector-136,
Noida, Uttar Pradesh - 201305"
data-variation="inverted">
<i class="map marker icon"></i>
</div>
</div>
<script>
$('.icon').popup()
</script>
</body>
</html>
Producción:
Variación invertida emergente de interfaz de usuario semántica
Ejemplo 2: en este ejemplo, describiremos la variación invertida emergente de la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Popup Inverted 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 Inverted Variation</h3>
<i class="circular big laptop icon"
data-content="Welcome GeeksforGeeks"
data-variation="inverted">
</i>
<i class="circular large map icon button"
data-content="5th Floor, A-118, Sector-136,
Noida, Uttar Pradesh - 201305"
data-variation="inverted">
</i>
</div>
<script>
$('.icon').popup()
</script>
</body>
</html>
Producción:
Variación invertida emergente de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/popup.html#inverted
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA