Folyamatjelző
A folyamatjelzők közé tartoznak a lineáris és a kör alakú folyamatjelzők.
Használat
A lineáris folyamatjelzők tisztán CSS-sel készültek, a használatukhoz elegendő a HTML kód megírása.
A kör alakú folyamatjelzők az oldal betöltése után automatikusan inicializálódnak. Dinamikusan generált kör alakú folyamatjelzők esetén meg kell hívni az mdui.mutation() metódust az inicializáláshoz.
Színek
A lineáris folyamatjelző az elsődleges színt használja.
A kör alakú folyamatjelző az elsődleges színt vagy többszínű megjelenést használ.
Kapcsolódó olvasmányok
Material Design tervezési irányelvek: Komponensek – Folyamat és aktivitási állapotok
Lineáris folyamatjelző
Határozatlan folyamat
Ez a folyamatjelző olyan esetekben használatos, amikor a folyamat pontos értéke nem ismert.
<div class="mdui-progress">
<div class="mdui-progress-indeterminate"></div>
</div>Határozott folyamat
Ez a folyamatjelző olyan esetekben használatos, amikor a folyamat pontos értéke ismert.
A folyamat frissítéséhez módosítsa a <div class="mdui-progress-determinate"></div> elem width tulajdonságának értékét.
<div class="mdui-progress">
<div class="mdui-progress-determinate" style="width: 30%;"></div>
</div>Kör alakú folyamatjelző
Csak adja hozzá a <div class="mdui-spinner"></div> elemet a kör alakú folyamatjelző létrehozásához. A .mdui-spinner-colorful osztály hozzáadásával többszínű kör alakú folyamatjelzőt hozhat létre.
Módosíthatja a kör alakú folyamatjelző méretét a .mdui-spinner osztály width és height stílusértékeinek megváltoztatásával, de ügyeljen rá, hogy a width és height értékei megegyezzenek.
Dinamikusan generált kör alakú folyamatjelző
Ha a kör alakú folyamatjelző összetevője dinamikusan jön létre, az inicializáláshoz meg kell hívni az mdui.mutation() metódust.
Ha módosítania kell egy meglévő kör alakú folyamatjelző összetevőt, meg kell hívnia az mdui.updateSpinners() metódust az összetevő újra-inicializálásához. Ez a metódus paraméterként fogadhat egy CSS-választót (amelynek tartalmaznia kell a .mdui-spinner osztálynevet), egy DOM-elemet vagy DOM-elemek tömbjét, jelezve, hogy csak a megadott kör alakú folyamatjelzőket kell újra-inicializálni. Ha nem ad meg paramétert, az oldal összes kör alakú folyamatjelzője újra lesz inicializálva.
CSS osztályok listája
| Osztálynév | Leírás |
|---|---|
.mdui-progress | Lineáris folyamatjelző meghatározása. |
.mdui-progress-indeterminate | Határozatlan állapotú lineáris folyamatjelző. |
.mdui-progress-determinate | Határozott állapotú lineáris folyamatjelző. |
.mdui-spinner | Kör alakú folyamatjelző meghatározása. |
.mdui-spinner-colorful | Többszínű kör alakú folyamatjelző. |