Idioma: HTML | XAML

Controles por función (HTML)

Applies to Windows and Windows Phone

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 características como parte de nuestra serie Características 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".

Botones

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"></div>

Referencia: WinJS.UI.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

botón de comando

Consulta botón

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

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

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

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

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

navegación centralizada (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 navegación centralizada.


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

Referencia: WinJS.UI.Hub

Muestra de control Hub HTML

sección de navegación centralizada (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 (solo Windows Phone)

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


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

Referencia: WinJS.UI.Pivot

elemento de pivot (solo Windows Phone)

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

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

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

Navegación

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 web

Consulta la entrada de "iframe".

Controles de progreso

barra de progreso

Estilos de control de progreso

Muestra una barra que indica que hay trabajo en curso.


<progress />

Referencia: progress

Inicio rápido: Agregar controles de progreso

círculo 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

Controles de clasificación

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

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

select

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
Inicio rápido: Agregar controles
Inicio rápido: Agregar controles y estilos de WinJS
Cambios en la API de WinJS para Windows Phone

 

 

Mostrar:
© 2014 Microsoft