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.
Los botones son uno de los elementos de interfaz de usuario más comunes. Cuando queremos realizar alguna acción y queremos navegar a una página diferente, podemos usar el botón. El botón de material del componente CSS de la interfaz de usuario de Onsen se usa para crear el botón de material usando la clase botón-material .
Onsen UI CSS Component Material Botón Clase:
- button–material: esta clase se utiliza para crear el botón de material.
Sintaxis:
<button class="button button--material">
...
</button>
Ejemplo 1: El siguiente ejemplo muestra el botón 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"> <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 Material Button </h3> <button class="button button--material"> GeeksforGeeks </button> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el botón 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"> <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 Material Button </h3> <button class="button button--material"> Java </button> <button class="button button--material" disabled> Python </button> <button class="button button--material"> C++ </button> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#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