Idioma: HTML | XAML

Controles por função (HTML)

Applies to Windows and Windows Phone

Os aplicativos do Tempo de Execução do Windows em JavaScript oferecem controles que executam várias funções. Você pode selecionar o controle apropriado para seu cenário comparando os controles que oferecem funcionalidade semelhante. Para obter uma lista alfabética dos controles, veja a lista de controles.)

Veja esses recursos em ação como parte da nossa série Recursos do aplicativo, do começo ao fim:  Interface do usuário de aplicativo da Windows Store, do início ao fim

Barras e comandos de aplicativo

barra de aplicativos

Fornece uma barra de ferramentas para exibir comandos específicos a aplicativos.


<div data-win-control="WinJS.UI.AppBar"></div>

Referência: WinJS.UI.AppBar

Guia de início rápido: adicionando uma barra de aplicativos

menu de contexto

Fornece um menu leve que permite que os usuários acessem as ações (como comandos de área de transferência) em objetos de texto ou de interface do usuário nos aplicativos do Tempo de Execução do Windows em JavaScript.


var menu = new Windows.UI.Popups.PopupMenu();


Referência: Windows.UI.Popups.PopupMenu

menu (somente Windows)

Exibe um menu.


<div data-win-control="WinJS.UI.Menu"></div>

Referência: Menu

comando de menu (somente Windows)

Representa um comando a ser exibido em um objeto Menu.


<button data-win-control="WinJS.UI.MenuCommand" />

Referência: MenuCommand

barra de navegação (somente Windows)

Exibe os comandos de navegação em uma barra de ferramentas que o usuário pode mostrar ou ocultar.


<div data-win-control="WinJS.UI.NavBar"></div>

Referência: WinJS.UI.NavBar

Exemplo de controle HTML NavBar

comando de barra de navegação (somente Windows)

Representa um comando de navegação em um contêiner da barra de navegação.


<div data-win-control="WinJS.UI.NavBarCommand"></div>

Referência: WinJS.UI.NavBarCommand

Exemplo de controle HTML NavBar

contêiner de barra de navegação (somente Windows)

Contém um grupo de comandos em uma barra de navegação.


<div data-win-control="WinJS.UI.NavBarContainer"></div>

Referência: WinJS.UI.NavBarContainer

Exemplo de controle HTML NavBar

menu pop-up

Veja a entrada do "menu de contexto".

Botões

botão voltar (somente Windows)

Um botão para retroceder na navegação.


<div><button data-win-control="WinJS.UI.BackButton"></div>

Referência: WinJS.UI.WinJS.UI.BackButton

botão

Um controle de botão

Representa um controle de botão.


<button>A button</button>

- ou -


<input type="button" value="A button" />

Referência: button, input type=button

Guia de início rápido: adicionando um botão

botão de ação

Ver o botão

botão de redefinição

Um botão de redefinição

Redefine dados em um formulário.


<button type="reset">Reset</button>

Referência: button, input type=reset

Guia de início rápido: adicionando um botão

botão enviar
Um controle de botão de envio

Cria um botão que, quando clicado, envia o formulário.


<button type="submit">Submit</button>


Referência: button, input type=submit

Guia de início rápido: adicionando um botão

Controles de coleção/dados

virar exibição

Exibe uma coleção, um item de cada vez.


<div data-win-control="WinJS.UI.FlipView"></div>

Referência: WinJS.UI.FlipView

Guia de início rápido: adicionando um FlipView

exibição em grade

Um ListView que tem um layout de grade. Veja a entrada do "modo de exibição de lista" para saber mais.


<div data-win-control="WinJS.UI.ListView" 
    data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>

Referência: WinJS.UI.ListView

Guia de início rápido: adicionando um ListView

visualizador de salto

Ver zoom semântico

repetidor

Gera HTML com base em um conjunto de dados. Use esse controle para gerar listas de itens.


<div data-win-control="WinJS.UI.Repeater"></div>

Referência: WinJS.UI.Repeater

Exemplo de controle HTML Repetidor

zoom semântico

Permite que o usuário aplique o zoom entre dois modos de exibição de uma coleção de itens.


<div data-win-control="WinJS.UI.SemanticZoom">

  <!-- Control that provides the zoomed-in view. -->
  <div id="zoomedInView" data-win-control="WinJS.UI.ListView"></div>

  <!-- Control that provides the zoomed-out view. -->
  <div id="zoomedOutView" data-win-control="WinJS.UI.ListView"></div>

</div>


Referência: WinJS.UI.SemanticZoom

menu suspensos

menu de contexto

Veja o "menu pop-up".

submenu (somente Windows)

Exibe uma mensagem que exige a interação do usuário. Ao contrário de uma caixa de diálogo de mensagem, um menu desdobrável não cria uma janela separada e não bloqueia outra interação do usuário.


<div data-win-control="WinJS.UI.Flyout"></div>

Referência: WinJS.UI.Flyout

Guia de início rápido: adicionando um menu suspenso

menu (somente Windows)

Exibe um menu.


<div data-win-control="WinJS.UI.Menu"></div>

Referência: WinJS.UI.Menu

comando de menu (somente Windows)

Representa um comando a ser exibido em um objeto Menu.


<button data-win-control="WinJS.UI.MenuCommand" />

Referência: WinJS.UI.MenuCommand

caixa de diálogo de mensagem

Exibe uma mensagem que exige uma resposta imediata do usuário.

Referência: Windows.UI.Popups.MessageDialog

Guia de início rápido: adicionando uma caixa de diálogo de mensagem

menu pop-up

Representa um menu de contexto.


var popupMenu = new Windows.UI.Popups.PopupMenu();


Referência: Windows.UI.Popups.PopupMenu

submenu Configurações (somente Windows)

Fornece acesso às configurações do aplicativo.


<div data-win-control="WinJS.UI.SettingsFlyout"></div>


Referência: SettingsFlyout

dica de ferramenta (somente Windows)

Exibe uma dica de ferramenta sofisticada que pode dar suporte a conteúdo sofisticado (como imagens e texto formatado) para mostrar mais informações sobre algo.


<div data-win-control="WinJS.UI.ToolTip"></div>

Referência: WinJS.UI.Tooltip

dica de ferramenta, simples

Exibe uma dica de ferramenta simples, somente leitura de um elemento.


<element title="tooltip text" />

Referência: title

Elementos gráficos

tela

Fornece um objeto usado para desenho, renderização e manipulação de imagens e elementos gráficos em um documento.


<canvas />

Referência: canvas

Guia de início rápido: desenhando em uma tela

svg

Define um documento SVG ou um fragmento de documento que pode renderizar gráficos vetores.


<svg xmlns="http://www.w3.org/2000/svg"></svg>

Referência: svg

Imagens

img

Exibe uma imagem.


<img src="url" />

Referência: img

Controles de layout

caixa flexível

Um layout CSS que leva em conta o espaço disponível ao definir as dimensões da caixa, permitindo assim tamanhos e posicionamento relativos.


<div style="display: -ms-box;">
    <!-- Child elements -->
</div>

Referência: display

grade

Um layout CSS que define uma área de grade flexível que consistem em colunas e linhas.


<div style="{display: -ms-grid}">
    <!-- Child elements -->
</div>


Referência: display

hub (somente Windows)

Cria um padrão de navegação de hub formado por seções navegáveis. Cada seção é definida por uma seção de hub.


<div data-win-control="WinJS.UI.Hub"></div>

Referência: WinJS.UI.Hub

Exemplo de controle HTML Hub

seção de hub (somente Windows)

Defina a seção de um hub.


<div data-win-control="WinJS.UI.HubSection"></div>

Referência: WinJS.UI.HubSection

Exemplo de controle HTML Hub

contêiner do item

Define um item que o usuário pode pressionar, passar o dedo e arrastar.


<div data-win-control="WinJS.UI.ItemContainer"></div>

Referência: WinJS.UI.WinJS.UI.ItemContainer

Exemplo HTML de ItemContainer

modo de exibição de rolagem de movimento panorâmico

Veja a entrada do "modo de exibição de rolagem".

pivô (somente Windows Phone)

Cria um controle de guia que exibe vários itens.


<div data-win-control='WinJS.UI.Pivot'></div>

Referência: WinJS.UI.Pivot

item de pivô (somente Windows Phone)

Cria uma guia com um controle de guia.


<div data-win-control='WinJS.UI.PivotItem'></div>

Referência: WinJS.UI.PivotItem

barra de rolagem

Um contêiner que permite a rolagem pelos componentes dele. Adicione esta funcionalidade de rolagem adicionando a configuração do estilo overflow de um elemento para rolagem ou automático.


<div style="overflow:scroll;">
    <!-- Contents -->
</div>

Referência: overflow

modo de exibição de rolagem

Exibe um modo de exibição do conteúdo onde um usuário pode ampliar e reduzir e fornece recursos adicionais, como pontos de ajuste, que melhoram essa experiência.


<div style=overflow:scroll;-ms-content-zooming:zoom>>
    <!-- Contents to edit. -->
</div>

Referência: overflow, ms-content-zooming

viewbox

Ajusta a escala de um único elemento filho para preencher o espaço disponível sem redimensioná-lo. Esse controle reage às alterações no tamanho do contêiner e às alterações de tamanho do elemento filho. Por exemplo, uma consulta de mídia pode resultar em uma alteração na taxa de proporção.


<div data-win-control="WinJS.UI.ViewBox"></div>

Referência: WinJS.UI.ViewBox

modo de exibição de rolagem dimensionável

Veja a entrada do "modo de exibição de rolagem".

Controles de mídia

áudio

Especifica o som ou conteúdo de áudio, como música ou efeitos, a ser reproduzido em um documento.


<audio>
    <source src="uri" type="audioType" />
</audio>

Referência: audio

elemento de mídia

Veja as entradas de "áudio" e "vídeo."

media player

Veja as entradas de "áudio" e "vídeo."

vídeo

Especifica o conteúdo de vídeo a ser reproduzido em um documento.


<video controls="controls">
   <source src="url" type="videoType" />
</video> 

Referência: video

Navegação

controle Html

Exibe o conteúdo de uma página HTML.


<div data-win-control="WinJS.UI.HtmlControl"></div>

Referência: WinJS.UI.HtmlControl

iframe

Um quadro flutuante embutido que pode exibir outro documento.


<iframe src="url" />

Referência: iframe

controle de página

Representa um controle ou página personalizada em um aplicativo de navegação.

Referência: WinJS.UI.Pages.PageControl

Guia de início rápido: usando a navegação de página única

modo de exibição da web

Veja a entrada do "iframe".

Controles de progresso

barra de progresso

Estilos de controle de progresso

Exibe uma barra que indica que há trabalho em andamento.


<progress />

Referência: progress

Guia de início rápido: adicionando controles de progresso

toque de progresso (somente Windows)

Exibe um anel que indica que há trabalho em andamento.


<progress class="win-ring" style="width: 20px; height: 20px" />

Referência: progress

Guia de início rápido: adicionando controles de progresso

Controles de classificação

classificação (somente Windows)

Um controle de classificação

Permite que o usuário classifique algo ou exiba a classificação existente.


<div data-win-control="WinJS.UI.Rating"></div>

Referência: WinJS.UI.Rating

Guia de início rápido: adicionando classificações

Controles de seleção

caixa de seleção

Vários controles de caixas de seleção

Representa uma caixa de seleção que um usuário pode marcar e desmarcar.


<input type="checkbox" />

Referência: input type=checkbox

Guia de início rápido: adicionando caixas de seleção

caixa de combinação

Veja a entrada do "select".

seletor de data (somente Windows)
DatePicker estilo claro

Define uma data.


<div data-win-control="WinJS.UI.DatePicker"></div>

Referência: DatePicker

Início rápido: adicionando um DatePicker

carregamento de arquivo

Cria um objeto de carregamento de arquivo com uma caixa de texto e um botão Procurar.


<input type="file" />

Referência: input type=file

caixa de listagem

Veja a entrada do "select".

modo de exibição de lista

Exibe uma coleção de dados em um layout de lista ou grade.


<div data-win-control="WinJS.UI.ListView"></div>

Referência: WinJS.UI.ListView

Guia de início rápido: adicionando um ListView

botão de opção

Um tipo de controle de seleção que limita a seleção de um usuário a um único valor em um conjunto de valores. Para fazer isso, você deve vincular juntos todos os botões em um conjunto de botões de opção atribuindo cada botão ao mesmo nome.


<input type="radio" id="redRadio" name="colorRadio" /><label for="redRadio">Red</label>   
<input type="radio" id="greedRadio" name="colorRadio" /><label for="greedRadio">Green</label>
<input type="radio" id="blueRadio" name="colorRadio" /><label for="blueRadio">Blue</label>

Referência: input type=radio

intervalo

Veja a entrada do "slider".

caixa de pesquisa (somente Windows)

Permite ao usuário fazer consultas de pesquisa e selecionar sugestões.


<div data-win-control="WinJS.UI.SearchBox"></div>

Referência: WinJS.UI.SearchBox

Exemplo de controle SearchBox

selecionar

Representa uma caixa de listagem, caixa de combinação ou lista suspensa.


<select>
    <option>Apple</option>
    <option>Banana</option>
    <option>Grape</option>
    <option>Orange</option>
    <option>Pear</option>
    <option>Watermelon</option>
</select>


Referência: select

controle deslizante

Fornece um controle deslizante de intervalo para selecionar um valor numérico.


<input type="range" />


Referência: input type=range

seletor de hora (somente Windows)
TimePicker estilo claro

Permite que o usuário especifique um horário.

<div data-win-control="WinJS.UI.TimePicker"></div>

Referência: WinJS.UI.TimePicker

Guia de início rápido: adicionando um TimePicker

comutador de alternância

Representa uma opção que pode ser alternada entre dois estados.


<div data-win-control="WinJS.UI.ToggleSwitch"></div>

Referência: ToggleSwitch

Controles de texto

caixa de entrada de email

Um controle de entrada de linha única que aceita um ou mais endereços de email.


<input type="email" />

Referência: input type=email

caixa de texto com várias linhas

Veja a entrada do "textarea".

caixa de entrada de número

Um controle de entrada de linha única que aceita um valor numérico.


<input type="number" />

Referência: input type=number

caixa de entrada de senha

Um controle de entrada de texto de linha única é semelhante ao controle de entrada de texto, exceto que o texto é inserido à medida que o usuário o insere.


<input type="password" />

Referência: input type=password

caixa rich edit/caixa rich text

Um controle que oferece a funcionalidade de entrada de texto que se parece com uma caixa de entrada de texto, mas pode manipular conteúdo que contém elementos filho. Para criar uma caixa de texto sofisticada, defina a propriedade contentEditable dos elementos que você deseja editar.


<div contentEditable="true">
    <!-- Elements to edit. -->
</div>

Referência: contentEditable

caixa de texto com linha única

Veja a entrada da "caixa de texto".

caixa de texto

Um controle de entrada de linha única.


<input type="text" />

Referência: input type=text

área de texto

Um controle de entrada de várias linhas.


<textarea></textarea>

Referência: textarea

caixa de entrada de URL

Um controle de entrada de texto de linha única que aceita URLs.


<input type="url" />

Referência: input type=url

Ajuda do usuário

rótulo

Especifica um rótulo para outro elemento na página.


<label for="otherControl">Label text</label>
<input type="text" id="otherControl" />

Referência: label

dica de ferramenta (somente Windows)

Exibe uma dica de ferramenta sofisticada que pode dar suporte a conteúdo sofisticado (como imagens e texto formatado) para mostrar mais informações sobre algo.


<div data-win-control="WinJS.UI.ToolTip"></div>

Referência: WinJS.UI.Tooltip

dica de ferramenta, simples

Exibe uma dica de ferramenta simples, somente leitura de um elemento.


<element title="tooltip text" />

Referência: title

Tópicos relacionados

Lista de controles
Guia de início rápido: adicionando controles
Guia de início rápido: adicionando controles e estilos WinJS
Alterações da API WinJS para Windows Phone

 

 

Mostrar:
© 2014 Microsoft