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 will learn about the Onsen UI action sheet CSS components, its classes, and some action sheet implementation.
The Action sheet is displayed on top of the current screen. This element can either be attached directly to the <body> or dynamically created from a template using some utility function. This component usually displays the list of actions or the required actions that need to be performed in order to accomplish the specific task.
Onsen UI Action Sheet CSS Component Classes:
- action-sheet-mask: The container with this class is used to create an action sheet mask.
- action-sheet: The container with this class is used to create an action sheet.
- action-sheet-title: The container with this class is used to create the action sheet title of the document.
- action-sheet-button: This class is used to create an action sheet button.
- action-sheet-button–destructive: This class is used to create a destructive action sheet button like the “delete” button.
- action-sheet-mask–material: The container with this class is used to create a material action sheet mask.
- action-sheet–material: The container with this class is used to create a material action sheet.
- action-sheet-icon–material: This class is used to create an icon button for the material action sheet in the <i> tag.
- action-sheet-button–material: This class is used to create a material action sheet button.
- action-sheet-title–material: The container with this class is used to create the material action sheet title.
Syntax:
<div class="action-sheet action-sheet--material">
<div class="action-sheet-title action-sheet-title--material">
....
</div>
<button class="action-sheet-button action-sheet-button--material">
<i class="... action-sheet-icon--material"></i>
....
</button>
...
</div> Example 1: The following example demonstrates the implementation of the Onsen UI Action sheet components classes.
<!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=
<title>
GeeksforGeeks | Onsen UI CSS
</title>
</head>
<body>
<center>
<h2 style="color:green">GeeksforGeeks</h2>
<strong>
Onsen UI Action sheet CSS Component
</strong>
<div class="action-sheet-mask"></div>
<div class="action-sheet">
<div class="action-sheet-title">
Action Sheet title comes here
</div>
<button class="action-sheet-button">
Enter Label
</button>
<button class=
"action-sheet-button action-sheet-button--destructive">
Delete this..
</button>
<button class="action-sheet-button">
Cancel this..
</button>
</div>
</center>
</body>
</html>
|
Output:
Example 2: The following example demonstrates the use of the Onsen UI Material Action sheet components classes. Some square and close icons are used along with the material action sheet buttons using the required classes of Onsen UI material action sheet and <i> tag. Refer to the output for better understanding.
<!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=
<title>
GeeksforGeeks | Onsen UI CSS
</title>
</head>
<body>
<center>
<h2 style="color:green">
GeeksforGeeks
</h2>
<strong>
Onsen UI Material Action sheet CSS Component
</strong>
<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">
Material action sheet title comes here
</div>
<button class=
"action-sheet-button action-sheet-button--material">
<i class="ion-ios-square action-sheet-icon--material"></i>
My Label
</button>
<button class=
"action-sheet-button action-sheet-button--material">
<i class="ion-ios-close action-sheet-icon--material"></i>
Cancel this
</button>
</div>
</center>
</body>
</html>
|
Output:
Reference: https://onsen.io/v2/api/css.html#action-sheet-category