Semantic UI es un marco de front-end construido con menos y jQuery . Se utiliza para crear interfaces web receptivas y atractivas. En este artículo, veremos el tipo de HTML emergente de IU semántica .
Se utiliza un módulo emergente de interfaz de usuario semántica para mostrar información adicional sobre un elemento. Una ventana emergente de tipo HTML puede especificar el código HTML que se utilizará como contenido de la ventana emergente. El contenido HTML se puede especificar como el valor del atributo data-html del módulo emergente.
Atributos de tipo HTML emergente de interfaz de usuario semántica:
- data-html: este atributo contiene las cosas en el código HTML que desea mostrar al pasar el mouse sobre un elemento como una ventana emergente
Sintaxis:
<div class="ui card" data-html="HTML-Code-Here">
...
</div>
Ejemplo 1: El siguiente ejemplo muestra cómo agregar un módulo de calificación como contenido HTML de la ventana emergente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Popup HTML Type</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>
<style>
.ui.container {
text-align: center;
}
h3#subheading {
margin-top: 0px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green">GeeksforGeeks</h1>
<h3 id="subheading">
Semantic UI - Popup HTML Type
</h3>
</div>
<div class="ui button"
data-html="<div class='ui star rating'>
<i class='active icon'></i>
<i class='active icon'></i>
<i class='active icon'></i>
<i class='active icon'></i>
<i class='active icon'></i>
</div>" data-position="bottom center">
Hover to see rating.
</div>
</div>
<script>
$(".ui.button").popup();
</script>
</body>
</html>
Producción:
Tipo de HTML emergente de interfaz de usuario semántica
Ejemplo 2: El siguiente ejemplo es el uso de una imagen como contenido emergente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Popup HTML Type</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>
<style>
.ui.container {
text-align: center;
}
h3#subheading {
margin-top: 0px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green">GeeksforGeeks</h1>
<h3 id="subheading">
Semantic UI - Popup HTML Type
</h3>
</div>
<div class="ui button"
data-position="bottom center"
data-html='<img height="50"
width="50"
src="https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo-300x300.png">'>
Hover to see the image as popup.
</div>
</div>
<script>
$(".ui.button").popup();
</script>
</body>
</html>
Producción:
Tipo de HTML emergente de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/popup.html#html