Blaze UI es un kit de herramientas de interfaz de usuario ligero de código abierto de CSS que proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos.
Blaze UI Sticky se usa para anclar contenido u ofertas útiles en la página web y se adhiere a la ventana gráfica incluso si el usuario se desplaza hacia abajo en la página web. El contenido fijo se usa para mantener algún contenido útil o banner en la pantalla.
Atributos fijos de la interfaz de usuario de Blaze:
- top : Este campo toma el valor del espacio entre la parte superior de la pantalla y la parte superior del elemento.
Sintaxis :
<blaze-sticky top="50">
...
</blaze-sticky>
Ejemplo 1: En el siguiente ejemplo, tenemos 4 elementos adhesivos con diferente contenido.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title> GeeksforGeeks | BlazeUI </title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong> Blaze UI Sticky </strong> <br> <br>
<blaze-sticky top="20">
<blaze-alert open type="success">
Welcome to GeeksforGeeks
</blaze-alert>
</blaze-sticky>
<div style="height: 600px;"></div>
<blaze-sticky top="80">
<blaze-alert open type="brand">
Data Structures
</blaze-alert>
</blaze-sticky>
<div style="height: 600px;"></div>
<blaze-sticky top="140">
<blaze-alert open type="warning">
Algorithms
</blaze-alert>
</blaze-sticky>
<div style="height: 600px;"></div>
<blaze-sticky top="200">
<blaze-alert open type="info">
Machine Learning
</blaze-alert>
</blaze-sticky>
<div style="height: 600px;"></div>
</center>
</div>
<script>
const checkCurrent = async () => {
let tab = await $('#tabs').get(0).currentTab()
alert(`The current opened tab index is ${tab + 1}`)
}
</script>
</body>
</html>
Producción:
Interfaz de usuario pegajosa de Blaze
Ejemplo 2: En el siguiente ejemplo, cambiaremos el valor superior de sticky usando el control deslizante de rango.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title> GeeksforGeeks | BlazeUI </title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong> Blaze UI Sticky </strong> <br> <br>
<label id="hs" for="hs">
Height Selector: 20
</label>
<input name="hs" id="heightSelector" type="range"
class="c-range c-range--error" min="10"
max="100" value="20" />
<br />
<blaze-sticky class="sticky" top="20">
<blaze-alert open type="success">
Welcome to GeeksforGeeks
</blaze-alert>
</blaze-sticky>
<div style="height: 600px;"></div>
</center>
</div>
<script>
const checkCurrent = async () => {
let tab = await $('#tabs').get(0).currentTab()
alert(`The current opened tab index is ${tab + 1}`)
}
$('#heightSelector').change(function () {
let val = $(this).val()
$('#hs').html(`Height Selector: ${val}`)
$('.sticky').each(function (index, elem) {
$(elem).attr('top', 60 * index + val)
})
})
</script>
</body>
</html>
Producción:
Interfaz de usuario pegajosa de Blaze
Referencia: https://www.blazeui.com/components/sticky
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA