Compartilhar via

Controles por função (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 ]

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

Consulte estes recursos em ação como parte da nossa série Recursos do aplicativo, do início 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 da 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".

  • barra de ferramentas
    Exibe um conjunto de comandos. Uma Toolbar pode aparecer em qualquer local, incluindo em um Flyout ou uma AppBar.

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

    Referência: Toolbar

Botões

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

  • caixa de diálogo de conteúdo
    Mostra informações essenciais que requerem atenção ou uma ação explícita do usuário e temporariamente bloqueia as interações com outros elementos no aplicativo.

    <div 
  data-win-control="WinJS.UI.ContentDialog">
  <!-- Content -->
</div

    Referência: ContentDialog

  • 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ô
    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 tabela dinâmica
    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 que você role pelo conteúdo 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

  • modo divisão
    Divide uma área em duas partes: um painel que pode aparecer a partir de uma borda e uma área de conteúdo que preenche o espaço disponível.

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

    Referência: SplitView

  • viewbox
    Dimensiona um único elemento filho para preencher o espaço disponível sem redimensioná-lo. Este 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
    Consulte as entradas de "áudio" e "vídeo."

  • media player
    Consulte 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

  • 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 divisão
    Divide uma área em duas partes: um painel que pode aparecer a partir de uma borda e uma área de conteúdo que preenche o espaço disponível.

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

    Referência: SplitView

  • modo de exibição da web
    Veja a entrada do "iframe".

Controles de progresso

Controles de classificação

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
    Consulte 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

try.buildwinjs.com

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