Onsen UI CSS Component Material Fab Mini

Last Updated : 13 Jun, 2022

Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components compatible with mobile and desktop.

In this article, we are going to implement the Onsen UI CSS Component Material Fab Mini. Fab or Floating action button is a button that floats on the screen and has a button that performs an action. Fabs are circular in shape and have a light shadow under them. The mini material fabs have darker shadows and are smaller in size.

Onsen UI CSS Component Material Fab Mini Classes:

fab: This class is used in the button to make it fab.
disabled: This attribute makes the fab disabled.
fab–mini: This class is used to create mini fab.
fab–material: This class is used to create material fab.

Syntax:

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

Example 1: In the following example, we have two mini material fabs with one disabled and when clicked, it shows an alert.

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>

Output:

Example 2: In the following example, we toggle between material fab and material mini fab to see the difference.

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>