Eine einfache und vollständig anpassbare React Native Progress Stepper-Benutzeroberfläche

Blog

Eine einfache und vollständig anpassbare React Native Progress Stepper-Benutzeroberfläche

Eine einfache und vollständig anpassbare React Native Progress Stepper-Benutzeroberfläche

reagieren-native-fortschrittsschritte

Eine einfache und vollständig anpassbare React Native-Komponente, die eine Progress-Stepper-Benutzeroberfläche implementiert.

  • Jeder Schrittinhalt wird in einem anpassbaren ScrollView angezeigt.
  • Unten in der Komponente werden vollständig anpassbare Schaltflächen angezeigt, um zwischen den Schritten zu wechseln.
Beispiel eins Beispiel 2
Beispiele/ExampleOne.js Beispiele/ExampleTwo.js

Installation

Bei Verwendung von Garn:

Warum sagt die Cash-App, dass die Überweisung fehlgeschlagen ist?
yarn add react-native-progress-steps

Bei Verwendung von npm:

npm i react-native-progress-steps

Verwendungszweck

import { ProgressSteps, ProgressStep } from 'react-native-progress-steps';

Platzieren Sie einfach ein |_+_| Tag für jeden gewünschten Schritt innerhalb der |_+_| Verpackung.

Verwendung des Button-Stylings

Schaltflächen-Container und -Text sind mit |_+_| . vollständig anpassbar Requisiten.

Beispiel für die Verwendung zum Ändern der Textfarbe einer Schaltfläche:

Aktuelle Schrittfehler- und Validierungsbehandlung

Die |_+_| prop sollte verwendet werden, wenn beim Klicken auf die Schaltfläche 'Weiter' eine Validierung und Fehlerbehandlung erforderlich ist. Wenn Sie verhindern möchten, dass der nächste Schritt gerendert wird, setzen Sie |_+_| stütze auf |_+_|. Standardmäßig ist es |_+_|.

reagieren-qr-scanner

Beispiel für die Validierungsprüfung:

This is the content within step 1! This is the content within step 2! This is the content within step 3!

Dokumentation

Komponente „Fortschrittsschritte“

Name Beschreibung Standard Typ
Rahmenbreite Breite des Fortschrittsbalkens zwischen den Schritten 6 Nummer
borderStyle Art des Rahmens für den Fortschrittsbalken fest Zeichenfolge
activeStepIconBorderColor Außenrandfarbe für den aktiven Schritt #4bb543 Zeichenfolge
progressBarColor Farbe des Standard-Fortschrittsbalkens #ebebe4 Zeichenfolge
abgeschlossenProgressBarColor Farbe des abgeschlossenen Fortschrittsbalkens #4bb543 Zeichenfolge
activeStepIconColor Farbe des Symbols des aktiven Schritts transparent Zeichenfolge
abgeschlossenSchrittIconColor Farbe des Symbols für den abgeschlossenen Schritt #4bb543 Zeichenfolge
deaktiviertStepIconColor Farbe des deaktivierten Schrittsymbols #ebebe4 Zeichenfolge
labelFontFamily Schriftfamilie für die Stufensymbolbezeichnung iOS/Android-Standardschriftart Zeichenfolge
labelColor Farbe des Standardlabels hellgrau Zeichenfolge
activeLabelColor Farbe des aktiven Etiketts #4bb543 Zeichenfolge
abgeschlossenLabelColor Farbe des fertigen Etiketts hellgrau Zeichenfolge
activeStepNumColor Farbe der aktiven Schrittnummer Schwarz Zeichenfolge
abgeschlossenStepNumColor Farbe der abgeschlossenen Schrittnummer Schwarz Zeichenfolge
deaktiviertStepNumColor Farbe der deaktivierten Schrittnummer Weiß Zeichenfolge
abgeschlossenCheckColor Farbe des Häkchens für den abgeschlossenen Schritt Weiß Zeichenfolge
aktiver Schritt Geben Sie den aktiven Schritt manuell an 0 Nummer
ist komplett Setzen Sie alle Schritte in den aktiven Status falsch Boolesches

Fortschrittsschritt-Komponente

Name Beschreibung Standard Typ
Etikett Titel des aktuellen Schrittes, der angezeigt werden soll Null Zeichenfolge
aufWeiter Funktion, die aufgerufen wird, wenn die nächste Schritttaste gedrückt wird Null Funktionen
aufZurück Funktion, die aufgerufen wird, wenn die vorherige Schritttaste gedrückt wird Null Funktionen
aufSenden Funktion, die aufgerufen wird, wenn die Schaltfläche Schritt senden gedrückt wird Null Funktionen
nextBtnText Text, der in der nächsten Schaltfläche angezeigt werden soll Nächste Zeichenfolge
vorherigerBtnText Text, der in der vorherigen Schaltfläche angezeigt werden soll Vorherige Zeichenfolge
fertigBtnText Text, der im letzten Schritt in der Schaltfläche angezeigt werden soll einreichen Zeichenfolge
nextBtnStyle Style-Objekt, das den Schaltflächen Weiter/Beenden zur Verfügung gestellt wird { textAlign: ‘center’, padding: 8 } Objekt
nextBtnTextStyle Style-Objekt, das dem Weiter-/Fertig-Schaltflächentext zur Verfügung gestellt wird { Farbe: ‘#007aff’, fontSize: 18 } Objekt
nextBtnDisabled Wert zum Deaktivieren/Aktivieren der nächsten Schaltfläche falsch Boolesches
vorherigerBtnStyle Style-Objekt, das der vorherigen Schaltfläche zur Verfügung gestellt wird { textAlign: ‘center’, padding: 8 } Objekt
vorherigerBtnTextStyle Style-Objekt, das dem vorherigen Schaltflächentext hinzugefügt werden soll { Farbe: ‘#007aff’, fontSize: 18 } Objekt
vorherigeBtnDisabled Wert zum Deaktivieren/Aktivieren der vorherigen Schaltfläche falsch Boolesches
scrollViewProps Objekt zum Bereitstellen von Requisiten für die ScrollView-Komponente {} Objekt
Fehler Wird verwendet, um die Validierung des aktuellen Schritts zu unterstützen. Wenn wahr, wird der nächste Schritt nicht gerendert falsch Boolesches
BtnRow entfernen Wird verwendet, um den Fortschrittsschritt ohne die Schaltflächenzeile zu rendern falsch Boolesches

Beitragen

Pull-Requests sind immer willkommen! Fühlen Sie sich frei, ein neues GitHub-Thema für alle Änderungen zu öffnen, die vorgenommen werden können.

Arbeiten Sie an Ihrem ersten Pull Request? Daraus kannst du lernen kostenlos Serie So tragen Sie zu einem Open-Source-Projekt auf GitHub bei

brew install mongodb client

Download-Details:

Autor: colbymillerdev

GitHub: https://github.com/colbymillerdev/react-native-progress-steps

#react-native #programming #react-native