Hoja de acción del componente CSS de la interfaz de usuario de Onsen con etiqueta de eliminación

Posted on by Rudeus Greyrat

Onsen UI es un marco HTML5 gratuito de código abierto que le permite crear interfaces de usuario (UI) únicas y utilizables. También simplifica el desarrollo de la interfaz de usuario, lo que permite a los programadores concentrarse en la funcionalidad del programa. Onsen UI es un conjunto sofisticado de componentes de interfaz de usuario creados exclusivamente para aplicaciones móviles y repleto de funciones listas para usar que se adhieren a los estándares de diseño nativos de iOS y Android. La interfaz de usuario de Onsen se diseñó para funcionar con AngularJS, pero también se puede usar con jQuery o cualquier otro marco. Onsen UI es un marco de JavaScript para PhoneGap y Cordova.

Los componentes CSS de la interfaz de usuario de Onsen son componentes CSS preconstruidos que se pueden usar para crear rápidamente diseños de interfaz de usuario adaptables y atractivos. Onsen CSS Components es un rodillo temático Topcoat basado en la web para desarrolladores móviles que hace que la creación de interfaces de usuario atractivas sea fácil.

Las hojas de acción son ventanas emergentes de abajo hacia arriba que muestran las muchas actividades que podemos hacer. Aparece cuando el usuario selecciona un elemento o presiona un botón, o cuando el usuario está a punto de realizar una acción. La etiqueta Eliminar se puede usar para indicar una etiqueta/botón que tendrá la funcionalidad de eliminar una etiqueta ya agregada. Aunque la interfaz de usuario de Onsen no puede agregar ninguna funcionalidad, como eliminar realmente cualquier etiqueta especificada en la etiqueta eliminada. Necesitamos agregar esa funcionalidad a la etiqueta/botón a través de algún lenguaje de secuencias de comandos del lado del servidor como JavaScript.

Hoja de acción del componente CSS de la interfaz de usuario de Onsen con clases de etiqueta de eliminación:

  • action-sheet-mask: esta clase se utiliza para enmascarar el fondo cuando la hoja de acción está abierta.
  • action-sheet: Esta clase se utiliza para indicar el contenedor que será la hoja de acción. 
  • action-sheet-button: Esta clase se utiliza para crear los botones/etiquetas para la hoja de acción. 
  • action-sheet-button–destructive: esta clase se usa para agregar un botón o etiqueta que se usará para indicar la etiqueta eliminada. No agrega ninguna funcionalidad a esa etiqueta, solo cambia el color de la fuente a rojo. 

Sintaxis:

<div class="action-sheet-mask"></div>
<div class="action-sheet">
    <button class="action-sheet-button">
        . . .
    </button>
    <button class="action-sheet-button 
     action-sheet-button--destructive">
        . . .
    </button>
</div>

Ejemplo 1: El siguiente ejemplo de código se usa para mostrar que podemos agregar la etiqueta eliminada a la hoja de acción.

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>
        <strong style="font-style: bold;">
            Onsen UI CSS Component Action Sheet 
            with Delete Label
        </strong>
        <button class="button" 
                onclick="showSheet()">
            Open Action Sheet with Delete Label
        </button>
    </center>
  
    <div class="gfg-sheet action-sheet-mask"></div>
    <div class="gfg-sheet action-sheet">
        <button class="action-sheet-button">
            <i class="ion-ios-globe"></i>
            <a target="_blank" href=
                "http://geeksforgeeks.org">
                Go to GfG HomePage
            </a>
        </button>
        <button class="action-sheet-button 
                action-sheet-button--destructive">
            <i class="ion-ios-trash"></i>
                Delete Label
        </button>
        <button onclick="closeSheet()"
            class="action-sheet-button">
            <i class="ion-ios-close"></i>
            Close
        </button>
    </div>
  
    <script>
        $('.button').hide()
        function closeSheet() {
            $('.gfg-sheet').hide()
            $('.button').show()
        }
        function showSheet() {
            $('.gfg-sheet').show()
            $('.button').hide()
        }
    </script>
</body>
</html>

Producción:

 

Ejemplo 2: en el siguiente ejemplo de código, hemos demostrado el uso de JavaScript para implementar la función de eliminación de etiquetas en la etiqueta eliminada. 

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>
        <strong style="font-style: bold;">
            Onsen UI CSS Component Action Sheet 
            with Delete Label
        </strong>
        <br />
        <br />
        <button class="button" 
                onclick="showSheet()">
            Open Action Sheet with Delete Label
        </button>
    </center>
  
    <div class="gfg-sheet action-sheet-mask"></div>
    <div class="gfg-sheet action-sheet">
        <button class="action-sheet-button label1">
            <i class="ion-ios-globe"></i>
            <a target="_blank" href=
                "http://geeksforgeeks.org">
                Go to GfG HomePage
            </a>
        </button>
        <button onclick="deleteLabel1()"
        class="action-sheet-button 
               action-sheet-button--destructive deleteL1">
            <i class="ion-ios-trash"></i>
                Delete First Label
        </button>
        <button class="action-sheet-button">
            <i class="ion-ios-globe"></i>
            <a target="_blank" href=
"https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=shm">
                Go to the GfG Algorithms Page
            </a>
        </button>
        <button onclick="deleteLabel2()"
                class="action-sheet-button 
                       action-sheet-button--destructive deleteL2">
            <i class="ion-ios-trash"></i>
                Delete Second Label
        </button>
        <button onclick="closeSheet()"
                class="action-sheet-button">
            <i class="ion-ios-close"></i>
            Close
        </button>
    </div>
  
    <script>
        $('.button').hide()
        function closeSheet() {
            $('.gfg-sheet').hide()
            $('.button').show()
        }
        function showSheet() {
            $('.gfg-sheet').show()
            $('.button').hide()
        }
        function deleteLabel1() {
            $('.label1').hide()
            $('.deleteL1').hide()
        }
    </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 priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *