Lista de controles (HTML)

[ 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 têm acesso a uma extensa biblioteca de controles que dão suporte ao desenvolvimento da interface do usuário. Alguns desses controles têm uma representação visual, outros funcionam como o contêiner de outros controles ou conteúdos, como imagens e mídias.

Este tópico fornece uma lista alfabética dos aplicativos comuns do Tempo de Execução do Windows que usam controles JavaScript.

A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z

A

• a
  Designa o início do destino de um link de hipertexto.

  <a href="url">Your text</a>
  

  Referência: a

• 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

• á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

B

• botão voltar (somente Windows)
  Um botão para retroceder na navegação.

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

  Referência: WinJS.UI.BackButton

• 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

C

• 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

• caixa 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".

• 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
  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 da Windows Store.

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

  Referência: Windows.UI.Popups.PopupMenu

D

• seletor de data (somente Windows)
  

  Define uma data.

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

  Referência: DatePicker

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

• lista suspensa
  Veja a entrada do "select".

E

• 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

F

• carregamento de arquivo
  Cria um objeto de upload de arquivo com uma caixa de texto e um botão de pesquisa.

  <input type="file" />
  

  Referência: input type=file

• caixa flexível
  Define um layout 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

• 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

• submenu (somente Windows)
  Exibe uma mensagem que exige a interação do usuário. Ao contrário de uma caixa de diálogo, 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

G

• 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

• 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

H

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

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

  Referência: WinJS.UI.HtmlControl

• 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

• hiperlink
  Veja a entrada para "a".

I

• iframe
  Um quadro flutuante embutido que pode exibir outro documento.

  <iframe src="url" />
  

  Referência: iframe

• img
  Exibe uma imagem.

  <img src="url" />
  

  Referência: img

• 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.ItemContainer

  Exemplo HTML de ItemContainer

J

• modo de exibição de salto
  Veja a entrada do "zoom semântico".

L

• 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

• 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

M

• elemento de mídia
  Consulte as entradas de "áudio" e "vídeo."

• media player
  Consulte as entradas de "áudio" e "vídeo."

• menu
  Exibe um menu. (somente Windows)

  <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

• caixa de texto com várias linhas
  Veja a entrada do "textarea".

N

• 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

• 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

P

• 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 de rolagem de movimento panorâmico
  Veja a entrada do "modo de exibição de rolagem".

• 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

• 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

• menu pop-up
  Veja a entrada do "menu de contexto".

• barra de progresso
  

  Exibe uma barra que indica que há trabalho em andamento. O toque indeterminado não tem suporte no Windows Phone 8.1.

  <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

• botão de ação
  Veja a entrada do "botão".

R

• 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".

• classificação (somente Windows)
  

  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

• 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

• 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

• 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 rich text, defina a propriedade contentEditable dos elementos que você deseja editar.

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

  Referência: contentEditable

S

• 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

• 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 lista, caixa combinada 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

• 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

• submenu Configurações (somente Windows)
  Fornece acesso às configurações do aplicativo.

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

  Referência: SettingsFlyout

• caixa de texto com linha única
  Consulte a entrada da "caixa de texto".

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

  <input type="range" />
  

  Referência: input type=range

• 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

• botão enviar
  

  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

• 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

T

• 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

• seletor de hora (somente Windows)
  

  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

• 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

• 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

U

• 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

V

• 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

• 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

W

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

Z

• modo de exibição de rolagem dimensionável
  Veja a entrada do "modo de exibição de rolagem".

Tópicos relacionados

try.buildwinjs.com