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, vamos a implementar el componente CSS del botón de la barra de herramientas de la interfaz de usuario de Onsen.
El componente de botón de barra de herramientas se utiliza para mostrar un botón de barra de herramientas dentro de la barra de herramientas. Hay dos tipos de botones de barra de herramientas, a saber, un botón de barra de herramientas simple y un botón de barra de herramientas de material.
Clases de componente CSS del botón de la barra de herramientas de la interfaz de usuario de Onsen:
- toolbar-button: Esta clase se utiliza para crear un botón de barra de herramientas.
- toolbar-button–material: esta clase se utiliza para crear un botón de barra de herramientas de material.
- toolbar-button–outline : Esta clase se usa para hacer el botón de fondo transparente.
Sintaxis:
<button class="toolbar-button"> <i class="..."></i> </button>
Ejemplo 1: El siguiente ejemplo demuestra el uso de la clase de botón de la barra de herramientas del componente CSS del botón de la barra de herramientas de la interfaz de usuario de Onsen. Los íconos se insertan usando la etiqueta HTML <i> y la biblioteca font-awesome.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>GeeksforGeeks | Onsen UI CSS</title> <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= "http://fortawesome.github.io/Font-Awesome/" /> </head> <body> <center> <h2 style="color:green">GeeksforGeeks</h2> <strong>Onsen UI Toolbar button CSS Component</strong> <br/> <button class="toolbar-button"> <i class="fa fa-bell" style="font-size:17px"></i> New Notification </button> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra el uso de la clase toolbar-button-material del componente CSS del botón de la barra de herramientas de la interfaz de usuario de Onsen. Los botones se pueden crear usando la etiqueta HTML <span> como se muestra a continuación.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>GeeksforGeeks | Onsen UI CSS</title> <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= "http://zavoloklom.github.io/material-design-iconic-font/" /> </head> <body> <center> <h2 style="color:green">GeeksforGeeks</h2> <strong> Onsen UI Material Toolbar button CSS Component </strong> <br/> <br> <span class="toolbar-button toolbar-button--material"> <i class="zmdi zmdi-menu"></i> Menu details </span> <span class="toolbar-button toolbar-button--material"> <i class="zmdi zmdi-favorite"></i> Favourite cuisine </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 geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA