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 plano de material del componente CSS de la interfaz de usuario de Onsen se usa para crear el botón plano de material usando la clase botón-material-plano .
Onsen UI CSS Componente Material Botón plano Clase:
- button–material–flat: esta clase se utiliza para crear el botón plano de material.
Sintaxis:
<button class="button button--material--flat">
...
</button>
Ejemplo 1: El siguiente ejemplo muestra el botón plano 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"> <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 Flat Button </h3> <button class="button button--material--flat"> GeeksforGeeks </button> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el botón plano 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"> <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 Flat Button </h3> <button class="button button--material--flat"> Java </button> <button class="button button--material--flat" disabled> C++ </button> <button class="button button--material--flat"> Python </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