Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Inicio rápido: Agregar un control flotante (aplicaciones de la Tienda Windows con JavaScript y HTML)

En este inicio rápido se explica cómo crear y aplicar estilo a un control flotante.

Requisitos previos

Compilación de tu primera aplicación de la Tienda Windows con JavaScript

Directrices y listas de comprobación para controles flotantes

1. Crear un control flotante

En este ejemplo, cuando el usuario presiona el botón Buy (Comprar), aparece un control flotante sobre el botón. Un control flotante es un control de la Biblioteca de Windows para JavaScript, WinJS.UI.Flyout, y debe ser el elemento secundario directo del elemento <body>.


<body>
    <!-- Button that launches the confirmation Flyout. -->
    <button class="action" id="buyButton">Buy</button>

    <!-- Confirmation Flyout. -->
    <div id="confirmFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Confirm purchase flyout}">
        <div>Your account will be charged $252.</div>
        <button id="confirmButton">Complete Order</button>
    </div>
<body>



// Initialize WinJS controls.
WinJS.UI.processAll();

// Initialize event listeners.
document.getElementById("buyButton").addEventListener("click", showConfirmFlyout, false);
document.getElementById("confirmButton").addEventListener("click", confirmOrder, false);

// Command and Flyout functions.
function showConfirmFlyout() {
    showFlyout(confirmFlyout, buyButton, "top");
}
function showFlyout(flyout, anchor, placement) {
    flyout.winControl.show(anchor, placement);
}
function confirmOrder() {
    document.getElementById("confirmFlyout").winControl.hide();
}


2. Aplicar estilo al control flotante

Puedes mantener el estilo estándar de los temas de interfaz de usuario claros y oscuros, que se muestran aquí, o personalizar el estilo, como veremos a continuación.

Hh465354.flyout_light_default(es-ar,WIN.10).png

Hh465354.flyout_dark_default(es-ar,WIN.10).png

 

Hay una cantidad de propiedades CSS para controles flotantes que puedes personalizar.

PropiedadEjemplo

Font-family

Controla la fuente del texto

font-family:'Segoe UI';

Font-size

Controla el tamaño del texto

font-size:9pt;

Color

Controla los colores del texto

color:rgb(0, 0, 0);

Background-color

Controla el color de fondo del tipo de letra

background-color:rgb(255, 255, 255);

Border

Controla el grosor, el color y el estilo de línea del borde

border:2px solid rgb(128, 128, 128);

Max-width

Controla el ancho máximo del cuadro

max-width:400px;

 

Este ejemplo procede de la Muestra de control flotante y depende principalmente del estilo predeterminado.


    /* Flyout title. */
    .win-flyout:not(.win-menu) .win-type-x-large
    {
        font-weight: 300;
        margin-top: -13px;
        padding-bottom: 18px;
    }

    /* Flyout buttons. */
    .win-flyout:not(.win-menu) button,
    .win-flyout:not(.win-menu) input[type="button"]
    {
        margin-top: 16px;
        margin-left: 20px;
        float: right;
    }


Este ejemplo se adentra aún más con los elementos visuales más obvios, pero resulta bastante feo.


    /* Flyout with attent-getting colors. */
    .win-flyout
    {
        background-color: yellow;
        border-color: red;
        color: green;
    }



Hh465354.flyout_styled(es-ar,WIN.10).png

Resumen

En este inicio rápido has creado un control flotante y le has aplicado estilo en respuesta a una acción del usuario.

Temas relacionados

Muestra de control flotante
WinJS.UI.Flyout

 

 

Mostrar:
© 2018 Microsoft