Skip to content
Related Articles

Related Articles

Onsen UI CSS Component Material Action Sheet

Improve Article
Save Article
  • Last Updated : 16 Jun, 2022
Improve Article
Save Article

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 are going to implement the Onsen UI CSS Component Material Action Sheet. Action sheets are used for different actions as a popup. The action sheet has a background mask to make emphasize the action sheet. The material action sheet pop-ups from the bottom of the screen.

Onsen UI CSS Component Material Action Sheet classes:

  • action-sheet: The container with this class is the action sheet.
  • action-sheet-mask: The class is used to blur and make the background dark.
  • action-sheet-mask–material: This mask is used to make its material type.
  • action-sheet–material: This class is used to make action sheets of material type.
  • action-sheet-button: This class is used to create buttons for the action sheet.
  • action-sheet-button–material: This class is used to make action buttons of material type.

Syntax: Create a material action sheet as follows:

<div class="action-sheet-mask action-sheet-mask--material"></div>
<div class="action-sheet action-sheet--material">
  <button class="action-sheet-button action-sheet-button--material">
    <i class="ion-ios-link action-sheet-icon--material"></i>
    Submit
  </button>
</div>

Example 1: In this example, we have a material action sheet with buttons.

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>
    </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 Action Sheet
        </strong>
        <br /><br />
    </center>
  
    <div class="action-sheet-mask action-sheet-mask--material"></div>
    <div class="action-sheet action-sheet--material">
        <button class="action-sheet-button action-sheet-button--material">
            <i class="ion-ios-link action-sheet-icon--material"></i>
            Submit
        </button>
        <button class="action-sheet-button action-sheet-button--material">
            <i class="ion-ios-close action-sheet-icon--material"></i>
            Close
        </button>
        <button class="action-sheet-button action-sheet-button--material">
            <i class="ion-ios-trash action-sheet-icon--material"></i>
            Delete
        </button>
    </div>
</body>
  
</html>


Output:

 

Example 2: In the following example, we have a button to open the action sheet and then close it using the material action buttons.

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>
    </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 Action Sheet
        </strong>
        <br /><br />
  
        <button class="button" onclick="openSheet()">
            Open Material Action Sheet
        </button>
    </center>
  
    <div class="gfg-action action-sheet-mask 
        action-sheet-mask--material"></div>
    <div class="gfg-action action-sheet 
        action-sheet--material">
        <button class="action-sheet-button 
            action-sheet-button--material">
            <i class="ion-ios-link 
                action-sheet-icon--material"></i>
            Submit
        </button>
        <button onclick="closeSheet()" 
            class="action-sheet-button 
                action-sheet-button--material">
            <i class="ion-ios-close 
                action-sheet-icon--material"></i>
            Close
        </button>
    </div>
      
    <script>
        function openSheet() {
            $('.gfg-action ').show()
        }
        function closeSheet() {
            $('.gfg-action ').hide()
        }
        closeSheet()
    </script>
</body>
  
</html>


Output:

 

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!