Compartilhar via

Lista de controles (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 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

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

  • 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

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

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
    Estilos de controle 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)
    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

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

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

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

  • 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