Guia de início rápido: adicionando um submenu (HTML)
[ 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.
|
|
.png "Um submenu no estilo claro")
.png "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;
}
.png "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.