Onsen UI CSS Componente Material Fab Mini

Onsen UI CSS se utiliza para crear hermosos componentes HTML. Es una de las formas más eficientes de crear componentes híbridos HTML5 compatibles con dispositivos móviles y de escritorio.

En este artículo, vamos a implementar Onsen UI CSS Component Material Fab Mini . El botón de acción Fab o flotante es un botón que flota en la pantalla y tiene un botón que realiza una acción. Los Fabs tienen forma circular y tienen una sombra clara debajo de ellos. Las mini fabs de material tienen sombras más oscuras y son de menor tamaño.

Onsen UI CSS Component Material Fab Mini Clases:

  • fabuloso : esta clase se usa en el botón para hacerlo fabuloso.
  • disabled : este atributo hace que la fábrica esté deshabilitada.
  • fab–mini : esta clase se usa para crear mini fab.
  • fab–material : esta clase se utiliza para crear material fab.

Sintaxis:

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

Ejemplo 1 : En el siguiente ejemplo, tenemos dos mini fábricas de material con una deshabilitada y cuando se hace clic, muestra una alerta.

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 Mini
      </strong>
      <br />
      <br />
  
      <button onclick="alertfab()" 
              class="fab fab--material fab--mini">
         <i class="zmdi zmdi-car"></i>
      </button>
      <button onclick="alertfab()" 
              class="fab fab--material fab--mini" 
              disabled>
         <i class="zmdi zmdi-globe"></i>
      </button>
   </center>
  
   <script>
      function alertfab() {
         alert('Mini Material FAB Pressed: Welcome to GeeksforGeeks')
      }
   </script>
</body>
  
</html>

Producción:

 

Ejemplo 2: En el siguiente ejemplo, alternamos entre material fab y material mini fab para ver la diferencia.

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 Mini
        </strong>
        <br />
        <br />
  
        <button class="fab fab--material fab--mini">
            <i class="zmdi zmdi-car"></i>
        </button>
        <button class="fab fab--material fab--mini">
            <i class="zmdi zmdi-globe"></i>
        </button>
    </center>
  
    <script>
        $('button').click(function () {
            $(this).toggleClass('fab--mini')
        })
    </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 *