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 de material del componente CSS de la interfaz de usuario de Onsen se utiliza para crear los botones de la barra de herramientas de material mediante la clase toolbar-button-material . Para usar los íconos dentro del botón, usaremos íconos de Material design para mostrar íconos.
Onsen UI CSS Componente Material Barra de herramientas Botón Clase:
- toolbar-button–material: esta clase se utiliza para crear el botón de la barra de herramientas de material.
Sintaxis:
<span class="toolbar-button
toolbar-button--material">
...
</span>
Ejemplo 1: El siguiente ejemplo muestra el botón de la barra de herramientas de material 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"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.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 Material Toolbar Button </strong> <br> <br> <button class="toolbar-button toolbar-button--material"> <i class="zmdi zmdi-account-circle"></i> Onsen </button> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el botón de la barra de herramientas de material 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"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.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 Material Toolbar Button </strong> <br> <br> <span class="toolbar-button toolbar-button--material"> <i class="zmdi zmdi-airplane"></i> Airplane </span> <span class="toolbar-button toolbar-button--material"> <i class="zmdi zmdi-audio"></i> </span> <span class="toolbar-button toolbar-button--material"> <i class="zmdi zmdi-album"></i> Album </span> </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 gopaldhangar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA