Démarrage rapide : stylisation de barres d’application (applications du Windows Store en JavaScript et HTML)

Ce guide de démarrage rapide vous donne quelques exemples de stylisation d’une barre de l’application et de ses contrôles.

Prérequis

Introduction

La rubrique Démarrage rapide : application de styles aux contrôles explique comment les feuilles de style de la Bibliothèque Windows pour JavaScript fournissent un ensemble de styles qui permettent de donner automatiquement à votre application une apparence Windows 8. Les exemples suivants démontrent l’utilisation de feuilles de style en cascade (CSS) pour personnaliser certains styles de barre de l’application.

Thèmes à dominante claire et foncée

Lorsque vous choisissez la feuille de style à dominante claire ou foncée pour votre application, cela affecte l’apparence de la barre de l’application ainsi que des autres contrôles de votre application. Pour cet exemple de barre de l’application :


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

le choix de la feuille de style à dominante foncée :


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

produit une barre de l’application qui ressemble à ceci :

barre de l’application de style foncé

La feuille de style à dominante claire :


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

produit une barre de l’application qui ressemble à ceci :

barre de l’application de style clair

Propriétés CSS utiles

Les propriétés CSS suivantes sont couramment utilisées avec le contrôle de barre de l’application :

  • Border-color : Contrôle la couleur de bordure de la barre de l’application.

    Par exemple, border-color:rgb(255, 224, 100) ;

  • Background-color : Contrôle la couleur d’arrière-plan de la barre de l’application.

    Par exemple, background-color:rgb(255, 224, 100) ;

Sélecteurs d’éléments et d’états courants

Voici certains sélecteurs CSS utiles pour styliser des éléments et des états de vos contrôles :

  • .win-command, qui permet de styliser l’étiquette de commande de la barre de l’application :
    
    .win-appbar .win-command
    {
        color: rgb(28, 160, 218);
    }
    
    

    Boutons avec étiquettes de commande colorées

  • .win-commandimage, qui permet de styliser l’image de l’icône utilisée sur le bouton :
    
    .win-appbar .win-commandimage
    {
        color: rgb(28, 160, 218);
    }
    
    

    Boutons avec icônes de commande colorées

  • .win-commandring, qui permet de styliser l’anneau autour de l’image sur le bouton :
    
    .win-appbar .win-commandring
    {
        border-color: rgb(28, 160, 218);
    }
    
    

    Boutons avec anneaux colorés

Pseudo-classes

Vous pouvez utiliser les pseudo_classes suivantes en tant que sélecteurs pour styliser des boutons de barre de l’application quand ils se trouvent dans certains états :

  • :hover - l’utilisateur place le curseur sur l’icône mais ne l’active pas en cliquant. Une info-bulle de l’étiquette de l’icône s’affiche par défaut pendant le survol.

    Info-bulle au-dessus du bouton Accueil pendant le survol

  • :active - l’icône est active entre le moment où l’utilisateur appuie sur le contrôle et le moment où il choisit une option.

    Bouton Accueil actif

  • :disabled - l’icône ne peut pas accepter les interactions de l’utilisateur. La propriété disabled de l’icône doit être définie sur "disabled" pour cette pseudo-classe.

    Bouton Accueil désactivé

Stylisation d’une barre de l’application avec des couleurs personnalisées

Autre exemple de stylisation d’une barre de l’application :


.win-appbar
{
    background-color: yellow;
    border: 3px solid blue;
}

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

produit les couleurs suivantes pour la barre de l’application :

barre de l’application jaune

Récapitulatif

Dans ce guide de démarrage rapide, nous vous avons donné des exemples de stylisation d’une barre de l’application et de ses contrôles.

Rubriques associées

WinJS.UI.AppBar
WinJS.UI.AppBarCommand
AppBarIcon

 

 

Afficher:
© 2014 Microsoft. Tous droits réservés.