Onsen UI CSS se utiliza para crear hermosos componentes HTML. Es una de las formas más eficientes de crear componentes híbridos HTML5 que son compatibles con dispositivos móviles y de escritorio.
En este artículo, vamos a implementar la hoja de acción básica del componente CSS de la interfaz de usuario de Onsen . Las hojas de acción se utilizan para diferentes acciones como una ventana emergente. La hoja de acción tiene una máscara de fondo para resaltar la hoja de acción. La hoja de acción básica tiene un fondo oscuro pero transparente.
Clases de hoja de acción básica del componente CSS de la interfaz de usuario de Onsen:
- action-sheet: El contenedor con esta clase es la hoja de acción.
- action-sheet-mask: La clase se usa para desenfocar y oscurecer el fondo.
- action-sheet-button: esta clase se utiliza para crear botones para la hoja de acción.
Sintaxis : cree una hoja de acción básica de la siguiente manera:
<div class="action-sheet-mask"></div>
<div class="action-sheet">
<button class="action-sheet-button">
<i class="ion-ios-link"></i>
Submit
</button>
</div>
Ejemplo 1: En el siguiente ejemplo, tenemos una hoja de acción básica con botones.
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=
"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>
<style>
#heading {
color: green;
}
#title {
font-style: bold;
}
</style>
</head>
<body>
<center>
<h1 id="heading">GeeksforGeeks</h1>
<strong id="title">
Onsen UI CSS Component Basic Action Sheet
</strong>
<br /><br />
</center>
<div class="action-sheet-mask"></div>
<div class="action-sheet">
<button class="action-sheet-button">
<i class="ion-ios-link"></i>
Submit
</button>
<button class="action-sheet-button">
<i class="ion-ios-close"></i>
Close
</button>
<button class="action-sheet-button">
<i class="ion-ios-trash"></i>
Delete
</button>
</div>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, tenemos una hoja de acción básica que se puede abrir y cerrar con la ayuda de botones.
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=
"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>
<style>
#heading {
color: green;
}
#title {
font-style: bold;
}
</style>
</head>
<body>
<center>
<h1 id="heading">GeeksforGeeks</h1>
<strong id="title">
Onsen UI CSS Component Basic Action Sheet
</strong>
<br />
<br />
<button class="button" onclick="openSheet()">
Open Basic Action Sheet
</button>
</center>
<div class="gfg-action action-sheet-mask"></div>
<div class="gfg-action action-sheet">
<button class="action-sheet-button">
<i class="ion-ios-link"></i>
Submit
</button>
<button onclick="closeSheet()"
class="action-sheet-button">
<i class="ion-ios-close"></i>
Close
</button>
</div>
<script>
function openSheet() {
$('.gfg-action ').show()
}
function closeSheet() {
$('.gfg-action ').hide()
}
closeSheet()
</script>
</body>
</html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#action-sheet-category
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA