Onsen UI es un marco HTML5 gratuito de código abierto que le permite diseñar interfaces de usuario originales y funcionales (UI). También facilita la creación de la interfaz de usuario, liberando a los programadores para que se concentren en la funcionalidad de la aplicación. Con una gran cantidad de funciones listas para usar que siguen los estándares de diseño nativos de iOS y Android, la interfaz de usuario de Onsen es una colección integral de elementos de interfaz de usuario creados específicamente para aplicaciones móviles. La interfaz de usuario de Onsen se puede usar con cualquier otro marco, incluido jQuery, aunque se creó para funcionar con AngularJS. Para PhoneGap y Cordova, la interfaz de usuario de Onsen es un marco de JavaScript.
Componentes CSS para desarrolladores.
Un modal básico es un tipo de ventana emergente que se puede usar para mostrar información o mostrar un mensaje. Se utiliza principalmente para dar retroalimentación sobre la actividad del usuario.
Clases modales básicas del componente CSS de la interfaz de usuario de Onsen:
- modal: esta clase se agrega al contenedor que contiene el modal.
- modal__content: esta clase se agrega al contenedor que encierra todo el contenido del modal.
Sintaxis :
<div class="modal">
<div class="modal__content">
Modal's Content
</div>
</div>
Ejemplo 1: El siguiente ejemplo demuestra cómo agregar un modal básico a una página web utilizando la interfaz de usuario de Onsen.
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= "https://unpkg.com/onsenui/css/onsenui.css" /> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsen-css-components.min.css" /> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3 style="font-style: bold;"> Onsen UI CSS Component Basic Modal </h3> <br> </center> <div class="modal"> <div class="modal__content"> <div style="height: 200px; width: 600px; margin-left: 3.5rem;"> <div class="card"> <h2 class="card__title" style="color: green; text-align: center;"> GeeksforGeeks </h2> <div class="card__content"> A Computer Science portal for geeks. Gain and share your knowledge & skills with a variety of learning platforms offe red by GeeksforGeeks. Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing. We provide a variety of services for you to learn, thrive and also have fun! </div> </div> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: en el ejemplo, se usa una lógica de JavaScript simple para crear un botón que abrirá o cerrará el modal.
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=
"https://unpkg.com/onsenui/css/onsenui.css" />
<link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" />
<script src=
"https://unpkg.com/onsenui/js/onsenui.min.js">
</script>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3 style="font-style: bold;">
Onsen UI CSS Component Basic Modal
</h3>
<br>
<button class="button"
onclick="showModal()">
Open the modal.
</button>
</center>
<div class="modal">
<div class="modal__content">
<div style="height: 200px;
width: 600px;
margin-left: 5.5rem;">
<div class="card">
<h2 class="card__title"
style="color: green;
text-align: center;">
GeeksforGeeks
</h2>
<div class="card__content">
A Computer Science portal for geeks.
Gain and share your knowledge & skills
with a variety of learning platforms offered
by GeeksforGeeks. Billions of Users, Millions
of Articles Published, Thousands Got Hired by
Top Companies and the numbers are still growing.
We provide a variety of services for you to
learn, thrive and also have fun!
</div>
<button onclick="closeModal()"
class="action-sheet-button">
<i class="ion-ios-close"></i>
Close
</button>
</div>
</div>
</div>
</div>
<script>
$('.button').hide()
function closeModal() {
$('.modal').hide()
$('.button').show()
}
function showModal() {
$('.modal').show()
$('.button').hide()
}
</script>
</body>
</html>
Producción
Referencia: https://onsen.io/v2/api/css.html#modal-category
Publicación traducida automáticamente
Artículo escrito por triashabiswas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA