İlerleme Çubuğu
İlerleme çubukları, doğrusal ilerleme çubuklarını ve dairesel ilerleme çubuklarını içerir.
Kullanım
Doğrusal ilerleme çubukları saf CSS ile yazılmıştır ve etkinleşmesi için yalnızca HTML kodu yazılması gerekir.
Dairesel ilerleme çubukları, sayfa yüklendikten sonra otomatik olarak başlatılır. Dinamik olarak oluşturulan dairesel ilerleme çubukları için başlatma amacıyla mdui.mutation() çağrılmalıdır.
Renkler
Doğrusal ilerleme çubukları ana rengi kullanır.
Dairesel ilerleme çubukları ana rengi veya renkli olanı kullanır.
Doğrusal ilerleme çubuğu
Belirsiz ilerleme
Bu ilerleme çubuğu, tam ilerleme değerinin bilinemediği durumlar için kullanılır.
<div class="mdui-progress">
<div class="mdui-progress-indeterminate"></div>
</div>Belirli ilerleme
Bu ilerleme çubuğu, tam ilerleme değerinin bilindiği durumlar için kullanılır.
İlerlemeyi güncellemek için <div class="mdui-progress-determinate"></div> öğesinin width özniteliğinin değerini değiştirmeniz yeterlidir.
<div class="mdui-progress">
<div class="mdui-progress-determinate" style="width: 30%;"></div>
</div>Dairesel ilerleme çubuğu
Dairesel bir ilerleme çubuğu oluşturmak için <div class="mdui-spinner"></div> öğesini eklemeniz yeterlidir. Renkli dairesel ilerleme çubuğu oluşturmak için .mdui-spinner-colorful sınıfını ekleyin.
Dairesel ilerleme çubuğunun boyutunu değiştirmek için .mdui-spinner sınıfının width ve height stil değerlerini değiştirebilirsiniz, ancak width ve height değerlerinin eşit olduğundan emin olmalısınız.
Dinamik olarak oluşturulan dairesel ilerleme çubuğu
Dairesel ilerleme çubuğu bileşeniniz dinamik olarak oluşturulmuşsa, başlatmak için mdui.mutation() çağırmanız gerekir.
Mevcut bir dairesel ilerleme çubuğu bileşenini değiştirmeniz gerekiyorsa, bileşeni yeniden başlatmak için mdui.updateSpinners() metodunu çağırmanız gerekir. Bu metod, bir CSS seçicisi (bu seçici .mdui-spinner sınıfını içermelidir), bir DOM öğesi veya DOM öğelerinden oluşan bir diziyi parametre olarak kabul edebilir ve bu, yalnızca belirtilen dairesel ilerleme çubuklarının yeniden başlatılacağı anlamına gelir. Eğer parametre girilmezse, sayfadaki tüm dairesel ilerleme çubukları yeniden başlatılacaktır.
CSS Sınıf Listesi
| Sınıf Adı | Açıklama |
|---|---|
.mdui-progress | Bir doğrusal ilerleme çubuğu tanımlayın. |
.mdui-progress-indeterminate | Belirsiz ilerlemeye sahip doğrusal ilerleme çubuğu. |
.mdui-progress-determinate | Belirli ilerlemeye sahip doğrusal ilerleme çubuğu. |
.mdui-spinner | Bir dairesel ilerleme çubuğu tanımlayın. |
.mdui-spinner-colorful | Renkli dairesel ilerleme çubuğu. |