Share via

Definindo o estilo de AppBars e ToolBars (HTML)

  • Artigo

[ 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 ]

Fornece exemplos de como definir o estilo de uma AppBar ou ToolBar e seus controles.

Pré-requisitos

Introdução

O Guia de início rápido: Definindo o estilo de controles explica como as folhas de estilos da Biblioteca do Windows para JavaScript fornecem um conjunto de estilos que deixa seu aplicativo com a aparência do Windows 10 automaticamente. Os exemplos a seguir demonstram o uso de CSS (folhas de estilos em cascata) para personalizar alguns estilos de AppBar.

Temas claro e escuro

Quando você escolhe a folha de estilos clara ou escura para seu aplicativo, isso afeta a aparência da AppBar e dos demais controles do aplicativo. Neste exemplo de AppBar:

<div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}">
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdAdd',disabled:'true',label:'Add',icon:'add',tooltip:'Add item',section:'primary',type:'flyout',
          flyout:select('#addFlyout'),onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',tooltip:'Remove item',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdEdit',label:'Edit',icon:'edit',tooltip:'Edit item',section:'primary',onclick:Sample.outputCommand}">
          </button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',tooltip:'Take a picture',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdSettings',label:'Settings',icon:'settings',tooltip:'Settings',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdShare',label:'Share',icon:'reshare',tooltip:'Share',section:'primary',onclick:Sample.outputCommand}">
          </button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdPrint',label:'Print',section:'secondary',onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdNetwork',label:'Network',section:'secondary',onclick:Sample.outputCommand}"></button>
    </div>

Para escolher a folha de estilos escura:

<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">

Que cria uma AppBar com esta aparência:

Barra de aplicativos com estilo escuro

Ou para escolher a folha de estilos clara:

<link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">

Que cria uma AppBar com esta aparência:

Barra de aplicativos com estilo claro

A ToolBar terá uma aparência semelhante usando as mesmas folhas de estilo.

Propriedades CSS úteis

As seguintes propriedades CSS costumam ser utilizadas com os controles da AppBar e da ToolBar:

  • Cor da borda: Controla a cor da borda da AppBar.

    Por exemplo, cor da borda: rgb(255, 224, 100);

  • Cor da tela de fundo: Controla a cor da tela de fundo da AppBar.

    Por exemplo, cor da tela de fundo: rgb(255, 224, 100);

Observação  Esses valores são normalmente predefinidos por ui-light.css ou ui-dark.css.

 

Seletores de partes e estados comuns

Veja alguns seletores CSS úteis para a definição do estilo de partes e estados do seu controle:

  • .win-command define o estilo do rótulo do comando da AppBar:

    .win-appbar .win-command
{
    color: rgb(28, 160, 218);
}

    Botões com rótulos de comando coloridos

    Observação  O usuário deve tocar ou clicar nas reticências para abrir a AppBar e ver esse efeito. Rótulos de comandos estão ocultos por padrão.

     

  • .win-commandimage define o estilo da imagem do ícone do botão:

    .win-appbar .win-commandimage
{
    color: rgb(28, 160, 218);
}

    Botões com ícones de comando coloridos

Pseudoclasses

Você pode usar as seguintes Pseudoclasses como seletores para definir o estilo dos botões da AppBar, quando estão em determinados estados:

  • :hover — O usuário coloca o cursor sobre o ícone do botão e não o ativa clicando, alterando a cor de plano de fundo do botão até que o cursor saia dele. Uma dica de ferramenta para o botão também é exibida por padrão durante a focalização.

    Dica de ferramenta sobre o botão Página Inicial durante a focalização

  • :active — O botão é ativado entre o momento em que o usuário pressiona o controle e escolhe uma opção ou se o botão for configurado para type="toggle".

    Botão Ativar Câmera

  • :disabled — A mudança de cor do ícone indica que o botão não pode aceitar a interação do usuário. A propriedade desabilitada do botão deve ser definida como "disabled" para essa pseudoclasse ser aplicada.

    Botão Página Inicial desabilitado

Definindo o estilo de uma AppBar com cores personalizadas

Veja mais um exemplo de definição de estilo de uma AppBar:

.win-appbar .win-appbar-actionarea
{
   background-color: yellow;
}


.win-appbar .win-commandimage
{
    color: red;
}

cria as seguintes cores de AppBar:

Barra de aplicativos amarela

A definição do estilo da cor do plano de fundo da área de excedentes teria esta aparência:

.win-appbar .win-appbar-overflowarea
{
   background-color: green;
}

E a definição do estilo de uma ToolBar da mesma maneira teria esta aparência:

.win-toolbar win-toolbar-overflowarea{
   background-color: green;
}

.win-toolbar .win-commandimage
{
    color: red;
}

.win-toolbar win-toolbar-overflowarea
{
   background-color: green;
}

Estilos que devem ser evitados

É possível usar CSS para mudar a aparência de AppBars e de ToolBars. Isso serve especialmente para o funcionamento adequado de animações da AppBar e da ToolBar. Veja as áreas de risco conhecidas:

  • padding — Não altere os padrões.

  • border — Não altere os padrões.

  • margin — Defina o estilo das margens uniformemente, mas somente nos elementos da ToolBar e da AppBar:

    .win-toolbar, .win-appbar {
   margin: 3px;
}

  • background-color — A definição do estilo pode ser feita com segurança em áreas de ação e em áreas excedentes:

    .win-toolbar-actionarea, .win-appbar-actionarea {
   background-color: rgb(0,0,127);
}
.win-toolbar-overflowarea, .win-appbar-overflowarea {
   background-color: rgb(0,0,255);

  • position,  float — Não defina o estilo desses atributos CSS no elemento da ToolBar diretamente, mas você pode encapsular a ToolBar em um elemento pai que defina essas regras de estilo. Observação  Essa restrição não se aplica à AppBar.

     

Problemas conhecidos

  1. Ocultando a ToolBar — o componente da ToolBar só deve ficar oculto usando-se APIs públicas. Embora seja prática comum usar uma classe CSS "umbrella" para ocultar vários componentes do modo de exibição, isso não é uma prática recomendável para a ToolBar (ou a AppBar). O problema é que a ToolBar teve o desempenho otimizado para armazenar em cache o estado dos seus comandos, em vez de depender do DOM para informar se um comando está visível ou não. Isso permite que a ToolBar seja adaptável e estoure comandos quando eles não couberem na área ativa disponível, ao mesmo tempo evitando layouts de navegador dispendiosos que ocorrem quando você lê do DOM. Usar CSS para definir o estilo de botões como ocultos significa que a ToolBar não reconhecerá que algum comando foi oculto e iniciará o estouro de comandos muito cedo, já que o espaço disponível na área ativa da ToolBar diminui durante o redimensionamento de janela.

    Em vez disso, você só deve definir a propriedade Command.hidden ou chamar o método ToolBar.showOnlyCommands() para mostrar e ocultar comandos na ToolBar.

  2. Falha de estouro adaptável — o comportamento de estouro adaptável da ToolBar não funciona bem quando o elemento ToolBar é criado para "acomodar o conteúdo".

    Por exemplo, o componente da ToolBar foi projetado para existir dentro de outros componentes (normalmente aninhado dentro de outro elemento div). Normalmente, dentro de seu próprio div, a ToolBar ocupará 100% da largura do elemento pai. Mas, se o layout CSS usado pelo elemento pai o tiver aninhado dentro de algumas caixas flexíveis e a classe personalizada transportcontrols do pai estiver usando align-items:center; a fim de espremer a ToolBar para ser apenas da largura de seus comandos, haverá um comportamento inesperado. Isso ocorre porque a ToolBar armazena em cache sua width e tenta estourar os comandos quando acha que ele não há espaço suficiente para eles. A ToolBar requer uma largura de elemento constante, mas os estilos usados neste cenário estão dando uma largura flexível.

    A solução alternativa para esse cenário (mesmo em combinação com a solução de Ocultando a ToolBar) envolve alterar a classe personalizada pai transportcontrols para usar align-items:stretch;. Testes mostraram que isso é uma solução simples, mas se você não puder fazer a mudança para align-items por algum motivo, poderá obter o resultado final colocando align-self:stretch no elemento da ToolBar diretamente.

Resumo e próximas etapas

Neste artigo, mostramos alguns exemplos de definição de estilo de uma AppBar e de uma ToolBar e seus controles. Também fornecemos informações sobre algumas questões de design para que você possa evitar problemas usando AppBars e ToolBars em seu aplicativo.

Saiba mais — de modo prático — sobre como definir estilos de AppBars e ToolBars no site Experimente o WinJS. Experimente o código e veja imediatamente os resultados.

Tópicos relacionados

WinJS.UI.ToolBar

WinJS.UI.AppBar

WinJS.UI.AppBarCommand

AppBarIcon