Compartir a través de

Controles por función (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 ofrecen controles que realizan muchas funciones. Puedes seleccionar el control adecuado para tu escenario si comparas los controles que ofrecen una funcionalidad parecida. (Para ver una lista alfabética de los controles, consulta la Lista de controles).

Consulta estas funciones como parte de nuestra serie Funciones de aplicaciones, de principio a fin: Interfaz de usuario de aplicaciones de la Tienda Windows, de principio a fin

Barras de la aplicación y comandos

  • 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

  • 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 Windows en tiempo de ejecución.

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

    Referencia: Windows.UI.Popups.PopupMenu

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

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

    Referencia: Menu

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

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

    Referencia: MenuCommand

  • 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

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

  • 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

Botones

Controles de datos o colección

  • vista para pasar
    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

  • 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 un control ListView

  • visor de saltos
    Consulta zoom semántico

  • 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

  • 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

Controles flotantes

  • 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
    Consulta "menú emergente".

  • control flotante (solo Windows)
    Muestra un mensaje que necesita la interacción del usuario. (Al contrario que los cuadros de diálogo de mensaje, 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

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

    <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

  • menú emergente
    Representa un menú contextual.

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

    Referencia: Windows.UI.Popups.PopupMenu

  • 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

  • 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

Elementos gráficos

  • 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

  • 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

Imágenes

  • img
    Muestra una imagen.

    <img src="url" />

    Referencia: img

Controles de diseño

  • caja flexible
    Diseño CSS 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

  • 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

  • hub (solo Windows)
    Crea un patrón de navegación centralizada formada por 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

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

    Muestra de ItemContainer HTML

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

  • 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

  • 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

  • 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

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

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

Controles multimedia

  • 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

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

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

  • 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

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

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

    Referencia: WinJS.UI.HtmlControl

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

    <iframe src="url" />

    Referencia: iframe

  • control de página
    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 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

  • vista web
    Consulta la entrada de "iframe".

Controles de progreso

Controles de clasificación

Controles de selección

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

  • selector de fechas (solo Windows)
    Estilo claro de DatePicker

    Establece una fecha.

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

    Referencia: DatePicker

    Inicio rápido: Agregar DatePicker

  • 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

  • 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 un control ListView

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

  • 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

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

    <input type="range" />

    Referencia: input type=range

  • 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

Controles de texto

  • 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

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

  • 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

  • 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

  • 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

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

  • 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

  • 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

Ayuda del usuario

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

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

    Referencia: label

  • 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 de herramientas simple con solo texto para un elemento.

    <element title="tooltip text" />

    Referencia: title

Temas relacionados

Lista de controles

try.buildwinjs.com

Inicio rápido: Agregar controles

Inicio rápido: Agregar controles y estilos de WinJS

Cambios en la API de WinJS para Windows Phone