Open In App

Onsen UI CSS Component Action Sheet with Delete Label

Improve
Improve
Like Article
Like
Save
Share
Report

Onsen UI is a free open-source HTML5 framework that allows you to create unique and usable user interfaces (UI). It also simplifies UI development, allowing programmers to concentrate on the program’s functionality. Onsen UI is a sophisticated set of user interface components created exclusively for mobile apps and filled with ready-to-use features that adhere to native iOS and Android design standards. Onsen UI was designed to work with AngularJS, but it may also be used with jQuery or any other framework. Onsen UI is a JavaScript Framework for PhoneGap and Cordova.

Onsen UI CSS Components are pre-built CSS components that may be used to rapidly create adaptive and attractive user interface layouts. Onsen CSS Components is a web-based Topcoat theme roller for mobile developers that makes creating beautiful UIs an easy manner.

Action sheets are bottom-up popups that display the many activities we can do. It appears when the user selects an item or presses a button, or when the user is about to do an action. The Delete Label can be used to signify a label/button that will have the functionality of deleting an already added label. Although Onsen UI is not able to add any functionality like actually deleting any label specified to the deleted label. We need to add that functionality to the label/button through some server-side scripting language like JavaScript.

Onsen UI CSS Component Action Sheet with Delete Label Classes:

  • action-sheet-mask: This class is used to mask the background when the action sheet is open.
  • action-sheet: This class is used to signify the container which will be the action sheet. 
  • action-sheet-button: This class is used to create the buttons/labels for the action sheet. 
  • action-sheet-button–destructive: This class is used to add a button or label which will be used to signify the deleted label. It doesn’t add any functionality to that label, it just changes the font color to red. 

Syntax:

<div class="action-sheet-mask"></div>
<div class="action-sheet">
    <button class="action-sheet-button">
        . . .
    </button>
    <button class="action-sheet-button 
     action-sheet-button--destructive">
        . . .
    </button>
</div>

Example 1: The below code example is used to display that we can add the deleted label to the action sheet.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" />
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <strong style="font-style: bold;">
            Onsen UI CSS Component Action Sheet 
            with Delete Label
        </strong>
        <button class="button" 
                onclick="showSheet()">
            Open Action Sheet with Delete Label
        </button>
    </center>
  
    <div class="gfg-sheet action-sheet-mask"></div>
    <div class="gfg-sheet action-sheet">
        <button class="action-sheet-button">
            <i class="ion-ios-globe"></i>
            <a target="_blank" href=
                "http://geeksforgeeks.org">
                Go to GfG HomePage
            </a>
        </button>
        <button class="action-sheet-button 
                action-sheet-button--destructive">
            <i class="ion-ios-trash"></i>
                Delete Label
        </button>
        <button onclick="closeSheet()"
            class="action-sheet-button">
            <i class="ion-ios-close"></i>
            Close
        </button>
    </div>
  
    <script>
        $('.button').hide()
        function closeSheet() {
            $('.gfg-sheet').hide()
            $('.button').show()
        }
        function showSheet() {
            $('.gfg-sheet').show()
            $('.button').hide()
        }
    </script>
</body>
</html>


Output:

 

Example 2: In the below code example, we have demonstrated the usage of JavaScript to implement the deleting label functionality in the deleted label. 

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" />
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <strong style="font-style: bold;">
            Onsen UI CSS Component Action Sheet 
            with Delete Label
        </strong>
        <br />
        <br />
        <button class="button" 
                onclick="showSheet()">
            Open Action Sheet with Delete Label
        </button>
    </center>
  
    <div class="gfg-sheet action-sheet-mask"></div>
    <div class="gfg-sheet action-sheet">
        <button class="action-sheet-button label1">
            <i class="ion-ios-globe"></i>
            <a target="_blank" href=
                "http://geeksforgeeks.org">
                Go to GfG HomePage
            </a>
        </button>
        <button onclick="deleteLabel1()"
        class="action-sheet-button 
               action-sheet-button--destructive deleteL1">
            <i class="ion-ios-trash"></i>
                Delete First Label
        </button>
        <button class="action-sheet-button">
            <i class="ion-ios-globe"></i>
            <a target="_blank" href=
                Go to the GfG Algorithms Page
            </a>
        </button>
        <button onclick="deleteLabel2()"
                class="action-sheet-button 
                       action-sheet-button--destructive deleteL2">
            <i class="ion-ios-trash"></i>
                Delete Second Label
        </button>
        <button onclick="closeSheet()"
                class="action-sheet-button">
            <i class="ion-ios-close"></i>
            Close
        </button>
    </div>
  
    <script>
        $('.button').hide()
        function closeSheet() {
            $('.gfg-sheet').hide()
            $('.button').show()
        }
        function showSheet() {
            $('.gfg-sheet').show()
            $('.button').hide()
        }
        function deleteLabel1() {
            $('.label1').hide()
            $('.deleteL1').hide()
        }
    </script>
</body>
</html>


Output:

 

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



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