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. En este artículo, veremos los diversos componentes Button CSS en la interfaz de usuario de Onsen.
El botón se utiliza para realizar alguna acción cuando el usuario hace clic en el botón. Los componentes Button CSS se pueden utilizar para hacer que el botón tenga un estilo diferente que indique la acción específica adjunta al botón.
Onsen UI Botón CSS Componentes Clases:
- Botón: este componente contiene una clase que se utiliza para crear un botón simple.
- Botón de contorno: este componente contiene una clase que se utiliza para crear un botón con un efecto de contorno.
- Botón de luz: este componente contiene una clase que se utiliza para crear un botón con un efecto de luz.
- Botón silencioso: este componente contiene una clase que se utiliza para crear un botón normal.
- Botón de llamada a la acción: este componente contiene una clase que se utiliza para crear un botón con efectos simples.
- Botón silencioso grande: este componente contiene una clase que se usa para crear un botón grande
- Botón de llamada a la acción grande: este componente contiene una clase que se utiliza para crear un botón grande con efectos simples.
- Botón de material: este componente contiene una clase que se utiliza para crear un botón.
- Botón plano de material: este componente contiene una clase que se utiliza para crear un botón plano.
Sintaxis:
<element-name class="button">...</element-name>
Ejemplo 1: este ejemplo describe los componentes CSS del botón de la interfaz de usuario de Onsen.
HTML
<!DOCTYPE html> <html> <head> <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> <title>Onsen UI Button</title> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Onsen UI Button CSS Components </h3> <button class="button"> Basic Button </button> <button class="button button--material"> Material Button </button> <button class="button button--material--flat"> Flat Button </button> </center> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, veremos cómo incluir diferentes tipos de botones utilizando la interfaz de usuario de Onsen.
HTML
<!DOCTYPE html> <html> <head> <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> <title>Onsen UI Button</title> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Onsen UI Button CSS Components </h3> <button class="button"> Simple Button </button> <button class="button button--outline"> Outline Button </button> <button class="button button--light"> Light Button </button> <button class="button button--quiet"> Quiet Button </button> <button class="button button--cta"> CTA Button </button> <button class="button button--large--quiet" style="width: 55%; margin: 0 auto;"> Quiet Large Button </button> <button class="button button--large--cta" style="width: 55%; margin: 0 auto;"> CTA Large Button </button> <br> <button class="button button--material"> Material Button </button> <button class="button button--material--flat"> Flat Button </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 krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA