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 le permite crear una barra de navegación con pestañas para facilitar la navegación. Esto se usa comúnmente para crear una barra de navegación para una interfaz de usuario móvil. La barra de pestañas de solo íconos es una forma de barra de pestañas en la que solo se pueden agregar íconos a todas las pestañas de navegación y no habrá un título textual para la pestaña.
Onsen UI CSS Componente Icono Solo barra de pestañas Clases utilizadas:
- tabbar: esta clase se agrega a todo el contenedor 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.
Sintaxis:
<div class="tabbar">
<label class="tabbar__item">
<input>
<button class="tabbar__button">
<i class="tabbar__icon"></i>
</button>
</label>
</div>
Ejemplo: este código a continuación muestra la barra de pestañas de solo icono usando las clases mencionadas anteriormente.
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 Only 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> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-search"></i> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-person"></i> </button> </label> </div> </body> </html>
Producción:
Ejemplo 2: este código a continuación muestra la barra de pestañas de solo icono usando las clases mencionadas anteriormente.
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 Only 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> </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> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-link"></i> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-home"></i> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-search"></i> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-person"></i> </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