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 silencioso grande del componente CSS de la interfaz de usuario de Onsen se usa para crear el botón silencioso grande sin el borde y usando la clase botón-grande-silencioso .
Clase de botón silencioso grande del componente CSS de la interfaz de usuario de Onsen:
- button–large–quiet: esta clase se usa para crear el botón silencioso grande.
Sintaxis:
<button class="button button--large--quiet">
...
</button>
Ejemplo 1: El siguiente ejemplo muestra el botón silencioso grande 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 Large Quiet Button </h3> <button class="button button--large--quiet"> GeeksforGeeks </button> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el botón silencioso grande 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 Large Quiet Button </h3> <button class="button button--large--quiet"> Java </button> <button class="button button--large--quiet" disabled> C++ </button> <button class="button button--large--quiet"> 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