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.
Todos hemos visto Accordion en sitios web modernos. Nos ayuda a mostrar una gran cantidad de información en un lugar muy pequeño dentro de un contenedor. Nos ayuda a organizar grandes cantidades de datos de forma estructurada y podemos acceder a cada uno de ellos cambiando entre los diferentes elementos. En este artículo, aprenderemos cómo hacer un acordeón usando el kit de herramientas de Blaze UI.
Elemento de acordeón básico de Blaze UI:
- blaze-accordion: este atributo se utiliza para crear el acordeón.
- blaze-accordion-pane: este atributo se utiliza para crear el panel de acordeón único.
Sintaxis:
<blaze-accordion>
<blaze-accordion-pane type="brand" header="..." open>
...
</blaze--accordion-pane>
<blaze-accordion-pane header="...">
...
</blaze--accordion-pane>
...
</blaze-accordion>
Ejemplo 1: el siguiente código demuestra el acordeón básico de Blaze UI con paneles.
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" /> <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> </head> <body> <div class="o-container" style="padding:1em;"> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <strong> Blaze UI accordions </strong> <br> <br> </center> <blaze-accordion> <blaze-accordion-pane open header="Click me"> This is an example of accordion </blaze-accordion-pane> <blaze-accordion-pane header="Click this also"> This is another pane </blaze-accordion-pane> <blaze-accordion-pane header="Click this"> This is another pane </blaze-accordion-pane> <blaze-accordion-pane header="Click this"> This is another pane </blaze-accordion-pane> </blaze-accordion> </div> </body> </html>
Producción:
Ejemplo 2: En el siguiente ejemplo, hemos utilizado acordeones anidados.
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" /> <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> </head> <body> <div class="o-container" style="padding:1em;"> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <strong> Blaze UI accordions </strong> <br> <br> </center> <blaze-accordion> <blaze-accordion-pane open header="Database"> <blaze-accordion-pane header="Mysql"> Mysql is a relational DBMS. </blaze-accordion-pane> <blaze-accordion-pane header="Oracle"> Oracle Corporation is an American multinational computer technology corporation </blaze-accordion-pane> <blaze-accordion-pane header="DB2"> Db2 is a database managment system developed by IBM </blaze-accordion-pane> </blaze-accordion-pane> </blaze-accordion> </div> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/accordions
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA