Onsen UI CSS Component Material Action Sheet

Last Updated : 16 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 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= 
        "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 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= 
        "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 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>