Wskaźnik postępu
Wskaźniki postępu obejmują liniowe wskaźniki postępu i okrągłe wskaźniki postępu.
Sposób użycia
Liniowe wskaźniki postępu są napisane w czystym CSS, wystarczy napisać kod HTML, aby zaczęły działać.
Okrągłe wskaźniki postępu są automatycznie inicjowane po zakończeniu ładowania strony. W przypadku dynamicznie generowanych okrągłych wskaźników postępu należy wywołać mdui.mutation() w celu inicjalizacji.
Kolory
Liniowy wskaźnik postępu używa koloru głównego.
Okrągły wskaźnik postępu używa koloru głównego lub jest wielokolorowy.
Powiązane artykuły
Wytyczne projektowe Material Design: Komponenty - Postęp i aktywność
Liniowy wskaźnik postępu
Nieokreślony postęp
Ten wskaźnik postępu jest używany w sytuacjach, gdy nie można uzyskać dokładnej wartości postępu.
<div class="mdui-progress">
<div class="mdui-progress-indeterminate"></div>
</div>Określony postęp
Ten wskaźnik postępu jest używany w sytuacjach, gdy znana jest dokładna wartość postępu.
Zmień wartość atrybutu width elementu <div class="mdui-progress-determinate"></div>, aby zaktualizować postęp.
<div class="mdui-progress">
<div class="mdui-progress-determinate" style="width: 30%;"></div>
</div>Okrągły wskaźnik postępu
Wystarczy dodać element <div class="mdui-spinner"></div>, aby wygenerować okrągły wskaźnik postępu. Dodanie klasy .mdui-spinner-colorful wygeneruje wielokolorowy okrągły wskaźnik postępu.
Można zmienić wartości width i height klasy .mdui-spinner, aby zmienić rozmiar okrągłego wskaźnika postępu, ale wartości width i height muszą być równe.
Dynamicznie generowany okrągły wskaźnik postępu
Jeśli twój komponent okrągłego wskaźnika postępu jest generowany dynamicznie, musisz wywołać mdui.mutation() w celu inicjalizacji.
Jeśli chcesz zmodyfikować istniejący komponent okrągłego wskaźnika postępu, musisz wywołać metodę mdui.updateSpinners(), aby ponownie zainicjować komponent. Metoda ta może przyjąć jako parametr selektor CSS (powinien zawierać nazwę klasy .mdui-spinner), element DOM lub tablicę elementów DOM, co oznacza ponowną inicjalizację tylko określonych okrągłych wskaźników postępu. Jeśli nie zostanie przekazany żaden parametr, wszystkie okrągłe wskaźniki postępu na stronie zostaną ponownie zainicjowane.
Lista klas CSS
| Nazwa klasy | Opis |
|---|---|
.mdui-progress | Definiuje liniowy wskaźnik postępu. |
.mdui-progress-indeterminate | Liniowy wskaźnik postępu o nieokreślonym postępie. |
.mdui-progress-determinate | Liniowy wskaźnik postępu o określonym postępie. |
.mdui-spinner | Definiuje okrągły wskaźnik postępu. |
.mdui-spinner-colorful | Wielokolorowy okrągły wskaźnik postępu. |