Componentes CSS de la hoja de acción de la interfaz de usuario de Onsen

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, aprenderemos sobre los componentes CSS de la hoja de acción de la interfaz de usuario de Onsen, sus clases y algunas implementaciones de la hoja de acción.

La hoja de acción se muestra en la parte superior de la pantalla actual. Este elemento puede adjuntarse directamente al <cuerpo> o crearse dinámicamente a partir de una plantilla utilizando alguna función de utilidad. Este componente generalmente muestra la lista de acciones o las acciones requeridas que deben realizarse para realizar la tarea específica.

Clases de componentes CSS de la hoja de acción de la interfaz de usuario de Onsen:

action-sheet-mask: El contenedor con esta clase se utiliza para crear una máscara de hoja de acción.
action-sheet: El contenedor con esta clase se utiliza para crear una hoja de acción.
action-sheet-title: El contenedor con esta clase se utiliza para crear el título de la hoja de acción del documento.
action-sheet-button: esta clase se utiliza para crear un botón de hoja de acción.
action-sheet-button–destructive: esta clase se utiliza para crear un botón de hoja de acción destructivo como el botón «eliminar».
action-sheet-mask–material: El contenedor con esta clase se utiliza para crear una máscara de hoja de acción de material.
action-sheet–material: El contenedor con esta clase se utiliza para crear una hoja de acción de material.
action-sheet-icon–material: esta clase se utiliza para crear un botón de icono para la hoja de acción de material en la etiqueta <i> .
action-sheet-button–material: esta clase se utiliza para crear un botón de hoja de acción de material.
action-sheet-title–material: El contenedor con esta clase se utiliza para crear el título de la hoja de acción del material.

Sintaxis:

<div class="action-sheet action-sheet--material">
    <div class="action-sheet-title action-sheet-title--material">
         ....
    </div>
    <button class="action-sheet-button action-sheet-button--material">
         <i class="... action-sheet-icon--material"></i>
          ....
    </button>
    ...        
</div>

Ejemplo 1: El siguiente ejemplo demuestra la implementación de las clases de componentes de la hoja de acción de 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" />
    <title>
        GeeksforGeeks | Onsen UI CSS
    </title>
</head>
 
<body>
    <center>
        <h2 style="color:green">GeeksforGeeks</h2>
        <strong>
            Onsen UI Action sheet CSS Component
        </strong>
        <div class="action-sheet-mask"></div>
        <div class="action-sheet">
            <div class="action-sheet-title">
                Action Sheet title comes here
            </div>
            <button class="action-sheet-button">
                Enter Label
            </button>
            <button class=
            "action-sheet-button action-sheet-button--destructive">
                Delete this..
            </button>
            <button class="action-sheet-button">
                Cancel this..
            </button>
        </div>
    </center>
</body>
</html>

Producción:

Ejemplo 2: El siguiente ejemplo demuestra el uso de las clases de componentes de la hoja de acción material de la interfaz de usuario de Onsen. Algunos iconos cuadrados y cerrados se utilizan junto con los botones de la hoja de acción de material utilizando las clases requeridas de la hoja de acción de material de la interfaz de usuario de Onsen y la etiqueta <i> . Consulte la salida para una mejor comprensió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" />
    <title>
        GeeksforGeeks | Onesen UI CSS
    </title>
</head>
 
<body>
    <center>
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
            <strong>
                Onsen UI Material Action sheet CSS Component
            </strong>
        <div class="action-sheet-mask action-sheet-mask--material"></div>
        <div class="action-sheet action-sheet--material">
            <div class="action-sheet-title action-sheet-title--material">
                Material action sheet title comes here
            </div>
            <button class=
                "action-sheet-button action-sheet-button--material">
                    <i class="ion-ios-square action-sheet-icon--material"></i>
                        My Label
            </button>
            <button class=
                "action-sheet-button action-sheet-button--material">
                    <i class="ion-ios-close action-sheet-icon--material"></i>
                        Cancel this
            </button>
        </div>
    </center>
</body>
</html>

Producción:

Referencia: https://onsen.io/v2/api/css.html#action-sheet-category

Publicación traducida automáticamente

Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta