Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y fácil de mantener. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las funciones nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.
Un panel es un componente muy útil para cualquier diseño, ya que proporciona un espacio desplazable manejable dentro de la estructura existente de nuestra página web. El tamaño del panel se puede aumentar o disminuir simplemente configurando su altura. En este artículo, veremos los paneles en la interfaz de usuario de Blaze.
Clases de paneles de interfaz de usuario de Blaze:
- o-panel-container: Esta clase crea un contenedor para paneles en la página web.
- o-panel: Esta clase se utiliza para crear un panel dentro de su página web.
Sintaxis:
<div class="o-panel-container" style="...">
<div class="o-panel">
....
</div>
</div>
Ejemplo 1: el siguiente ejemplo muestra el panel en la interfaz de usuario de Blaze.
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" /> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <div class="u-centered"> <h2 style="color:green">GeeksforGeeks</h2> <h3>Panel in Blaze UI</h3> </div> <div class="o-panel-container o-container o-container--xlarge" style="height: 100px"> <div class="o-panel"> GeeksforGeeks is a portal for geeks. It is a place where you can learn, share and get help from other geeks. Find various things on the portal like Jobs, Hackathons, Programming Competitions, Coding Questions, etc. You can also learn various things like programming languages, algorithms, data structures, etc. You can also ask questions to other geeks and get help from them. GeeksforGeeks is a portal for geeks. It is a place where you can learn, share and get help from other geeks. Find various things on the portal like Jobs, Hackathons, Programming Competitions, Coding Questions, etc. You can also learn various things like programming languages, algorithms, data structures, etc. You can also ask questions to other geeks and get help from them. GeeksforGeeks is a portal for geeks. It is a place where you can learn, share and get help from other geeks. Find various things on the portal like Jobs, Hackathons, Programming Competitions, Coding Questions, etc. You can also learn various things like programming languages, algorithms, data structures, etc. </div> </div> </body> </html>
Producción:
Ejemplo 2: otro ejemplo que muestra el panel en la interfaz de usuario de Blaze.
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" /> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <div class="u-centered"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Panel in Blaze UI</h3> </div> <div class="o-panel-container o-container o-container--small" style="height:200px"> <div class="o-panel"> GeeksforGeeks is a portal for geeks. It is a place where you can learn, share and get help from other geeks. Find various things on the portal like Jobs, Hackathons, Programming Competitions, Coding Questions, etc. You can also learn various things like programming languages, algorithms, data structures, etc. You can also ask questions to other geeks and get help from them. GeeksforGeeks is a portal for geeks. It is a place where you can learn, share and get help from other geeks. Find various things on the portal like Jobs, Hackathons, Programming Competitions, Coding Questions, etc. You can also learn various things like programming languages, algorithms, data structures, etc. You can also ask questions to other geeks and get help from them. Find various things on the portal like Jobs, Hackathons, Programming Competitions, Coding Questions, etc. You can also learn various things like programming languages, algorithms, data structures, etc. GeeksforGeeks is a portal for geeks. It is a portal for geeks. </div> </div> </body> </html>
Producción:
Referencia: https://www.blazeui.com/objects/panels
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA