Onsen UI CSS Component Material Action Sheet with Title
Last Updated :
13 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 with Title. Action sheets are popups from the bottom showing the different actions that we can perform. It is shown when the user clicks on an item or button or is about to take an action. Material action sheet is of material design type. The title is used to display the heading of the action sheet.
Onsen UI CSS Component Material Action Sheet with Title classes:
- action-sheet-mask: It is used to mask the background screen when the action sheet is open.
- action-sheet-mask–material: It is used to create an action sheet mask of material type.
- action-sheet: The container with this class is the action sheet.
- action-sheet–material: The class is used to create an action sheet of material type.
- action-sheet-title: This class is used to create the title for the action sheet.
- action-sheet-title–material: The class is used to create the title of the material type.
- action-sheet-button: This class is used to create the button for the action sheet.
- action-sheet-button–material: The class is used to create the button of the material type.
- action-sheet-icon–material: This class is used to create a material icon for the action sheet.
Syntax: Create a material action sheet with a title as follows:
<div class="action-sheet-mask action-sheet-mask--material"></div>
<div class="action-sheet action-sheet--material">
<div class="action-sheet-title action-sheet-title--material">Geeks</div>
<button class="action-sheet-button action-sheet-button--material">
<i class="ion-ios-star action-sheet-icon--material"></i>
Okay
</button>
</div>
Example 1: In the following example, we have a material action sheet with a title.
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 src=
</script>
<script src=
</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 with Title
</strong>
</center>
<div class="action-sheet-mask
action-sheet-mask--material"></div>
<div class="action-sheet action-sheet--material">
<div class="action-sheet-title
action-sheet-title--material">
GeeksforGeeks
</div>
<button class="action-sheet-button
action-sheet-button--material">
<i class="ion-ios-globe
action-sheet-icon--material"></i>
<a target="_blank"
Website
</a>
</button>
<button class="action-sheet-button
action-sheet-button--material">
<i class="ion-ios-close
action-sheet-icon--material"></i>
Close
</button>
</div>
<script></script>
</body>
</html>
|
Output:
Example 2: In the following example, we will open and close the action sheet 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=
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</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 with Title
</strong>
<br />
<br />
<button class="button" onclick="showSheet()">
Open Material Action Sheet
</button>
</center>
<div class="gfg-sheet action-sheet-mask
action-sheet-mask--material"></div>
<div class="gfg-sheet action-sheet
action-sheet--material">
<div class="action-sheet-title
action-sheet-title--material">
GeeksforGeeks
</div>
<button class="action-sheet-button
action-sheet-button--material">
<i class="ion-ios-globe
action-sheet-icon--material"></i>
<a target="_blank" href=
Website
</a>
</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>
$('.button').hide()
function closeSheet() {
$('.gfg-sheet').hide()
$('.button').show()
}
function showSheet() {
$('.gfg-sheet').show()
$('.button').hide()
}
</script>
</body>
</html>
|
Output:
Reference: https://onsen.io/v2/api/css.html#action-sheet-category
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...