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

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

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

ΚΑΤΑΣΚΕΥΗ ΒΙΝΤΕΟ ΤΗΣ ΗΜΕΡΑΣ

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

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

πώς μπορώ να προσθέσω εφαρμογές στην έξυπνη τηλεόραση vizio μου

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;

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

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

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

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

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

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

όλες οι θύρες usb που δεν λειτουργούν με windows 10

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

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

πώς να ορίσετε έναν λογαριασμό gmail ως προεπιλογή

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", 
}

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

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

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

<ProgressBar progress={50}/>

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

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

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