Open In App
Related Articles

Onsen UI CSS Component Basic Fab

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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

In this tutorial, we are going to implement the Onsen UI CSS Component Basic Fab. 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.

Onsen UI CSS Component Basic Fab Classes:

  • fab: This class is used in the button to make it fab.
  • disabled: This attribute makes the fab disabled.

Syntax: Create a basic fab as follows:

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

Example 1: In the following example,  we have two basic 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=
    <link rel="stylesheet" href=
  
    <script src=
    <script src=
  
    <style>
        #heading {
            color: green;
        }
  
        #title {
            font-style: bold;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 id="heading">GeeksforGeeks</h1>
        <strong id="title">
            Onsen UI CSS Component Basic Fab
        </strong>
        <br />
        <br />
  
        <button onclick="alertfab()" class="fab">
            <i class="zmdi zmdi-car"></i>
        </button>
        <button onclick="alertfab()" class="fab" disabled>
            <i class="zmdi zmdi-globe"></i>
        </button>
    </center>
      
    <script>
        function alertfab() {
            alert('FAB Pressed: Welcome to GeeksforGeeks')
        }
    </script>
</body>
  
</html>

                    

Output:

 

Example 2: In the following example, when we toggle the fabs by clicking on it.

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=
    <link rel="stylesheet" href=
  
    <script src=
    <script src=
  
    <style>
        #heading {
            color: green;
        }
  
        #title {
            font-style: bold;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 id="heading">GeeksforGeeks</h1>
        <strong id="title">
            Onsen UI CSS Component Basic Fab
        </strong>
        <br />
        <br />
  
        <button onclick="alertfab()" class="fab">
            <i class="zmdi zmdi-car"></i>
        </button>
        <button onclick="alertfab()" class="fab">
            <i class="zmdi zmdi-globe"></i>
        </button>
    </center>
      
    <script>
        $('.fab').click(function () {
            $(this).attr('disabled', 'trues')
        })
    </script>
</body>
  
</html>

                    

Output:

 

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



Last Updated : 04 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads