Componentes CSS de Onsen UI Fab

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

Publicación traducida automáticamente

Artículo escrito por pall58183 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *