Guia de início rápido: adicionando um submenu (HTML)

Artigo
03/04/2016

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Este Guia de início rápido explica como criar e definir estilos de um submenu. (Somente Windows)

Pré-requisitos

Compilando o seu primeiro aplicativo da Windows Store em JavaScript

Diretrizes e lista de verificação de submenus

1. Crie um submenu

Neste exemplo, quando o usuário pressiona o botão Comprar, um submenu aparece acima do botão. Um submenu é um controle na Biblioteca do Windows para JavaScript, WinJS.UI.Flyout, e deve ser o filho direto do 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. Defina o estilo do submenu

Você pode manter os estilos padrão dos temas claro e escuro da interface do usuário, mostrados aqui, ou pode personalizar os estilos, como mostraremos a seguir.

Um submenu no estilo claro

Um submenu no estilo escuro

Há várias propriedades CSS para submenus que você pode personalizar.

Propriedade	Exemplo
Font-family Controla a fonte do texto	`font-family:'Segoe UI';`
Font-size Controla o tamanho do texto	`font-size:9pt;`
Color Controla a cor do texto	`color:rgb(0, 0, 0);`
Background-color Controla a cor da tela de fundo da face	`background-color:rgb(255, 255, 255);`
Border Controla a espessura, cor e estilo de linha da borda	`border:2px solid rgb(128, 128, 128);`
Max-width Controla a largura máxima da caixa	`max-width:400px;`

Este exemplo é do controle de submenu HTML e depende primariamente do estilo padrão.

    /* 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;
    }

Esse exemplo vai um pouco além dos elementos visuais mais óbvios, mas é bem feio.

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

Um submenu com estilo

Resumo

Neste Guia de início rápido, você criou e definiu o estilo de um submenu em resposta a uma ação do usuário.

Tópicos relacionados

WinJS.UI.Flyout

Amostra de controle de submenu em HTML

Compartilhar via