Onsen UI CSS Component Basic Action Sheet

Last Updated : 17 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 Basic 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 basic action sheet has a dark but transparent background.

Onsen UI CSS Component Basic 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-button: This class is used to create buttons for the action sheet.

Syntax: Create a basis action sheet as follows:

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

Example 1: In the following example, we have a basic 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 Basic Action Sheet 
        </strong> 
        <br /><br /> 
    </center> 
  
    <div class="action-sheet-mask"></div> 
    <div class="action-sheet"> 
        <button class="action-sheet-button"> 
            <i class="ion-ios-link"></i> 
            Submit 
        </button> 
        <button class="action-sheet-button"> 
            <i class="ion-ios-close"></i> 
            Close 
        </button> 
        <button class="action-sheet-button"> 
            <i class="ion-ios-trash"></i> 
            Delete 
        </button> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In the following example, we have a basic action sheet that can be opened and closed with the help of 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 Basic Action Sheet 
        </strong> 
        <br /> 
        <br /> 
        <button class="button" onclick="openSheet()"> 
            Open Basic Action Sheet 
        </button> 
    </center> 
    <div class="gfg-action action-sheet-mask"></div> 
    <div class="gfg-action action-sheet"> 
        <button class="action-sheet-button"> 
            <i class="ion-ios-link"></i> 
            Submit 
        </button> 
        <button onclick="closeSheet()" 
            class="action-sheet-button"> 
            <i class="ion-ios-close"></i> 
            Close 
        </button> 
    </div> 
  
    <script> 
        function openSheet() { 
            $('.gfg-action ').show() 
        } 
        function closeSheet() { 
            $('.gfg-action ').hide() 
        } 
        closeSheet() 
    </script> 
</body> 
  
</html>