Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz.
Web uygulamanızın ilerleme çubuklarının iyi göründüğünden ve herkes tarafından kullanılabildiğinden emin olun.
İlerleme çubukları, ulaşılması gereken bir hedef sağladıkları için kullanıcı etkileşimi için harikadır. Bir kaynak bekleyen bir web sayfasına bakmak yerine, bir ilerleme çubuğunun dolduğunu görürsünüz. İlerleme çubukları yalnızca gören kullanıcılarla sınırlı olmamalıdır. Herkes ilerleme çubuğunuzu kolaylıkla anlayabilmelidir.
Peki, React ile erişilebilir bir ilerleme çubuğu nasıl oluşturulur?
Bir İlerleme Çubuğu Bileşeni Oluşturun
ProgressBar.js adlı yeni bir bileşen oluşturun ve aşağıdaki kodu ekleyin:
sabit ProgressBar = ({progress}) => {
geri dönmek (
<div>
<div rolü="ilerleme çubuğu"
aria-valuenow={ilerleme}
aria-valuemin={0}
aria-valuemax={100}>
<açıklık>{`${ilerleme}%`}</span>
</div>
</div>
);
};
ihracatvarsayılan İlerleme çubuğu;
İlk div öğesi kapsayıcıdır ve ikinci div gerçek ilerleme çubuğudur. Yayılma öğesi, ilerleme çubuğu yüzdesini tutar.
Erişilebilirlik amacıyla, ikinci div aşağıdaki özniteliklere sahiptir:
- İlerleme çubuğunun rolü.
- aria-valuenow ilerleme çubuğunun mevcut değerini belirtmek için.
- ilerleme çubuğunun minimum değerini belirtmek için aria-valuemin.
- ilerleme çubuğunun maksimum değerini belirtmek için aria-valuemax.
İlerleme çubuğu maksimum ve minimum değerleri 0 ve 100 ise aria-valuemin ve aria-valuemax nitelikleri gerekli değildir, çünkü HTML varsayılan olarak bu değerlere sahiptir.
İlerleme Çubuğunu Şekillendirme
İlerleme çubuğuna satır içi stilleri veya Styled-bileşenler gibi CSS-in-JS kitaplığı. Bu yaklaşımların her ikisi de, bileşenleri bileşenden CSS'ye geçirmenin basit bir yolunu sağlar.
Bu işlevselliğe ihtiyacınız var çünkü ilerleme çubuğunun genişliği, donanım olarak iletilen ilerleme değerine bağlıdır.
Bu satır içi stilleri kullanabilirsiniz:
sabit konteyner = {
yükseklik: 20,
Genişlik: "100%",
arka plan rengi: "#ffff",
kenarlık Yarıçapı: 50,
kenar boşluğu: 50
}sabit çubuk = {
yükseklik: "100%",
Genişlik: `${ilerleme}%`,
arka plan rengi: "#90CAF9",
kenarlık Yarıçapı: "miras",
}
sabit etiket = {
dolgu malzemesi: "1rem",
renk: "#000000",
}
Aşağıda gösterildiği gibi stilleri dahil etmek için bileşenin dönüş kısmını değiştirin:
<div stili={kapsayıcı}>
<div stili={çubuk} rol="ilerleme çubuğu"
aria-valuenow={ilerleme}
aria-valuemin={0}
aria-valuemax={100}>
<açıklık stili={etiket} >{`${ilerleme}%`}</span>
</div>
</div>
İlerleme çubuğunu şu şekilde işleyin:
<İlerleme Çubuğu ilerlemesi={50}/>
Bu, yüzde 50'si tamamlanmış bir ilerleme çubuğu görüntüler.
React'te Yapı Bileşenleri
Artık, uygulamanızın herhangi bir bölümünde yeniden kullanabileceğiniz yüzdelerle erişilebilir bir ilerleme çubuğu oluşturabilirsiniz. React ile bunun gibi bağımsız UI bileşenleri oluşturabilir ve bunları karmaşık bir uygulamanın yapı taşları olarak kullanabilirsiniz.