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, aprenderemos cómo incluir Fab utilizando la interfaz de usuario de Onsen.
Fab o Floating Action Button es un botón que flota en la pantalla y tiene un botón que realiza una acción. Los materiales Fabs tienen forma circular y tienen una sombra oscura debajo de ellos.
Sintaxis:
<element-name class="class-name">...</element-name>
Los componentes presentes en Fab son:
Fab: este componente se usa para crear una fábrica simple usando las siguientes clases.
- fabuloso: esta clase se usa en el botón para hacerlo fabuloso.
- disabled: este atributo desactiva la fábrica.
Material Fab: este componente se usa para crear una fábrica simple de tipo material usando las siguientes clases.
- fab–material: esta clase se usa para hacer fab de tipo material.
Fab Mini: este componente se usa para crear una mini fábrica simple usando las siguientes clases.
- fab–mini: esta clase se usa en el botón para convertirlo en mini fab.
Material Fab Mini: este componente se usa para crear una mini fábrica simple de tipo material usando las siguientes clases.
- fab–material fab–mini: esta clase se utiliza para hacer mini fabs de tipos de materiales.
Ejemplo 1: en este código, haremos uso de las clases anteriores para demostrar el uso de componentes fabulosos.
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 Fab CSS Components</h3> <button class="fab"> <i class="zmdi zmdi-car"></i> </button> <button class="fab" disabled> <i class="zmdi zmdi-car"></i> </button> </center> </body> </html>
Producción:
Ejemplo 2: En este código, haremos uso de las clases anteriores para demostrar el uso de componentes fab.
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 Fab CSS Components</h3> <button class="fab fab--mini"> <i class="zmdi zmdi-plus"></i> </button> <button class="fab fab--mini" disabled> <i class="zmdi zmdi-plus"></i> </button> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#fab-category