Início rápido: definindo o estilo de controles (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 ]

Para personalizar a aparência de controles do seu aplicativo do Tempo de Execução do Windows em JavaScript, você deve usar folhas de estilos em cascata (CSS), da mesma forma que seria feito para um site da Web. Os aplicativos da Windows Store em JavaScript também dão suporte a recursos avançados de definição de estilo de controle e a Biblioteca do Windows para JavaScript oferece um conjunto abrangente de estilos para que seja fácil deixar o seu aplicativo com a aparência do Windows 8.

Nós vamos mostrar como incluir a folha de estilos WinJS, personalizar o estilo dos controles HTML (também chamados de controles intrínsecos), personalizar o estilo dos controles WinJS e usar as classes de tipografia que fazem parte do WinJS.

Veja este recurso em ação como parte da nossa série sobre recursos para aplicativos, do início ao fim: Interface do usuário de aplicativo da Windows Store, do início ao fim

Pré-requisitos

Nós consideramos que você já saiba manipular eventos em um aplicativo do Tempo de Execução do Windows em JavaScript. Para aprender a forma recomendada de manipular eventos, consulte Guia de início rápido: adicionando controles HTML e manipulando eventos.
Nós presumimos que você já saiba criar e usar os controles WinJS. Para saber como fazer isso, veja Guia de início rápido: adicionando controles e estilos de WinJS.
Você deve ter familiaridade com CSS. (Para obter mais informações sobre CSS, consulte Noções básicas de HTML/CSS/JavaScript.)

Vantagens de usar as folhas de estilos da Biblioteca do Windows para JavaScript

As folhas de estilos WinJS oferecem:

Um conjunto de estilos que permitem que seus controles tenham ótima aparência e que funciona bem com exibições baseadas em toque.
Suporte automático para modos de alto contraste. Os nossos estilos foram criados com alto contraste em mente para que, quando executados em um dispositivo em modo de alto contraste, o seu aplicativo seja exibido corretamente.
Suporte automático para outros idiomas. As folhas de estilos WinJS selecionam automaticamente a fonte correta para cada idioma permitido no Windows 8. Você pode até mesmo usar vários idiomas no mesmo aplicativo, e eles serão exibidos corretamente.
Suporte automático para outros sentidos de leitura. Os controles, layouts e estilos HTML e WinJS são ajustados automaticamente para os idiomas que têm direção de leitura da direita para a esquerda.

Usando as folhas de estilos da Biblioteca do Windows para JavaScript mais recentes

Para habilitar as folhas de estilos do WinJS mais recentes:

Baixe a versão mais recente na página para baixar o WinJS (em inglês) e copie-a para o diretório para seu aplicativo ou site.
Adicione referências de script e CSS do WinJS a cada página do aplicativo ou site que usa os recursos WinJS.

Este exemplo mostra a aparência dessas referências para um aplicativo que tenha seus arquivos WinJS em seu diretório raiz.

    <!-- WinJS style sheets (include one) -->
    <link href="/WinJS/css/ui-dark.css" rel="stylesheet">
    <link href="/WinJS/css/ui-light.css" rel="stylesheet">

    <!-- WinJS code -->
    <script src="/WinJS/js/WinJS.js"></script>

O WinJS oferece duas folhas de estilos padrão que você pode usar para dar a aparência do Windows ao seu aplicativo: ui-dark.css e ui-light.css.

Para aplicativos que exibem, sobretudo, imagens ou vídeo, recomendamos o uso da folha de estilos escura.
Para aplicativos que contêm muito texto, recomendamos o uso da folha de estilos clara.

(Se você estiver usando um esquema de cores personalizado, use a folha de estilos que funciona melhor com a aparência do seu aplicativo.)

Estas folhas de estilos definem estes estilos:

Estilos base

Estilos de base Estilos para os elementos html, body e iframe.
Estilos de controle HTML intrínsecos

Os estilos de controles HTML intrínsecos, como button.
Classes de controle HTML intrínseco adicionais

As classes CSS que você pode atribuir a controles HTML intrínsecos para lhes dar uma aparência diferente. Para obter uma lista completa dessas classes, veja Classes CSS para controles HTML.
Estilos de controles WinJS

Classes CSS que representam as partes dos controles WinJS que podem ter seu estilo definido.
Estilos tipográficos

Estilos para elementos tipográficos, tais como elementos h1, dd e p.
Classes tipográficas adicionais

As classes CSS que você pode usar para aplicar estilo ao texto. Por exemplo, você pode usar a classe win-type-large para aumentar o texto do elemento.

Personalizado a aparência do seu aplicativo

Para personalizar a aparência de seu aplicativo, você não precisa descartar os estilos WinJS e recomeçar do zero. É fácil fazer alterações adicionais substituindo os estilos que você deseja alterar.

Na realidade, é melhor substituir os estilos WinJS do que criar os seus próprios. Quando o seu aplicativo é executado em modo de alto contraste, qualquer alteração das cores dos estilos padrão são automaticamente substituídas por um esquema de cores compatível com alto contraste.

Você pode substituir qualquer estilo na folha de estilos padrão criando a sua própria folha de estilos e incluindo-a após a folha de estilos WinJS:


<!-- The WinJS style sheet. -->
<link href="/WinJS/css/ui-dark.css" rel="stylesheet">

<!-- Your style sheet for overriding portions of the default style sheet. -->
<link href="/css/mystylesheet.css" rel="stylesheet" />

Como especificar cores

Você pode substituir as folhas de estilos WinJS ou especificar seus próprios estilos. Ao especificar os seus próprios estilos, é melhor usar as cores do sistema CSS, já que elas são automaticamente exibidas da forma correta quando o seu aplicativo está no modo de alto contraste. para uma lista de cores do sistema, consulte Cores do sistema definidas pelo usuário.

Se você não usa as Cores do sistema definidas pelo usuário e em vez de especificar um valor RGB, o que está correto, contanto que você substitua o estilo WinJS existente. Quando você substitui um estilo WinJS e o sistema alterna para o modo de alto contraste, as informações de cores personalizadas são ignoradas, e uma paleta compatível no modo de alto contraste é usada no lugar.

Definindo o estilo de controles HTML

Você pode definir o estilo de controles HTML (aqueles controles que fazem parte do padrão HTML5, tais como button, textarea e select) da mesma forma que você os personaliza em uma típica página HTML usando CSS. (Para saber mais sobre CSS e seu funcionamento, consulte Noções básicas de HTML/CSS/JavaScript. )

Por exemplo, para personalizar o estilo de uma caixa de entrada de texto de maneira que tenha 400 pixels de largura, você escreve o seguinte CSS:

input[type=text]
{
    width: 400px;
}

Um controle de entrada de texto

Um típico controle possui vários componentes ou subpartes. Por exemplo, o controle de entrada de texto no exemplo anterior possui duas partes: o valor de texto e o botão limpar.

Um controle de entrada de texto com componentes rotulados

Os aplicativos da Windows Store em JavaScript oferecem pseudoelementos CSS que permitem a definição das partes individuais de muitos controles. O pseudoelemento para o valor da entrada de texto é -ms-value e o pseudoelemento para o botão Limpar é -ms-clear.

Um controle de entrada de texto com valores

Para definir o estilo de uma parte de um controle, use a sintaxe:

element selector::part name { /* Seus estilos aqui */ }

Por exemplo, para definir o estilo do botão Limpar de uma caixa de entrada. você cria este estilo:

input[type=text]::-ms-clear
{
            border: 2px solid orange
}

Um controle de entrada de texto cujo botão limpar possui uma borda laranja

Você pode combinar seletores de pseudoelementos com outros seletores para selecionar um controle de destino com um nome ou ID de classe específico.

Por exemplo, para personalizar o botão Limpar de um controle de entrada de texto que usa a classe "orangeButton", você cria este estilo:

input[type=text].orangeButton::-ms-clear
{
            border: 2px solid orange
}

Para obter mais informações sobre as diferentes formas de combinação de pseudoelementos e outros seletores, consulte Noções básicas de seletores CSS.

Aqui estão as partes disponíveis para cada controle HTML.

Controle	Partes
input type=checkbox	-ms-check
input type=radio	-ms-check
input type=password	-ms-reveal
input type=range	-ms-fill-lower, -ms-fill-upper, -ms-thumb, -ms-track, -ms-ticks-after, -ms-ticks-before, -ms-tooltip
input type=email, input type=number, input type=password, input type=search, input type=tel, input type=url	-ms-value,-ms-clear
input type=file	-ms-value, -ms-browse
progress	-ms-fill
select	-ms-value, -ms-expand

Os elementos option do controle Select também permitem o estilo CSS para dar a você um controle preciso sobre a aparência dos itens suspensos, como os estilos de cor e fonte. Dessa forma, é possível editar cenários, como um controle de seletor de fonte, em que os usuários podem visualizar diferentes estilos de fonte em uma lista suspensa antes de escolher a fonte que vão utilizar.


<select id="fontNameSelect" onChange="formatText('fontName')">
    <option style="font-family:Arial;">Arial</option>
    <option style="font-family:Comic Sans MS;">Comic Sans MS</option>
    <option style="font-family:Courier New;">Courier New</option>
    <option style="font-family:Cursive;">Cursive</option>
    <option style="font-family:Segoe Script;">Segoe Script</option>
</select>

Usando as classes de controle HTML

A folha de estilos inclui classes CSS que você pode atribuir a controles HTML intrínsecos para lhes dar uma aparência diferente. Por exemplo, você pode usar a classe win-backbutton para fazer com que um botão padrão pareça um botão para navegar para trás.

<button class="win-backbutton"></button>

O uso da classe dá esta aparência a um botão:

Um botão que usa a classe CSS backbutton

Personalizado o estilo de controles da Biblioteca do Windows para JavaScript

Para definir o estilo de um controle WinJS, substitua as classes CSS WinJS do controle. Por exemplo, para personalizar o estilo de uma AppBar, substitua a classe win-appbar.

O exemplo a seguir cria um estilo que oculta o indicador de progresso de um ListView.

.win-listView .win-progress {
    display: none;
}

Para obter uma lista completa das classes disponíveis, consulte classes CSS WinJS. Para obter mais informações sobre as classes que um controle específico utiliza, consulte a página de referência para esse controle.

Alguns controles, como ListView e FlipView, também suportam modelos de itens. Modelos de itens lhe dão grande controle sobre a aparência e o conteúdo de itens de listas. Para obter mais informações, consulte Guia de início rápido: adicionando uma ListView e Guia de início rápido: adicionando uma FlipView.

Usando as classes tipográficas

A folha de estilos também contém classes CSS para tipografias que você pode aplicar a qualquer elemento que contenha texto. Por exemplo, você pode usar a classe win-title para dar a um título o estilo de títulos do Windows 8. Este exemplo usa as classes tipográficas para criar diferentes tipos de títulos.


     <p class="win-type-xx-large">win-type-xx-large</p>
     <p class="win-type-medium">win-type-medium</p>
     <p class="win-type-xx-small">win-type-xx-small</p>

Elementos que usam as classes tipográficas

Para obter uma lista completa dessas classes tipográficas, consulte Classes tipográficas CSS.

Exemplos

Para saber mais sobre personalização de estilos, cheque as seguintes amostras:

Resumo

Você aprendeu a usar as folhas de estilos WinJS, definir o estilo dos controles intrínsecos e WinJS e usar outras classes CSS que fazem parte do WinJS para tipografia.