Aplicar estilos a barras de la aplicación y barras de herramientas (HTML)

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 Insider Preview de forma automática. En los siguientes ejemplos, se demuestra cómo el uso de hojas de estilo en cascada (CSS) permite personalizar algunos estilos de la barra de la aplicación.

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 data-win-control="WinJS.UI.AppBar">
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon:'home', label:'Home', onclick:null, section:'global', type:'button'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon: 'sort', label:'Sort', type:'button'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon: 'more', label:'More', type:'flyout'}"></button>
</div>

la elección de la hoja de estilos oscura:


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

genera una barra de la aplicación con este aspecto:

Barra de la aplicación con estilo oscuro

La hoja de estilos clara:


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

genera una barra de la aplicación 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 el control de barra de la aplicación:

  • 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, que aplica estilo a la etiqueta del comando de la barra de la aplicación:
    
    .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, que le 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 encima del icono, pero no lo activa haciendo clic. Se muestra información de la etiqueta del icono de manera predeterminada mientras el cursor se mantiene sobre él.

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

  • :disabled El icono no puede aceptar la interacción del usuario. La propiedad disabled del icono debe establecerse en "disabled" para 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
{
    background-color: yellow;
    border: 3px solid blue;
}

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

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

Barra de la aplicación amarilla

Resumen

En este inicio rápido, presentamos algunos ejemplos de la aplicación de estilo a una barra de la aplicación y sus controles.

Temas relacionados

WinJS.UI.AppBar
WinJS.UI.AppBarCommand
AppBarIcon
WinJS.UI.ToolBar

 

 

Mostrar:
© 2015 Microsoft