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.
<!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.
<!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