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
á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
.png "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
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
caixa de seleção
.png "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
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 --> </divReferê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)
.png "DatePicker estilo claro")
Define uma data.
<div data-win-control="WinJS.UI.DatePicker"></div>Referência: 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
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
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
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
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
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
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
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
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
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
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
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
.png "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
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
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)
.png "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
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
botão de redefinição
.png "Um botão de redefinição")
Redefine dados em um formulário.
<button type="reset">Reset</button>Referência: button, input type=reset
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
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
.png "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
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)
.png "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
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".