Onsen UI es un marco HTML5 gratuito de código abierto para crear interfaces de usuario (UI) innovadoras y utilizables. También simplifica el diseño de la interfaz de usuario, lo que permite que los desarrolladores de aplicaciones se concentren en la funcionalidad del programa.
La barra de pestañas es un componente de CSS que se puede usar para crear una barra de navegación que tendrá pestañas para navegar. Esto se usa principalmente para hacer una barra de navegación para una interfaz de usuario móvil. La Icon Tabbar es un tipo de barra de pestañas donde podemos añadir iconos junto con etiquetas en todas las pestañas de navegación.
Clases de la barra de pestañas del icono del componente CSS de la interfaz de usuario de Onsen:
- tabbar: esta clase se agrega a todo el contenedor HTML div que contendrá toda la barra de navegación.
- tabbar__item: Esta clase se agrega a las pestañas de la barra de navegación.
- tabbar__button: esta clase se agrega a los elementos de botón en los que se puede hacer clic para cambiar las pestañas de la barra de navegación.
- tabbar__icon: esta clase se agrega a los iconos de los elementos de botón en los que se puede hacer clic para cambiar las pestañas de la barra de navegación.
- tabbar__label: Esta clase se agrega para especificar el nombre de cada pestaña de la barra de navegación.
Sintaxis:
<div class="tabbar">
<label class="tabbar__item">
<input type="radio" name="tabbar-a" checked="...">
<button class="tabbar__button">
<i class=""></i>
<div class="tabbar__label"></div>
</button>
</label>
</div>
Ejemplo 1: En este ejemplo, utilizaremos la barra de pestañas del icono del componente CSS de la interfaz de usuario de Onsen para crear la interfaz de usuario.
HTML
<!DOCTYPE html> <html> <head> <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"> <link href= "https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet"> </head> <body> <div style="margin:2rem; font-family:Roboto, sans-serif;"> <h1 style="color:green;">GeeksforGeeks</h1> <h3 style="margin-top:-1.5rem;"> Onsen UI CSS Component Icon Tabbar </h3> <br/> </div> <div class="tabbar"> <label class="tabbar__item"> <input type="radio" name="tabbar-a" checked="checked"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-home"></i> <div class="tabbar__label"> Home </div> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-search"></i> <div class="tabbar__label"> Search </div> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-person"></i> <div class="tabbar__label"> Profile </div> </button> </label> </div> </body> </html>
Producción:
Ejemplo 2: en el siguiente ejemplo, puede ver que podemos agregar numerosos íconos a la barra de pestañas.
HTML
<!DOCTYPE html> <html> <head> <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"> <link href= "https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet"> </head> <body> <div style="margin:2rem; font-family:Roboto, sans-serif;"> <h1 style="color:green;">GeeksforGeeks</h1> <h3 style="margin-top:-1.5rem;"> Onsen UI CSS Component Icon Tabbar </h3> <br /> </div> <div class="tabbar"> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-menu"></i> <div class="tabbar__label"> Settings </div> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a" checked="checked"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-stats"></i> <div class="tabbar__label"> Analytics </div> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-link"></i> <div class="tabbar__label"> Connect </div> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-home"></i> <div class="tabbar__label"> Home </div> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-search"></i> <div class="tabbar__label"> Search </div> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-person"></i> <div class="tabbar__label"> Profile </div> </button> </label> </div> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#tabbar-category
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA