Fortschrittsbalken
Fortschrittsanzeigen umfassen Linear Progress und Circular Progress.
Verwendung
Linear Progress ist rein per CSS geschrieben und wird durch einfaches Schreiben von HTML-Code aktiviert.
Circular Progress wird nach dem Laden der Seite automatisch initialisiert. Bei dynamisch generiertem Circular Progress muss mdui.mutation() zur Initialisierung aufgerufen werden.
Farben
Linear Progress verwendet die Primärfarbe.
Circular Progress verwendet die Primärfarbe oder ist mehrfarbig.
Linear Progress
Unbestimmter Fortschritt
Diese Fortschrittsanzeige wird verwendet, wenn der genaue Fortschrittswert nicht bekannt ist.
<div class="mdui-progress">
<div class="mdui-progress-indeterminate"></div>
</div>Bestimmter Fortschritt
Diese Fortschrittsanzeige wird verwendet, wenn der genaue Fortschrittswert bekannt ist.
Ändern Sie den Wert des Attributs width des Elements <div class="mdui-progress-determinate"></div>, um den Fortschritt zu aktualisieren.
<div class="mdui-progress">
<div class="mdui-progress-determinate" style="width: 30%;"></div>
</div>Circular Progress
Fügen Sie einfach das Element <div class="mdui-spinner"></div> hinzu, um Circular Progress zu generieren. Durch Hinzufügen der Klasse .mdui-spinner-colorful wird eine mehrfarbige Circular Progress generiert.
Sie können die Stilwerte für width und height der Klasse .mdui-spinner ändern, um die Größe von Circular Progress anzupassen, vorausgesetzt, die Werte für width und height sind gleich.
Dynamisch generiertes Circular Progress
Wenn Ihre Circular Progress-Komponente dynamisch generiert wird, muss mdui.mutation() zur Initialisierung aufgerufen werden.
Wenn Sie eine bestehende Circular Progress-Komponente ändern müssen, müssen Sie die Methode mdui.updateSpinners() aufrufen, um die Komponente neu zu initialisieren. Diese Methode akzeptiert einen CSS-Selektor (der den Klassennamen .mdui-spinner enthalten sollte), ein DOM-Element oder ein Array von DOM-Elementen als Parameter, um nur die angegebene Circular Progress neu zu initialisieren. Wenn kein Parameter übergeben wird, werden alle Circular Progress-Komponenten auf der Seite neu initialisiert.
CSS-Klassenliste
| Klassenname | Beschreibung |
|---|---|
.mdui-progress | Definiert eine Linear Progress. |
.mdui-progress-indeterminate | Linear Progress mit unbestimmtem Fortschritt. |
.mdui-progress-determinate | Linear Progress mit bestimmtem Fortschritt. |
.mdui-spinner | Definiert eine Circular Progress. |
.mdui-spinner-colorful | Mehrfarbige Circular Progress. |