Blaze UI es un kit de herramientas de interfaz de usuario de código abierto sin marco que utiliza componentes de JavaScript para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. Este marco nos permite usar varios de sus estilos y propiedades para hacer que un sitio web sea más fácil de usar.
La interfaz de usuario de Blaze proporciona la función Volver al principio, cuando el usuario hace clic en el botón Volver al principio, se desplazará hacia arriba en la página.
Blaze UI ofrece un atributo Volver arriba:
- posición: este atributo especifica la posición del botón a la ‘izquierda’ o al ‘centro ‘. La posición predeterminada es ‘derecha’ .
Podemos agregar una función Volver al principio mediante la etiqueta blaze-back-to-top proporcionada por Blaze UI.
Sintaxis:
<blaze-back-to-top position="...">
<button class="...">Back to Top</button>
</blaze-back-to-top>
Ejemplo 1: el siguiente código muestra la interfaz de usuario de Blaze Volver al principio con la característica de posición ‘Izquierda’ utilizando la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html> <head> <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> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Blaze UI Back to Top </h3> <h4>Scroll down</h4> <p><img style="width:200px" src= "https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png"> </p> <p><img style="width:200px" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6-300x160.png"> </p> <p><img style="width:200px" src= "https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png"> </p> <p><img style="width:200px" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6-300x160.png"> </p> <p><img style="width:200px" src= "https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png"> </p> <blaze-back-to-top position="left"> <button class="c-button"> Go back to top </button> </blaze-back-to-top> </body> </html>
Producción:
Ejemplo 2: el siguiente código muestra la interfaz de usuario de Blaze Volver al principio con la característica de posición «Derecha» utilizando la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html> <head> <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> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Blaze UI Back to Top </h3> <h4>Scroll down</h4> <p><img style="width:200px" src= "https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png"> </p> <p><img style="width:200px" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6-300x160.png"> </p> <p><img style="width:200px" src= "https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png"> </p> <p><img style="width:200px" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6-300x160.png"> </p> <p><img style="width:200px" src= "https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png"> </p> <blaze-back-to-top position="right"> <button class="c-button">Go back to top</button> </blaze-back-to-top> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/back-to-top/
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA