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.
El botón de la barra de herramientas básica del componente CSS de la interfaz de usuario de Onsen se utiliza para crear los botones básicos de la barra de herramientas utilizando las siguientes clases de botones de la barra de herramientas de la interfaz de usuario de Onsen.
Clases de botones de la barra de herramientas básica del componente CSS de la interfaz de usuario de Onsen:
- toolbar-button: Esta clase se utiliza para crear el botón de la barra de herramientas.
- toolbar-button–outline: Esta clase se utiliza para crear el botón de la barra de herramientas de esquema.
Sintaxis:
<button class="toolbar-button"> ... </button>
Ejemplo 1: El siguiente ejemplo muestra el botón de la barra de herramientas básica 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> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Onsen UI CSS Component Basic Toolbar Button </h3> <button class="toolbar-button"> GeeksforGeeks </button> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el botón de la barra de herramientas básica 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> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Onsen UI CSS Component Basic Toolbar Button </h3> <button class="toolbar-button toolbar-button--outline"> <i class="ion-ios-menu list-item__icon"> </i> </button> <button class="toolbar-button"> GeeksforGeeks </button> <button class="toolbar-button toolbar-button--outline"> Outline GFG </button> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#toolbar-button-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