Inicio rápido: agregar un control flotante (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]
En este inicio rápido se explica cómo crear control flotante y aplicarle estilo. (solo Windows)
Requisitos previos
Compilación de tu primera aplicación de la Tienda Windows con JavaScript
Directrices y lista de comprobación de 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.
|
|
.png "Un control flotante en el estilo claro")
.png "Un control flotante en el estilo oscuro")
Existe una serie de propiedades CSS para controles flotantes que puedes personalizar.
| Propiedad | Ejemplo |
|---|---|
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 HTML 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;
}
.png "Un control flotante con estilo")
Resumen
En este inicio rápido has creado un control flotante y le has aplicado estilo en respuesta a una acción del usuario.