Onsen UI Fab CSS Components

Last Updated : 18 Jul, 2022

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 article, we will learn how to include Fab using Onsen UI.

Fab or Floating Action Button is a button that floats on the screen and has a button that performs an action. Material Fabs are circular in shape and have a dark shadow under them.

Syntax:

<element-name class="class-name">...</element-name>

Component Present in Fab are:

Fab: This component is used to create a simple fab using the following classes.

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

Material Fab: This component is used to create a simple fab of material type using the following classes.

fab–material: This class is used to make fab of material type.

Fab Mini: This component is used to create a simple mini fab using the following classes.

fab--mini: This class is used in the button to make it mini fab.

Material Fab Mini: This component is used to create a simple mini fab of material type using the following classes.

fab--material fab--mini: This class is used to make mini fabs of material types.

Example 1: In this code, we will make use of the above classes to demonstrate the use of fab components.

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>

Output:

Example 2: In this code, we will make use of the above classes to demonstrate the use of fab components.

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>

Output:

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

AVL Tree Data Structure

pall58183

Improve

Article Tags :

Onsen UI Fab CSS Components

Similar Reads

Thank You!

What kind of Experience do you want to share?