Aplicar estilos a barras de la aplicación y barras de herramientas (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 ]

Proporciona ejemplos de cómo aplicar estilos a una barra de aplicaciones o a la barra de herramientas y sus controles.

Requisitos previos

Introducción

Inicio rápido: aplicar estilos a los controles explica cómo las hojas de estilos de la biblioteca de Windows para JavaScript proporcionan un conjunto de estilos que le dan a tu aplicación la apariencia de Windows 10 de forma automática. En los siguientes ejemplos se demuestra cómo el uso de hojas de estilo (CSS) permite personalizar algunos estilos de la AppBar.

Temas claros y oscuros

Cuando elijas la hoja de estilos clara u oscura para la aplicación, afectarás es aspecto de la barra de la aplicación y de los otros controles de la aplicación. Para esta muestra de barra de la aplicación:

<div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}">
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdAdd',disabled:'true',label:'Add',icon:'add',tooltip:'Add item',section:'primary',type:'flyout',
          flyout:select('#addFlyout'),onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',tooltip:'Remove item',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdEdit',label:'Edit',icon:'edit',tooltip:'Edit item',section:'primary',onclick:Sample.outputCommand}">
          </button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',tooltip:'Take a picture',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdSettings',label:'Settings',icon:'settings',tooltip:'Settings',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdShare',label:'Share',icon:'reshare',tooltip:'Share',section:'primary',onclick:Sample.outputCommand}">
          </button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdPrint',label:'Print',section:'secondary',onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdNetwork',label:'Network',section:'secondary',onclick:Sample.outputCommand}"></button>
    </div>

Elegir la hoja de estilos oscura:

<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">

Esta genera una AppBar con este aspecto:

Barra de la aplicación con estilo oscuro

Para elegir la hoja de estilos clara:

<link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">

Esta genera una AppBar con este aspecto:

Barra de la aplicación con estilo claro

La barra de herramientas tendrá un aspecto similar con las mismas hojas de estilo.

Propiedades de CSS útiles

Las siguientes propiedades de CSS se usan con frecuencia con los controles de la AppBar y la ToolBar:

  • Color del borde: Controla el color del borde de la barra de la aplicación.

    Por ejemplo, color del borde: RGB (255, 224, 100);

  • Color de fondo: Controla el color de fondo de la barra de la aplicación.

    Por ejemplo, color de fondo: RGB (255, 224, 100);

Nota  Estos valores normalmente están predefinidos por ui-light.css o ui-dark.css.

 

Parte común y selectores de estado

Estos son algunos selectores útiles de CSS para aplicar estilo a partes y estados del control:

  • .win-command aplica estilo a la etiqueta del comando de la AppBar:

    .win-appbar .win-command
{
    color: rgb(28, 160, 218);
}

    Botones con etiquetas de comandos con color

    Nota  El usuario debe tocar o hacer clic en las elipses para abrir la barra de la aplicación y ver este efecto. Las etiquetas de comandos están ocultas de manera predeterminada.

     

  • .win-commandimage aplica estilo a la imagen del icono del botón:

    .win-appbar .win-commandimage
{
    color: rgb(28, 160, 218);
}

    Botones con iconos de comandos con color

Seudoclases

Puedes usar las siguientes Pseudo_classes como selectores para aplicar estilo a los botones de la barra de la aplicación cuando están en determinados estados:

  • :hover - El usuario coloca el cursor sobre el icono del botón y no lo activa haciendo clic; el color de fondo del botón cambia hasta que el cursor se desplaza fuera del botón. La información sobre herramientas para el botón también se muestra de manera predeterminada al pasar sobre él.

    Información sobre el botón Inicio mientras el cursor se mantiene sobre él

  • :active- El botón está activo durante el lapso en que el usuario presiona el control y elige una opción o si el botón se establece en type="toggle".

    Botón de cámara activo

  • :disabled - El cambio de color del icono indica que el botón no puede aceptar la interacción del usuario. La propiedad disabled del botón debe establecerse en "disabled" para que se aplique esta seudoclase.

    Botón Inicio deshabilitado

Aplicar estilo a una barra de la aplicación con colores personalizados

Un ejemplo más de la aplicación de estilo a una barra de la aplicación:

.win-appbar .win-appbar-actionarea
{
   background-color: yellow;
}


.win-appbar .win-commandimage
{
    color: red;
}

genera una barra de la aplicación con los siguientes colores:

Barra de la aplicación amarilla

Si se aplica un estilo al color de fondo del área de desbordamiento el aspecto que tendría sería el siguiente:

.win-appbar .win-appbar-overflowarea
{
   background-color: green;
}

Y si se aplica estilo a una ToolBar de la misma forma, esta tendría este aspecto:

.win-toolbar win-toolbar-overflowarea{
   background-color: green;
}

.win-toolbar .win-commandimage
{
    color: red;
}

.win-toolbar win-toolbar-overflowarea
{
   background-color: green;
}

Estilos que deben evitarse

Es posible usar CSS para romper con la apariencia de las AppBar y ToolBar. Esto es especialmente cierto para conseguir un funcionamiento fluido de la animación de la AppBar y ToolBar. A continuación se indican las áreas de riesgo conocidas:

  • padding — No cambies los valores predeterminados.

  • border — No cambies los valores predeterminados.

  • margin — Aplica estilo de forma uniforme a los márgenes, pero solo en elementos de la ToolBar y la AppBar:

    .win-toolbar, .win-appbar {
   margin: 3px;
}

  • background-color — Se puede aplicar estilo en áreas de acción y de desbordamiento:

    .win-toolbar-actionarea, .win-appbar-actionarea {
   background-color: rgb(0,0,127);
}
.win-toolbar-overflowarea, .win-appbar-overflowarea {
   background-color: rgb(0,0,255);

  • position,  float — No apliques estilo a estos atributos CSS directamente en el elemento de la ToolBar, pero puedes encapsular la ToolBar en un elemento primario que sí aplica estilo a esas reglas. Nota  Esta restricción no se aplica a la AppBar.

     

Problemas conocidos

  1. Ocultar la ToolBar: el componente de la ToolBar solo debe ocultarse mediante API públicas. Si bien es una práctica habitual usar una clase CSS "paraguas" para ocultar varios componentes de la vista, no se recomienda hacerlo para la ToolBar (o la AppBar). El problema es que se ha optimizado el rendimiento de la ToolBar para almacenar en caché el estado de los comandos, en lugar de basarse en el DOM para indicar si un comando está visible o no. Esto permite que la ToolBar sea adaptable y desborde comandos cuando estos no se ajustan en el área activa disponible, a la vez que evita diseños de explorador costosos que se producen al leer desde el DOM. Usar CSS para aplicar el estilo ocultos a los botones significa que la ToolBar no reconocerá que algunos comandos han sido ocultados y se iniciará el desbordamiento de comandos demasiado pronto ya que el espacio disponible en el área activa de la ToolBar se reduce durante el cambio de tamaño de ventana.

    En su lugar, solo tendrías que establecer la propiedad Command.hidden o llamar al método ToolBar.showOnlyCommands() para mostrar y ocultar los comandos en la ToolBar.

  2. Error de desbordamiento adaptable: el comportamiento de desbordamiento adaptable de la ToolBar no funciona bien cuando el elemento de la ToolBar está diseñado para ajustar su tamaño al contenido.

    Por ejemplo, el componente de la ToolBar está diseñado para existir dentro de otros componentes (por lo general se anida dentro de otro elemento div). Normalmente, dentro de su propio div, la ToolBar ocupará el 100 % del ancho de su elemento primario. Sin embargo, si el diseño CSS que usa el elemento primario lo tiene anidado dentro de unos cuadros flexibles y la clase personalizada transportcontrols del elemento primario está usando align-items:center; para estrechar la ToolBar para que solo tenga el ancho de sus comandos, entonces se producirá un comportamiento inesperado. Esto ocurre porque la ToolBar almacena en caché su width e intenta desbordar comandos cuando cree que no tiene suficiente espacio para ellos. La ToolBar requiere un ancho de elemento constante, pero los estilos usados en este escenario le proporcionan un ancho flexible.

    La solución para este escenario (incluso combinada con la solución de ocultar la ToolBar) implica cambiar la clase personalizada transportcontrols de los elementos primarios para usar align-items:stretch;. Las pruebas han demostrado que esta es una solución sencilla, pero si no puedes realizar el cambio a align-items por algún motivo, puedes lograr el resultado final poniendo align-self:stretch directamente en el elemento de la ToolBar.

Resumen y siguientes pasos

En este artículo te mostramos algunos ejemplos de la aplicación de estilos a una AppBar y a una ToolBar y a sus controles. También te proporcionamos información sobre algunos problemas de diseño que se deben tener en cuenta para evitar problemas con ToolBar y AppBar en tu aplicación.

Más información sobre —prácticas— de cómo aplicar estilo a ToolBar y AppBar en el sitio web Prueba WinJS. Juega con el código y ve los resultados inmediatamente.

Temas relacionados

WinJS.UI.ToolBar

WinJS.UI.AppBar

WinJS.UI.AppBarCommand

AppBarIcon