Blaze UI es un marco de código abierto de CSS . Es un conjunto de herramientas de interfaz de usuario liviano y 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. Su proyecto está disponible en código abierto, por lo que una gran comunidad lo mantiene.
Las pestañas se utilizan para cambiar entre el contenido sin salir de la página actual. Las pestañas básicas de Blaze UI se utilizan para crear la pestaña básica usando los atributos de la pestaña. En este artículo, analizaremos las pestañas básicas de Blaze UI.
Atributos de las pestañas básicas de Blaze UI:
- blaze-tabs: este atributo se utiliza para crear las pestañas.
- blaze-tab: este atributo se utiliza para crear una sola pestaña.
Sintaxis:
<blaze-tabs>
<blaze-tab type="brand" header="..." open>
...
</blaze-tab>
<blaze-tab header="...">
...
</blaze-tab>
...
</blaze-tabs>
Ejemplo 1: el siguiente ejemplo muestra las pestañas básicas de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Basic Tabs </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> </head> <body> <div class="u-centered"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Basic Tabs </h3> <blaze-tabs> <blaze-tab header="Tab 1" open> A Computer Science portal for geeks. </blaze-tab> <blaze-tab header="Tab 2"> It contains well written, well thought and well explained computer science and programming articles. </blaze-tab> <blaze-tab header="Tab 3"> GeeksforGeeks </blaze-tab> </blaze-tabs> </div> </body> </html>
Producción:
Fichas básicas de la interfaz de usuario de Blaze
Ejemplo 2: el siguiente ejemplo muestra las pestañas básicas de Blaze UI con una pestaña deshabilitada.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Basic Tabs </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> </head> <body> <div class="u-centered"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Basic Tabs </h3> <blaze-tabs> <blaze-tab type="error" header="Tab 1" open> A Computer Science portal for geeks. </blaze-tab> <blaze-tab disabled header="Tab 2"> It contains well written, well thought and well explained computer science and programming articles. </blaze-tab> <blaze-tab type="info" header="Tab 3"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" > </blaze-tab> <blaze-tab header="Tab 4" open> GeeksforGeeks </blaze-tab> </blaze-tabs> </div> </body> </html>
Producción:
Fichas básicas de la interfaz de usuario de Blaze
Referencia: https://www.blazeui.com/components/tabs/
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA