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 material 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 material aparece en la parte inferior de la pantalla.
Onsen UI CSS Component Material Hoja de acción clases:
- 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-mask–material : Esta máscara se usa para hacer su tipo de material.
- action-sheet–material: Esta clase se utiliza para hacer hojas de acción de tipo material.
- action-sheet-button: esta clase se utiliza para crear botones para la hoja de acción.
- action-sheet-button–material: Esta clase se utiliza para hacer botones de acción de tipo material.
Sintaxis: Cree una hoja de acción material de la siguiente manera:
<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>
Ejemplo 1: En este ejemplo, tenemos una hoja de acción material 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 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>
Producción:
Ejemplo 2 : en el siguiente ejemplo, tenemos un botón para abrir la hoja de acción y luego cerrarla usando los botones de acción de material.
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 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>
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