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. En este artículo, veremos el elemento de la barra de herramientas del componente CSS de la interfaz de usuario de Onsen.
La barra de herramientas es una barra horizontal con algunos elementos e iconos de la barra de herramientas. El elemento de la barra de herramientas del componente CSS de la interfaz de usuario de Onsen se usa para crear la barra de herramientas con algunos elementos de la barra de herramientas usando las siguientes clases.
Clases de elementos de la barra de herramientas del componente CSS de la interfaz de usuario de Onsen:
- barra de herramientas: esta clase se utiliza para crear la barra de herramientas.
- toolbar__left: esta clase se usa para crear el elemento de la barra de herramientas a la izquierda.
- toolbar__center: esta clase se utiliza para crear el elemento de la barra de herramientas en el centro.
- toolbar__right: esta clase se usa para crear el elemento de la barra de herramientas a la derecha.
Sintaxis:
<div class="toolbar">
<div class="toolbar__left">
...
</div>
<div class="toolbar__center">
...
</div>
<div class="toolbar__right">
....
</div>
</div>
Ejemplo 1: El siguiente ejemplo muestra el elemento de la barra de herramientas 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 Toolbar Item </strong> <br> <br> <div class="toolbar"> <div class="toolbar__center"> Home </div> <div class="toolbar__right"> <span class="toolbar-button"> Logout </span> </div> </div> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el elemento de la barra de herramientas 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 Toolbar Item </strong> <br> <br> <div class="toolbar"> <div class="toolbar__left"> <span class="toolbar-button"> <i class="ion-ios-star"></i> </span> </div> <div class="toolbar__center"> Home </div> <div class="toolbar__right"> <span class="toolbar-button"> Logout </span> </div> </div> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#toolbar-category
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA