Schnellstart: Formatieren von App-Leisten (HTML)

Applies to Windows and Windows Phone

Diese Schnellstartanleitung enthält einige Beispiele zur Formatierung einer App-Leiste und ihrer Steuerelemente.

Voraussetzungen

Einführung

Unter Schnellstart: Formatieren von Steuerelementen wird erläutert, wie mithilfe der Stylesheets der Windows-Bibliothek für JavaScript eine Reihe von Stilen bereitgestellt wird, mit denen Sie Ihrer App automatisch das Windows 8-Erscheinungsbild verleihen können. In den folgenden Beispielen wird die Verwendung von Cascading Style Sheets (CSS) zum Anpassen einiger Stile der App-Leiste veranschaulicht.

Helles und dunkles Design

Wenn Sie für die App das helle oder dunkle Stylesheet auswählen, wirkt sich dies auf das Aussehen der App-Leiste und der anderen Steuerelemente der App aus. Beispiel für eine App-Leiste:


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

Auswahl des dunklen Stylesheets:


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

Resultierendes Aussehen der App-Leiste:

App-Leiste im dunklen Stil

Auswahl des hellen Stylesheets:


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

Resultierendes Aussehen der App-Leiste:

App-Leiste im hellen Stil

Nützliche CSS-Eigenschaften

Die folgenden CSS-Eigenschaften werden häufig für das App-Leistensteuerelement verwendet:

  • border-color: Steuert die Rahmenfarbe der App-Leiste.

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

  • background-color: Steuert die Hintergrundfarbe der App-Leiste.

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

Häufig verwendete Selektoren für Teile und Zustände

Einige nützliche CSS-Selektoren zum Formatieren von Teilen und Zuständen des Steuerelements sind:

  • .win-commandDient zum Formatieren der Befehlsbezeichnung der App-Leiste:
    
    .win-appbar .win-command
    {
        color: rgb(28, 160, 218);
    }
    
    

    Schaltflächen mit farbigen Befehlsbezeichnungen

  • .win-commandimageDient zum Formatieren des Symbolbilds auf der Schaltfläche:
    
    .win-appbar .win-commandimage
    {
        color: rgb(28, 160, 218);
    }
    
    

    Schaltflächen mit farbigen Befehlssymbolen

  • .win-commandringDient zum Formatieren des Rings um das Bild auf der Schaltfläche:
    
    .win-appbar .win-commandring
    {
        border-color: rgb(28, 160, 218);
    }
    
    

    Schaltflächen mit farbigen Ringen

Pseudoklassen

Sie können die folgenden Pseudoklassen als Selektoren zum Formatieren von Schaltflächen der App-Leiste verwenden, wenn diese sich in bestimmten Zuständen befinden:

  • :hover - Benutzer platzieren den Cursor auf dem Symbol, ohne es per Klick zu aktivieren. Während mit der Maus auf das Symbol gezeigt wird, wird standardmäßig eine QuickInfo mit der Symbolbezeichnung eingeblendet.

    QuickInfo für die Schaltfläche "Home" beim Zeigen mit der Maus

  • :active - Das Symbol ist aktiv, während der Benutzer auf das Steuerelement klickt und eine Option auswählt.

    Aktive Schaltfläche "Home"

  • :disabled - Das Symbol kann keine Benutzerinteraktionen annehmen. Die disabled-Eigenschaft des Symbols muss für diese Pseudoklasse auf "disabled" festgelegt sein.

    Deaktivierte Schaltfläche "Home"

Formatieren einer App-Leiste mit benutzerdefinierten Farben

Weiteres Beispiel für die Formatierung einer App-Leiste:


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

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

Resultierende Farben der App-Leiste:

Gelbe App-Leiste

Zusammenfassung

In dieser Schnellstartanleitung wurden einige Beispiele für die Formatierung einer App-Leiste und ihrer Steuerelemente vorgestellt.

Verwandte Themen

WinJS.UI.AppBar
WinJS.UI.AppBarCommand
AppBarIcon

 

 

Anzeigen:
© 2014 Microsoft