React ile Erişilebilir Bir İlerleme Çubuğu Nasıl Oluşturulur

İlerleme çubukları, ulaşılacak bir hedef sağladıkları için kullanıcı katılımı için mükemmeldir. Bir kaynağı 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 nasıl erişilebilir bir ilerleme çubuğu oluşturursunuz?

GÜNÜN YAPILAN VİDEOSU

İlerleme Çubuğu Bileşeni Oluşturun

ProgressBar.js adlı yeni bir bileşen oluşturun ve aşağıdaki kodu ekleyin:

const ProgressBar = ({progress}) => { 
    return ( 
        <div> 
            <div role="progressbar" 
                 aria-valuenow={progress} 
                 aria-valuemin={0} 
                 aria-valuemax={100}> 
                <span>{`${progress}%`}</span> 
            </div> 
        </div> 
    ); 
}; 
   
export default ProgressBar;

İ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 özelliklere sahiptir:

izinsiz bluetooth ile telefon hacklemek

İlerleme çubuğunun rolü.
aria-valuenow, ilerleme çubuğunun geçerli 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, HTML varsayılan olarak bu değerlere ayarlandığından gerekli değildir.

İlerleme Çubuğunu Şekillendirme

Satır içi stilleri veya bir Tarz bileşenleri gibi JS içinde CSS kitaplığı . Bu yaklaşımların her ikisi de, bileşenden CSS'ye aksesuar aktarmanın basit bir yolunu sağlar.

Bu işlevselliğe ihtiyacınız var çünkü ilerleme çubuğunun genişliği, sahne olarak iletilen ilerleme değerine bağlıdır.

Bu satır içi stilleri kullanabilirsiniz:

Windows 10 görev çubuğunda pil simgesi nasıl bulunur

const container = { 
    height: 20, 
    width: "100%", 
    backgroundColor: "#fff", 
    borderRadius: 50, 
    margin: 50 
} 
  
const bar = { 
    height: "100%", 
    width: `${progress}%`, 
    backgroundColor: "#90CAF9", 
    borderRadius: "inherit", 
} 
  
const label = { 
    padding: "1rem", 
    color: "#000000", 
}

Bileşenin dönüş kısmını aşağıda gösterildiği gibi stilleri içerecek şekilde değiştirin:

<div style={container}> 
    <div style={bar} role="progressbar" 
        aria-valuenow={progress} 
        aria-valuemin={0} 
        aria-valuemax={100}> 
        <span style={label} >{`${progress}%`}</span> 
    </div> 
</div>

İlerleme çubuğunu şu şekilde işleyin:

<ProgressBar progress={50}/>

Bu, yüzde 50'si tamamlanmış bir ilerleme çubuğu görüntüler.

React'te Bina Bileşenleri

Artık, uygulamanızın herhangi bir bölümünde yeniden kullanabileceğiniz yüzdeleri olan 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.