Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision.
Stellen Sie sicher, dass die Fortschrittsbalken Ihrer Web-App gut aussehen und von allen verwendet werden können.
Fortschrittsbalken eignen sich hervorragend für die Benutzerinteraktion, da sie ein zu erreichendes Ziel angeben. Anstatt auf eine Webseite zu starren, die auf eine Ressource wartet, sehen Sie einen Fortschrittsbalken, der sich füllt. Fortschrittsbalken sollten nicht nur auf sehende Benutzer beschränkt sein. Jeder sollte in der Lage sein, Ihren Fortschrittsbalken mit Leichtigkeit zu verstehen.
Wie erstellt man also mit React einen barrierefreien Fortschrittsbalken?
Erstellen Sie eine Fortschrittsbalkenkomponente
Erstellen Sie eine neue Komponente namens ProgressBar.js und fügen Sie den folgenden Code hinzu:
konst ProgressBar = ({Fortschritt}) => {
zurückkehren (
<div>
<div-Rolle="Fortschrittsanzeige"
aria-valuenow={Fortschritt}
aria-valuemin={0}
aria-valuemax={100}>
<Spanne>{`${fortschritt}%`}</span>
</div>
</div>
);
};
ExportStandard Fortschrittsanzeige;
Das erste div-Element ist der Container und das zweite div ist der eigentliche Fortschrittsbalken. Das span-Element enthält den Prozentsatz des Fortschrittsbalkens.
Aus Gründen der Barrierefreiheit hat das zweite div die folgenden Attribute:
- Eine Rolle des Fortschrittsbalkens.
- aria-valuenow, um den aktuellen Wert des Fortschrittsbalkens anzuzeigen.
- aria-valuemin, um den Mindestwert des Fortschrittsbalkens anzugeben.
- aria-valuemax, um den maximalen Wert des Fortschrittsbalkens anzugeben.
Die Attribute aria-valuemin und aria-valuemax sind nicht erforderlich, wenn die Maximal- und Minimalwerte des Fortschrittsbalkens 0 und 100 sind, da HTML diese Werte standardmäßig verwendet.
Gestalten des Fortschrittsbalkens
Sie können den Fortschrittsbalken mit Inline-Stilen oder a gestalten CSS-in-JS-Bibliothek wie styled-components. Beide Ansätze bieten eine einfache Möglichkeit, Requisiten von der Komponente an das CSS zu übergeben.
Sie benötigen diese Funktionalität, da die Breite des Fortschrittsbalkens von dem Fortschrittswert abhängt, der als Props übergeben wird.
Sie können diese Inline-Stile verwenden:
konst Behälter = {
Höhe: 20,
Breite: "100%",
Hintergrundfarbe: "#F f f",
RandRadius: 50,
Marge: 50
}konst Balken = {
Höhe: "100%",
Breite: `${Fortschritt}%`,
Hintergrundfarbe: "#90CAF9",
RandRadius: "erben",
}
konst Bezeichnung = {
Polsterung: "1 Rest",
Farbe: "#000000",
}
Ändern Sie den Rückgabeteil der Komponente so, dass er Stile wie unten gezeigt enthält:
<div style={container}>
<div style={bar} role="Fortschrittsanzeige"
aria-valuenow={Fortschritt}
aria-valuemin={0}
aria-valuemax={100}>
<span style={label} >{`${fortschritt}%`}</span>
</div>
</div>
Rendern Sie den Fortschrittsbalken wie folgt:
<ProgressBar-Fortschritt={50}/>
Dies zeigt einen Fortschrittsbalken mit 50 Prozent abgeschlossen an.
Bauteile in Reaktion
Sie können jetzt einen barrierefreien Fortschrittsbalken mit Prozentwerten erstellen, den Sie in jedem Teil Ihrer Anwendung wiederverwenden können. Mit React können Sie solche unabhängigen UI-Komponenten erstellen und sie als Bausteine einer komplexen Anwendung verwenden.
