So wird's gemacht: Auswählen des Stils für Statussteuerelemente
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern

So wird’s gemacht: Formatieren von Statussteuerelementen (HTML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Hier erfahren Sie, wie Sie Cascading Style Sheets (CSS) und die Windows-Bibliothek für JavaScript-Stylesheets zum Auswählen des Stils für progress-Steuerelemente verwenden.

Wissenswertes

Technologien

Voraussetzungen

  • In diesem Thema wird davon ausgegangen, dass Sie wissen, wie Sie die drei verschiedenen Typen von progress-Steuerelementen erstellen: die bestimmte Statusanzeige, die unbestimmte Statusanzeige und den unbestimmten Statusring. Weitere Informationen zum Hinzufügen der verschiedenen Typen von progress-Steuerelementen finden Sie unter Schnellstart: Hinzufügen von Statussteuerelementen.

Nützliche CSS-Eigenschaften

Folgende CSS-Eigenschaften sind für die Auswahl des Stils für das progress-Steuerelement besonders nützlich:

width

Gibt die Breite des Statussteuerelements an. Bei einem unbestimmten Statusring müssen Breite und Höhe gleich sein.

height

Gibt die Höhe des Statussteuerelements an. Bei einem unbestimmten Statusring müssen Breite und Höhe gleich sein.

color

Gibt die Farbe des Balkenteils der bestimmten Statusanzeige bzw. die Farbe der Punkte auf der unbestimmten Statusanzeigen oder auf dem unbestimmten Statusring an.

In diesem Beispiel wird eine bestimmteprogress-Anzeige mit einem blauen Balken erstellt.


<progress value="0.4" style="color: blue"  />

Pseudoelemente zum Auswählen des Stils für Statussteuerelemente

Das progress-Steuerelement bietet die folgenden Pseudoelemente, die Sie als Selektoren für den Stil bestimmter Teile des Steuerelements verwenden können:

::-ms-fill

Wendet auf den Balkenteil bestimmter progress-Steuerelemente einen oder mehrere Stile an bzw. gibt die Animation der unbestimmten Statussteuerelemente an.

Alle Stile werden auf den Balkenteil des bestimmten Statussteuerelements angewendet, mit Ausnahme der animation-name-Stileigenschaft, die die Animation von unbestimmten Statusanzeigen und -ringen steuert.

In diesem Beispiel wird ein progress-Steuerelement als unbestimmter Statusring angezeigt.




/* Show the ring animation. This setting only works when
   you specify the width and height of the progress control */
#my-progress-ring::-ms-fill { animation-name: -ms-ring; }


(Weitere Informationen zu den unterschiedlichen Kombinationsmöglichkeiten von Pseudoelementen und anderen Selektoren finden Sie unter Grundlagen zu CSS-Selektoren.)

Pseudoklassen zum Auswählen des Stils für Statussteuerelemente

Dieses Steuerelement unterstützt die folgenden Pseudoklassen, die Sie als Selektoren für den Stil des Steuerelements in bestimmten Zuständen verwenden können.

:indeterminate

Wendet einen oder mehrere Stile auf ein progress-Steuerelement im unbestimmten Zustand an.

In diesem Beispiel wird ein Stil für unbestimmte progress-Steuerelemente definiert.



progress:indeterminate {
    /* styling here */
}


(Weitere Informationen zu den unterschiedlichen Kombinationsmöglichkeiten von Pseudoklassen und anderen Selektoren finden Sie unter Grundlagen zu CSS-Selektoren.)

WinJS CSS-Klassen zum Formatieren von Statussteuerelementen

WinJS bietet mehrere CSS-Klassen zum Auswählen des Stils für das progress-Steuerelement.

Wenn Sie diese Klassen verwenden möchten, legen Sie das class-Attribut des Steuerelements auf den Namen der Klasse fest. Sie können einem Element mehrere Klassen zuweisen, Sie müssen lediglich die Klassennamen durch ein Leerzeichen trennen. In diesem Beispiel werden die win-ring-Klasse und die win-large-Klasse auf ein progress-Steuerelement angewendet.


<progress class="win-ring win-large" />

WinJS stellt die folgenden CSS-Klassen zum Auswählen des Stils für das progress-Steuerelement bereit:

win-error

Unterbricht eine bestimmte progress-Anzeige und zeigt diese im Fehlerstil an.

win-large

Legt für das progress-Steuerelement eine große Größe fest. Verwenden Sie diesen Stil für modale Vorgänge im Vollbildmodus.

win-medium

Legt für das progress-Steuerelement eine mittlere Größe fest. Verwenden Sie diese Klasse, um einen Statusring neben Text mit 20 Punkten anzuzeigen.

win-paused

Unterbricht die Aktualisierung einer bestimmten progress-Anzeige.

win-ring

Zeigt das progress-Steuerelement als unbestimmten Statusring an. Sie müssen die Breite und Höhe des progress-Steuerelements angeben, indem Sie die width-Eigenschaft und die height-Eigenschaft festlegen oder aber die win-medium-Klasse oder die win-large-Klasse verwenden.

Verwandte Themen

Schnellstart: Hinzufügen von Statussteuerelementen
Richtlinien und Prüfliste für Fortschrittssteuerelemente
Grundlagen zu CSS-Selektoren

 

 

Anzeigen:
© 2017 Microsoft