Onsen UI CSS Component Material 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, vamos a implementar Onsen UI CSS Component Material Fab . 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.

Onsen UI CSS Component Material Fab Clases:

  • fabuloso: esta clase se usa en el botón para hacerlo fabuloso.
  • disabled: este atributo desactiva la fábrica.
  • fab–material: esta clase se usa para hacer fab de tipo material.

Sintaxis:

<button class="fab fab--material">
    <i class="zmdi zmdi-globe"></i>
</button>

Ejemplo 1: en este ejemplo, tenemos diferentes fábricas de materiales que muestran un mensaje de alerta cuando se hace clic.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
            "width=device-width, initial-scale=1.0" />
  
    <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>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
      
    <style>
        #heading {
            color: green;
        }
  
        #title {
            font-style: bold;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 id="heading">
            GeeksforGeeks
        </h1>
        <strong id="title">
            Onsen UI CSS Component Material Fab
        </strong>
        <br /> <br /> <br /> <br />
  
        <button onclick="showAlert('Globe')" 
                class="fab fab--material">
            <i class="zmdi zmdi-globe"></i>
        </button>
  
        <button onclick="showAlert('Phone')" 
                class="fab fab--material">
            <i class="zmdi zmdi-phone"></i>
        </button>
  
        <button onclick="showAlert('Plus')" 
                class="fab fab--material">
            <i class="zmdi zmdi-plus"></i>
        </button>
  
        <button onclick="showAlert('Google')" 
                class="fab fab--material">
            <i class="zmdi zmdi-google"></i>
        </button>
    </center>
  
    <script>
        function showAlert(message) {
            alert(`FAB CLICKED: ${message}`)
        }
    </script>
</body>
  
</html>

Producción:

 

Ejemplo 2: En este ejemplo, cuando deshabilitamos las fábricas de materiales haciendo clic en él.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
            "width=device-width, initial-scale=1.0" />
    <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>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
  
    <style>
        #heading {
            color: green;
        }
  
        #title {
            font-style: bold;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 id="heading">
            GeeksforGeeks
        </h1>
        <strong id="title">
            Onsen UI CSS Component Material Fab
        </strong>
        <br /> <br /> <br /> <br />
  
        <button class="fab fab--material">
            <i class="zmdi zmdi-globe"></i>
        </button>
  
        <button class="fab fab--material">
            <i class="zmdi zmdi-phone"></i>
        </button>
  
        <button class="fab fab--material">
            <i class="zmdi zmdi-plus"></i>
        </button>
  
        <button class="fab fab--material">
            <i class="zmdi zmdi-google"></i>
        </button>
    </center>
  
    <script>
        $('.fab').click(function () {
            $(this).attr('disabled', 'true')
        })
    </script>
</body>
  
</html>

Producción:

 

Referencia: https://onsen.io/v2/api/css.html#fab-category

Publicación traducida automáticamente

Artículo escrito por RajeevSarkar 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 *