Idioma: HTML | XAML

Início rápido: definindo o estilo de controles (HTML)

Applies to Windows and Windows Phone

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

Vantagens de usar a Biblioteca do Windows para folhas de estilos de JavaScript

As folhas de estilos WinJS oferecem:

  • Um conjunto de estilos que dá a aparência do Windows 8 ao seu aplicativo automaticamente. Basta incluir a folha de estilos para que seus controles ganhem uma ótima aparência e, além disso, funcionem perfeitamente em telas sensíveis ao 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.

Vantagens de usar a Biblioteca do Windows para folhas de estilos de JavaScript

Quando você cria um novo projeto usando o Microsoft Visual Studio, ele inclui automaticamente todos os arquivos necessários da Biblioteca do Windows para JavaScript, inclusive as duas folhas de estilos WinJS. Para usar as folhas de estilos, basta que você adicione uma referência a uma das folhas de estilos ao elemento head da sua página HTML da seguinte forma:

Referência da folha de estilos WinJS para Windows


<!DOCTYPE html>
<html>
<head>
    
    <!-- A WinJS style sheet. -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">

</head>
<body>
    
</body>
</html>

Referência da folha de estilos WinJS para Windows Phone


<!DOCTYPE html>
<html>
<head>
    
    <!-- A WinJS style sheet. -->
    <link href="/css/ui-themed.css" rel="stylesheet" />

</head>
<body>
    
</body>
</html>

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. Essas 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 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. Para obter uma lista completa dessas classes tipográficas, veja Classes tipográficas CSS.

Incluindo a folha de estilos clara ou escura

Conforme descrito no Guia de início rápido: adicionando controles e estilos WinJS, quando você usa o Visual Studio para criar um novo projeto de aplicativo do Tempo de Execução do Windows em JavaScript, ele inclui automaticamente os arquivos e referências necessários do WinJS.

Por padrão, cada página HTML do seu projeto contém uma referência à folha de estilos escura:


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

O WinJS também oferece uma folha de estilos clara. Você pode incluí-la substituindo a referência da folha de estilos escura pelo seguinte:


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

Sempre inclua uma dessas folhas de estilo. Para aplicativos que, sobretudo, exibem imagens ou vídeo, recomendamos o uso da folha de estilos escuros, ao passo que, para aplicativos que contêm muito texto, recomendamos o uso da folha de estilos claros. (Se você está usando um esquema de cores personalizado, use a folha de estilos que funciona melhor com a aparência do seu aplicativo.)

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="//Microsoft.WinJS.2.0/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.

ControlePartes
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.

Tópicos relacionados

Noções básicas de HTML/CSS/JavaScript
Noções básicas de Seletores CSS
Classes CSS WinJS
Classes CSS para controles HTML
Referência da API do Tempo de Execução do Windows e da Biblioteca do Windows para JavaScript

 

 

Mostrar:
© 2014 Microsoft