Onsen UI CSS se utiliza para crear hermosos componentes HTML. Es una de las formas más eficientes de crear componentes híbridos HTML5 que son compatibles con dispositivos móviles y de escritorio.
La barra de pestañas se usa para crear las pestañas usando las clases de interfaz de usuario de Onsen. La barra de pestañas superior del componente CSS de la interfaz de usuario de Onsen se usa para crear la barra de pestañas en la parte superior usando la clase tabbar-top .
Onsen UI CSS Component Clase de barra de pestañas superior:
- tabbar–top: esta clase se usa para crear la barra de pestañas en la parte superior.
Sintaxis:
<div class="tabbar tabbar--top">
<label class="tabbar__item">
...
</label>
...
</div>
Ejemplo 1: El siguiente ejemplo muestra la barra de pestañas superior del componente CSS de la interfaz de usuario de Onsen.
HTML
<!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src= "https://unpkg.com/onsenui/js/onsenui.min.js"> </script> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI CSS Component Top Tabbar </strong> <br> <br> <div class="tabbar tabbar--top"> <label class="tabbar__item"> <input type="radio" name="tabs" checked="checked"> <button class="tabbar__button"> <div class="tabbar__label"> Item 1 </div> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabs"> <button class="tabbar__button"> <div class="tabbar__label"> Item 2 </div> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabs"> <button class="tabbar__button"> <div class="tabbar__label"> Item 3 </div> </button> </label> </div> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra la barra de pestañas superior del componente CSS de la interfaz de usuario de Onsen.
HTML
<!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src= "https://unpkg.com/onsenui/js/onsenui.min.js"> </script> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI CSS Component Top Tabbar </strong> <br> <br> <div class="tabbar tabbar--top"> <label class="tabbar__item"> <input type="radio" name="tabs" checked="checked"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-menu"> </i> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabs"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-hammer"> </i> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabs"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-star"> </i> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabs"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-calendar"> </i> </button> </label> </div> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#tabbar-category
Publicación traducida automáticamente
Artículo escrito por gopaldhangar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA