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.
Los atributos de las pestañas de Blaze UI se utilizan para crear las pestañas. Tenemos cuatro atributos para crear la pestaña en Blaze UI. En este artículo, analizaremos los atributos de las pestañas en la interfaz de usuario de Blaze.
Atributos de las pestañas de la interfaz de usuario de Blaze:
- type: este atributo es un tipo de string que toma el color de la pestaña.
- abierto: este atributo especifica la pestaña que debe seleccionarse cuando se carga.
- disabled: este atributo se utiliza para desactivar la pestaña.
- encabezado: este atributo se utiliza para dar el encabezado de la pestaña.
Sintaxis:
<blaze-tabs>
<blaze-tab type="..." header="...">
...
</blaze-tab>
...
</blaze-tabs>
Ejemplo 1: el siguiente ejemplo muestra los atributos de las pestañas de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Tabs Attributes </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 class="u-window-box-large"> <div class="u-centered"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Tabs Attributes </h3> <blaze-tabs> <blaze-tab type="brand" header="Tab 1" open> Welcome to GeeksforGeeks </blaze-tab> <blaze-tab type="info" header="Tab 2"> A Computer Science portal for geeks. </blaze-tab> <blaze-tab header="Tab 3"> GeeksforGeeks </blaze-tab> </blaze-tabs> </div> </body> </html>
Producción:
Atributos de las pestañas de la interfaz de usuario de Blaze
Ejemplo 2: el siguiente ejemplo muestra los atributos de las pestañas de la interfaz de usuario de Blaze con una pestaña deshabilitada .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Tabs Attributes </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 class="u-window-box-large"> <div class="u-centered"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Tabs Attributes </h3> <blaze-tabs> <blaze-tab type="brand" header="Tab 1" open> Welcome to GeeksforGeeks </blaze-tab> <blaze-tab disabled header="Tab 2"> A Computer Science portal for geeks. </blaze-tab> <blaze-tab header="Tab 3"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </blaze-tab> </blaze-tabs> </div> </body> </html>
Producción:
Atributos de las pestañas de la interfaz de usuario de Blaze
Referencia: https://www.blazeui.com/components/tabs/
Publicación traducida automáticamente
Artículo escrito por gopaldhangar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA