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 la barra de herramientas sin sombra 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. Onsen UI CSS Component No Shadow Toolbar se usa para crear la barra de herramientas sin sombra usando la clase toolbar-noshadow .
Onsen UI CSS Componente No Shadow Toolbar Clase:
- toolbar–noshadow: Esta clase se utiliza para crear la barra de herramientas sin sombra.
Sintaxis:
<div class="toolbar toolbar--noshadow"> .... </div>
Ejemplo 1: El siguiente ejemplo muestra la barra de herramientas sin sombra 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 No Shadow Toolbar </strong> <br> <br> <div class="toolbar toolbar--noshadow"> <div class="toolbar__left"> <span class="toolbar-button"> Menu </span> </div> <div class="toolbar__right"> <span class="toolbar-button"> Logout </span> </div> </div> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra la barra de herramientas sin sombra 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 No Shadow Toolbar </strong> <br> <br> <div class="toolbar toolbar--noshadow"> <div class="toolbar__left"> <span class="toolbar-button"> Menu </span> </div> <div class="toolbar__right"> <span class="toolbar-button"> <i class="ion-ios-star"></i> </span> <span class="toolbar-button"> <i class="zmdi zmdi-search"></i> </span> <span class="toolbar-button"> <i class="zmdi zmdi-favorite"></i> </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