Lista de controles (HTML)

  • Artículo

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Las aplicaciones Windows en tiempo de ejecución con JavaScript tienen acceso a una amplia biblioteca de controles que son compatibles con el desarrollo de la interfaz de usuario (UI). Algunos de estos controles tienen una representación visual y otros funcionan como contenedores de otros controles o de contenido, como imágenes y elementos multimedia.

Este tema proporciona una lista alfabética de los controles habituales de las aplicaciones Windows en tiempo de ejecución con 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 el inicio o el destino de un vínculo de hipertexto.

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

    Referencia: a

  • barra de la aplicación
    Proporciona una barra de herramientas para mostrar comandos específicos de la aplicación.

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

    Referencia: WinJS.UI.AppBar

    Inicio rápido: Agregar una barra de la aplicación

  • audio
    Especifica el contenido de sonido o audio, como música o efectos, que se reproducirá en un documento.

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

    Referencia: audio

B

  • botón atrás (solo Windows)
    Proporciona navegación hacia atrás en forma de botón.

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

    Referencia: WinJS.UI.BackButton

  • botón
    Un control de botón

    Representa un control de botón.

    <button>A button</button>

    - o bien -

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

    Referencia: button, input type=button

    Inicio rápido: Agregar un botón

C

  • Canvas
    Proporciona un objeto que se usa para dibujar, representar y manipular imágenes y gráficos en un documento.

    <canvas />

    Referencia: canvas

    Inicio rápido: Dibujar en un Canvas

  • casilla
    Varios controles de casilla

    Representa una casilla que un usuario puede activar y desactivar.

    <input type="checkbox" />

    Referencia: input type=checkbox

    Inicio rápido: Agregar casillas

  • cuadro combinado
    Consulta la entrada de "selección".

  • cuadro de diálogo de contenido
    Muestra información importante que requiere atención o una acción explícita del usuario y bloquea temporalmente las interacciones con otros elementos de la aplicación.

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

    Referencia: ContentDialog

  • menú contextual
    Proporciona un menú ligero que ofrece a los usuarios acceso a las acciones (como comandos del portapapeles) para objetos de texto o de la interfaz de usuario en las aplicaciones de la Tienda Windows.

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

    Referencia: Windows.UI.Popups.PopupMenu

D

E

  • cuadro de entrada de correo electrónico
    Control de entrada de una línea que acepta una o más direcciones de correo electrónico.

    <input type="email" />

    Referencia: input type=email

F

  • carga de archivos
    Crea un objeto de carga de archivo con un cuadro de texto y un botón Examinar.

    <input type="file" />

    Referencia: input type=file

  • caja flexible
    Define un diseño que tiene en cuenta el espacio disponible al definir las dimensiones del cuadro, lo que permite usar posicionamiento y tamaño relativos.

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

    Referencia: display

  • vista para alternar
    Muestra una colección de elementos, de uno en uno.

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

    Referencia: WinJS.UI.FlipView

    Inicio rápido: Agregar FlipView

  • control flotante (solo Windows)
    Muestra un mensaje que necesita la interacción del usuario. (Al contrario que los cuadros de diálogo, los controles flotantes no crean una ventana independiente ni bloquean otra interacción del usuario).

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

    Referencia: WinJS.UI.Flyout

    Inicio rápido: Agregar controles flotantes

G

  • cuadrícula
    Diseño CSS que define un área de cuadrícula flexible que se compone de columnas y filas.

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

    Referencia: display

  • vista de cuadrícula
    ListView con un diseño de cuadrícula. Consulta la entrada de "vista de lista" para obtener más información.

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

    Referencia: WinJS.UI.ListView

    Inicio rápido: Agregar ListView

H

  • control html
    Muestra el contenido de una página HTML.

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

    Referencia: WinJS.UI.HtmlControl

  • hub (solo Windows)
    Crea un patrón de navegación de concentrador consistente en secciones a las que se puede navegar. Cada sección se define mediante una sección de concentrador.

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

    Referencia: WinJS.UI.Hub

    Muestra de control Hub HTML

  • sección del hub (solo Windows)
    Define una sección de un concentrador.

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

    Referencia: WinJS.UI.HubSection

    Muestra de control Hub HTML

  • hipervínculo
    Consulta la entrada de "a".

I

  • iframe
    Marco flotante en línea que puede mostrar otro documento.

    <iframe src="url" />

    Referencia: iframe

  • img
    Muestra una imagen.

    <img src="url" />

    Referencia: img

  • contenedor de elementos
    Define un elemento que se puede presionar, deslizar rápidamente y arrastrar.

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

    Referencia: WinJS.UI.ItemContainer

    Muestra de ItemContainer HTML

J

  • vista de salto
    Consulta la entrada de "zoom semántico".

L

  • etiqueta
    Especifica una etiqueta para otro elemento de la página.

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

    Referencia: label

  • cuadro de lista
    Consulta la entrada de "selección".

  • vista de lista
    Muestra una colección de datos en un diseño de lista o cuadrícula.

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

    Referencia: WinJS.UI.ListView

    Inicio rápido: Agregar ListView

M

  • elemento multimedia
    Consulta las entradas de "audio" y "vídeo".

  • reproductor multimedia
    Consulta las entradas de "audio" y "vídeo".

  • menú
    Muestra un menú. (solo Windows)

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

    Referencia: WinJS.UI.Menu

  • comando de menú (solo Windows)
    Representa un comando que se mostrará en un objeto Menu.

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

    Referencia: WinJS.UI.MenuCommand

  • cuadro de diálogo de mensaje
    Muestra un mensaje que necesita la respuesta inmediata del usuario.

    Referencia: Windows.UI.Popups.MessageDialog

    Inicio rápido: Agregar cuadros de diálogo de mensaje

  • cuadro de texto multilínea
    Consulta la entrada de "área de texto".

N

  • barra de navegación (solo Windows)
    Recoge los comandos de navegación en una barra de herramientas que el usuario puede mostrar u ocultar.

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

    Referencia: WinJS.UI.NavBar

    Muestra de control NavBar HTML

  • comando de barra de navegación (solo Windows)
    Representa un comando de navegación en un contenedor de la barra de navegación.

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

    Referencia: WinJS.UI.NavBarCommand

    Muestra de control NavBar HTML

  • contenedor de barra de navegación (solo Windows)
    Contiene un grupo de comandos de barra de navegación en una barra de navegación.

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

    Referencia: WinJS.UI.NavBarContainer

    Muestra de control NavBar HTML

  • cuadro de entrada de números
    Control de entrada de una línea que acepta un valor numérico.

    <input type="number" />

    Referencia: input type=number

P

  • control de páginas
    Representa un control personalizado o una página en una aplicación de navegación.

    Referencia: WinJS.UI.Pages.PageControl

    Inicio rápido: usar la navegación de una página

  • vista de desplazamiento panorámico
    Consulta la entrada de "vista de desplazamiento".

  • cuadro de entrada de contraseña
    Control de entrada de texto de una línea que se parece al control de entrada de texto, excepto en que el texto no se muestra a medida que el usuario lo escribe.

    <input type="password" />

    Referencia: input type=password

  • pivot
    Crea un control de pestañas que muestra varios elementos.

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

    Referencia: WinJS.UI.Pivot

  • elemento pivot
    Crea una pestaña dentro de un control de pestañas.

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

    Referencia: WinJS.UI.PivotItem

  • menú emergente
    Consulta la entrada de "menú contextual".

  • barra de progreso
    Estilos de control de progreso

    Muestra una barra que indica que hay trabajo en curso. No se admite un círculo indeterminado en Windows Phone 8.1.

    <progress />

    Referencia: progress

    Inicio rápido: Agregar controles de progreso

  • anillo de progreso (solo Windows)
    Muestra un anillo que indica que hay trabajo en curso.

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

    Referencia: progress

    Inicio rápido: Agregar controles de progreso

  • botón de comando
    Consulta la entrada de "botón".

R

  • botón de radio
    Tipo de control de selección que limita la selección de un usuario a un solo valor dentro de un conjunto de valores. Para hacerlo, tienes que vincular entre sí todos los botones de un conjunto de botones de radio asignándoles el mismo nombre.

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

    Referencia: input type=radio

  • intervalo
    Consulta la entrada de "control deslizante".

  • clasificación (solo Windows)
    Un control de clasificación

    Permite que el usuario clasifique algo o vea su clasificación existente.

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

    Referencia: WinJS.UI.Rating

    Inicio rápido: Agregar clasificaciones

  • repetición
    Genera HTML a partir de un conjunto de datos. Usa este control para crear listas de elementos.

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

    Referencia: WinJS.UI.Repeater

    Muestra de control Repeater HTML

  • botón Restablecer
    Un botón Restablecer

    Restablece los datos de un formulario.

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

    Referencia: button, input type=reset

    Inicio rápido: Agregar un botón

  • cuadro de edición enriquecido/cuadro de texto enriquecido
    Control que proporciona la funcionalidad de entrada de texto y se parece a un cuadro de entrada de texto, aunque puede trabajar con contenido que incluya elementos secundarios. Para crear un cuadro de texto enriquecido, define la propiedad contentEditable de los elementos que quieras editar.

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

    Referencia: contentEditable

S

  • barra de desplazamiento
    Un contenedor que te permite desplazarte por su contenido. Para agregar esta funcionalidad de desplazamiento, establece el estilo overflow de un elemento en scroll o auto.

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

    Referencia: overflow

  • vista de desplazamiento
    Muestra una vista de contenido que el usuario puede acercar o alejar y proporciona otras características, como puntos de acoplamiento, que mejoran esa experiencia.

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

    Referencia: overflow, ms-content-zooming

  • cuadro de búsqueda (solo Windows)
    Permite al usuario realizar consultas de búsqueda y seleccionar sugerencias.

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

    Referencia: WinJS.UI.SearchBox

    Muestra del control SearchBox

  • selección
    Representa un cuadro de lista, un cuadro combinado o una lista desplegable.

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

    Referencia: select

  • zoom semántico
    Permite que el usuario haga zoom entre dos vistas de una colección de elementos.

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

    Referencia: WinJS.UI.SemanticZoom

  • Control flotante Configuración (solo Windows)
    Proporciona acceso a la configuración de la aplicación.

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

    Referencia: SettingsFlyout

  • cuadro de texto de una línea
    Consulta la entrada de "cuadro de texto".

  • control deslizante
    Proporciona un control deslizante de intervalo para seleccionar un valor numérico.

    <input type="range" />

    Referencia: input type=range

  • vista en dos paneles
    Divide un área en dos partes: un panel que puede aparecer desde un borde y un área de contenido que rellena el espacio disponible.

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

    Referencia: SplitView

  • botón de envío
    Un control de botón Enviar

    Crea un botón que, cuando se hace clic en él, envía el formulario.

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

    Referencia: button, input type=submit

    Inicio rápido: Agregar un botón

  • svg
    Define un documento o un fragmento de documento SVG que puede representar gráficos vectoriales.

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

    Referencia: svg

T

  • cuadro de texto
    Control de entrada de texto de una línea.

    <input type="text" />

    Referencia: input type=text

  • área de texto
    Control de entrada de texto de varias líneas.

    <textarea></textarea>

    Referencia: textarea

  • selector de hora (solo Windows)
    Estilo claro de TimePicker

    Permite al usuario especificar una hora.

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

    Referencia: WinJS.UI.TimePicker

    Inicio rápido: Agregar TimePicker

  • modificador para alternar
    Representa un modificador que se puede alternar entre dos estados.

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

    Referencia: ToggleSwitch

  • barra de herramientas
    Muestra un conjunto de comandos. Una Toolbar puede aparecer en cualquier ubicación, incluso en un Flyout o una AppBar.

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

    Referencia: Toolbar

  • información sobre herramientas (solo Windows)
    Muestra una información sobre herramientas enriquecida que admite contenido enriquecido (como imágenes y texto con formato) para proporcionar más información sobre algo.

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

    Referencia: WinJS.UI.Tooltip

  • información sobre herramientas, simple
    Muestra una información sobre herramientas simple con solo texto para un elemento.

    <element title="tooltip text" />

    Referencia: title

U

  • cuadro de entrada de URL
    Control de entrada de texto de una línea que acepta direcciones URL.

    <input type="url" />

    Referencia: input type=url

V

  • vídeo
    Especifica el contenido de vídeo que se reproducirá en un documento.

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

    Referencia: video

  • cuadro de vídeo
    Ajusta a escala un elemento secundario para rellenar el espacio disponible sin cambiar su tamaño. Este control reacciona a los cambios en el tamaño del contenedor, además de los cambios de tamaño del elemento secundario. Por ejemplo, una consulta multimedia podría resultar en un cambio en la relación de aspecto.

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

    Referencia: WinJS.UI.ViewBox

W

  • vista web
    Consulta la entrada de "iframe".

Z

  • vista de desplazamiento acercable
    Consulta la entrada de "vista de desplazamiento".

Temas relacionados

try.buildwinjs.com