Onsen UI Dialog CSS Component Material Alert Dialog
Last Updated :
22 Jun, 2022
Onsen UI is an HTML5 framework that allows you to design distinctive and usable user interfaces for free (UI). It also makes UI creation easier, enabling programmers to focus on the core of the product. Onsen UI is a complex set of user interface components designed specifically for mobile apps, with ready-to-use features that follow native iOS and Android design standards. Onsen UI was created with AngularJS in mind, but it can also be used with jQuery or any other framework. Onsen UI is a PhoneGap and Cordova JavaScript Framework.
Onsen UI provides the pre-built CSS components for fast designing versatile and appealing user interface layouts. Onsen CSS Components is a web-based Topcoat theme roller for mobile developers that makes creating beautiful UIs easier.
Alert Dialog is used to display some warning messages with pop-ups on the webpage. Material Alert Dialog utilizes the various CSS components to create an attractive user interface which helps to enhance the overall user experience.
Onsen UI Dialog CSS Component Material Alert Dialog Classes:
- alert-dialog: This encloses all the elements which will be considered as the dialog for giving alerts.
- alert-dialog–material: This encloses all the elements which will be considered as the dialog for giving alerts and it is in material style design.
- alert-dialog-container: This encloses the container which will be considered as the container holding the dialog for giving alerts.
- alert-dialog-container–material: This encloses the container which will be considered as the container holding the dialog for giving alerts and it is material design style.
- alert-dialog-title: This holds the title for the alert dialog.
- alert-dialog-title–material: This holds the title for the alert dialog and specifies it in material design style.
- alert-dialog-content: This holds the description of the alert.
- alert-dialog-content–material: This holds the description of the alert and specifies it is in material type design style.
- alert-dialog-footer: This holds the footer of the alert. It might have buttons or some important text.
- alert-dialog-footer–material: This holds the footer of the alert. It might have buttons or some important text and it is a material-type design style.
- alert-dialog-button: This class is used to add buttons in an alert dialog.
- alert-dialog-button–material: This class is used to add buttons in an alert dialog and specifies it is in material type design style.
- alert-dialog-mask: This adds a mask over the whole page around that alert dialog.
- alert-dialog-mask–material: This adds a mask over the whole page around that alert dialog in material type design style.
Syntax:
<div class="alert-dialog-mask alert-dialog-mask--material"></div>
<div class="alert-dialog alert-dialog--material">
<div class="alert-dialog-container alert-dialog-container--material">
<div class="alert-dialog-title alert-dialog-title--material">
...
</div>
<div class="alert-dialog-content alert-dialog-content--material">
...
</div>
<div class="alert-dialog-footer alert-dialog-footer--material">
<button class="alert-dialog-button alert-dialog-button--material">
...
</button>
</div>
</div>
</div>
Example 1: The below code example demonstrates an alert dialog as a CSS component.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</head>
<body>
<div style="margin: 3rem;
font-family: Roboto, sans-serif;">
<h1 style="color: green;">GeeksforGeeks</h1>
<h3 style="margin-top: -1.5rem;">
Onsen UI Dialog CSS Component Material Alert Dialog
</h3>
</div>
<div class="alert-dialog-mask alert-dialog-mask--material"></div>
<div class="alert-dialog
alert-dialog--material">
<div class="alert-dialog-container
alert-dialog-container--material">
<div class="alert-dialog-title
alert-dialog-title--material">
Hi Geek
</div>
<div class="alert-dialog-content
alert-dialog-content--material">
This is a alert.
</div>
<div class="alert-dialog-footer
alert-dialog-footer--material">
<button class="alert-dialog-button
alert-dialog-button--material">OK
</button>
<button class="alert-dialog-button
alert-dialog-button--material">CANCEL
</button>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: The below example demonstrates how we can add other CSS components to the alert dialog.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</head>
<body>
<div style="margin: 3rem;
font-family: Roboto, sans-serif;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3 style="margin-top: -1.5rem;">
Onsen UI Dialog CSS Component Material Alert Dialog
</h3>
</div>
<div class="alert-dialog-mask
alert-dialog-mask--material">
</div>
<div class="alert-dialog
alert-dialog--material">
<div class="alert-dialog-container
alert-dialog-container--material">
<div class="alert-dialog-title
alert-dialog-title--material">
Hi Geek
</div>
<div class="alert-dialog-content
alert-dialog-content--material">
You want to study from GFG?
</div>
<div class="alert-dialog-footer
alert-dialog-footer--material">
<label class="switch switch--material"
style="float: right;
margin-right: 2rem">
<input type="checkbox"
class="switch__input
switch--material__input">
<div class="switch__toggle
switch--material__toggle">
<div class="switch__handle
switch--material__handle">
</div>
</div>
</label>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://onsen.io/v2/api/css.html#alert-dialog-category
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...