Πώς να δημιουργήσετε μια προσβάσιμη γραμμή προόδου με το React

Οι γραμμές προόδου είναι εξαιρετικές για την αφοσίωση των χρηστών επειδή παρέχουν έναν στόχο προς επίτευξη. Αντί να κοιτάτε μια ιστοσελίδα που περιμένει έναν πόρο, βλέπετε μια γραμμή προόδου να γεμίζει. Οι γραμμές προόδου δεν πρέπει να περιορίζονται μόνο σε χρήστες με όραση. Όλοι θα πρέπει να είναι σε θέση να κατανοήσουν τη γραμμή προόδου σας με ευκολία.

Πώς μπορείτε λοιπόν να δημιουργήσετε μια προσβάσιμη γραμμή προόδου με το React;

Δημιουργήστε ένα στοιχείο γραμμής προόδου

Δημιουργήστε ένα νέο στοιχείο που ονομάζεται ProgressBar.js και προσθέστε τον ακόλουθο κώδικα:

συνθ Γραμμή προόδου = ({πρόοδος}) => {





instagram viewer


ΕΠΙΣΤΡΟΦΗ (
<div>
<div ρόλος="γραμμή προόδου"
 aria-valuenow={πρόοδος}
 aria-valuemin={0}
 aria-valuemax={100}>
<σπιθαμή>{`${progress}%`}</span>
</div>
</div>
 );
};
εξαγωγήΠροκαθορισμένο ProgressBar;

Το πρώτο στοιχείο div είναι το κοντέινερ και το δεύτερο div είναι η πραγματική γραμμή προόδου. Το στοιχείο span κρατά το ποσοστό της γραμμής προόδου.

Για λόγους προσβασιμότητας, το δεύτερο div έχει τα ακόλουθα χαρακτηριστικά:

• Ένας ρόλος της γραμμής προόδου.
• aria-valuenow για να υποδείξει την τρέχουσα τιμή της γραμμής προόδου.
• aria-valuemin για να υποδείξει την ελάχιστη τιμή της γραμμής προόδου.
• aria-valuemax για να υποδείξει τη μέγιστη τιμή της γραμμής προόδου.

Τα χαρακτηριστικά aria-valuemin και aria-valuemax δεν είναι απαραίτητα εάν οι μέγιστες και ελάχιστες τιμές της γραμμής προόδου είναι 0 και 100, καθώς η HTML ορίζει αυτές τις τιμές από προεπιλογή.

Διαμόρφωση της γραμμής προόδου

Μπορείτε να διαμορφώσετε τη γραμμή προόδου χρησιμοποιώντας ενσωματωμένα στυλ ή α Βιβλιοθήκη CSS-in-JS όπως styled-components. Και οι δύο αυτές προσεγγίσεις παρέχουν έναν απλό τρόπο μετάβασης στηρίξεων από το στοιχείο στο CSS.

Χρειάζεστε αυτήν τη λειτουργία επειδή το πλάτος της γραμμής προόδου εξαρτάται από την τιμή προόδου που μεταβιβάζεται ως στηρίγματα.

Μπορείτε να χρησιμοποιήσετε αυτά τα ενσωματωμένα στυλ:

συνθ δοχείο = {
 ύψος: 20,
 πλάτος: "100%",
 χρώμα του φόντου: "#fff",
 Ακτίνα συνόρων: 50,
 περιθώριο: 50
}
συνθ μπάρα = {
 ύψος: "100%",
 πλάτος: `${πρόοδος}%`,
 χρώμα του φόντου: "#90CAF9",
 Ακτίνα συνόρων: "κληρονομώ",
}
συνθ ετικέτα = {
 υλικό παραγεμίσματος: "1 εκμ",
 χρώμα: "#000000",
}

Τροποποιήστε το τμήμα επιστροφής του στοιχείου ώστε να περιλαμβάνει στυλ όπως φαίνεται παρακάτω:

<div style={container}>
<div style={bar} role="γραμμή προόδου"
 aria-valuenow={πρόοδος}
 aria-valuemin={0}
 aria-valuemax={100}>
<span style={label} >{`${progress}%`}</span>
</div>
</div>

Αποδώστε τη γραμμή προόδου ως εξής:

<Πρόοδος Γραμμής Προόδου={50}/>

Εμφανίζει μια γραμμή προόδου με 50 τοις εκατό ολοκληρωμένη.

Δημιουργία εξαρτημάτων στο React

Τώρα μπορείτε να δημιουργήσετε μια προσβάσιμη γραμμή προόδου με ποσοστά που μπορείτε να χρησιμοποιήσετε ξανά σε οποιοδήποτε μέρος της εφαρμογής σας. Με το React, μπορείτε να δημιουργήσετε ανεξάρτητα στοιχεία διεπαφής χρήστη όπως αυτά και να τα χρησιμοποιήσετε ως δομικά στοιχεία μιας πολύπλοκης εφαρμογής.