React Native Progress Stepper UI . ที่เรียบง่ายและปรับแต่งได้อย่างเต็มที่

ลองใช้เครื่องมือของเราเพื่อกำจัดปัญหา

React Native Progress Stepper UI . ที่เรียบง่ายและปรับแต่งได้อย่างเต็มที่

react-native-progress-steps

ส่วนประกอบ React Native ที่เรียบง่ายและปรับแต่งได้อย่างเต็มที่ซึ่งใช้ Progress stepper UI

  • เนื้อหาแต่ละขั้นตอนจะแสดงภายใน ScrollView ที่ปรับแต่งได้
  • ปุ่มที่ปรับแต่งได้ทั้งหมดจะแสดงที่ด้านล่างของส่วนประกอบเพื่อย้ายไปมาระหว่างขั้นตอนต่างๆ
ตัวอย่างที่หนึ่ง ตัวอย่างที่สอง
ตัวอย่าง/ExampleOne.js ตัวอย่าง/ExampleTwo.js

การติดตั้ง

หากใช้เส้นด้าย:

โครงการ c# สำหรับผู้เริ่มต้น
yarn add react-native-progress-steps

หากใช้ npm:



npm i react-native-progress-steps

การใช้งาน

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

เพียงวาง |_+_| แท็กสำหรับแต่ละขั้นตอนที่ต้องการภายใน |_+_| กระดาษห่อ

การใช้งานสไตล์ปุ่ม

คอนเทนเนอร์ปุ่มและข้อความสามารถปรับแต่งได้อย่างเต็มที่โดยใช้ |_+_| อุปกรณ์ประกอบฉาก

ตัวอย่างการใช้งานเพื่อเปลี่ยนสีข้อความของปุ่ม:

ข้อผิดพลาดขั้นตอนปัจจุบันและการจัดการการตรวจสอบ

|_+_| ควรใช้ prop หากมีความจำเป็นสำหรับการตรวจสอบความถูกต้องและการจัดการข้อผิดพลาดเมื่อคลิกปุ่มถัดไป หากคุณต้องการป้องกันไม่ให้มีการแสดงขั้นตอนต่อไป ให้ตั้งค่า |_+_| ยกไปที่ |_+_|. โดยค่าเริ่มต้น จะเป็น |_+_|

แผนภูมิปฏิกิริยาฟอง

ตัวอย่างการใช้การตรวจสอบความถูกต้อง:

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

เอกสาร

ความคืบหน้า ขั้นตอน ส่วนประกอบ

ชื่อ คำอธิบาย ค่าเริ่มต้น พิมพ์
borderWidth ความกว้างของแถบความคืบหน้าระหว่างขั้นตอน 6 ตัวเลข
borderStyle ประเภทของเส้นขอบสำหรับแถบความคืบหน้า แข็ง สตริง
activeStepIconBorderColor สีขอบด้านนอกสำหรับขั้นตอนที่ใช้งานอยู่ #4bb543 สตริง
ความคืบหน้าBarColor สีของแถบความคืบหน้าเริ่มต้น #ebebe4 สตริง
เสร็จสิ้นProgressBarColor สีของแถบความคืบหน้าที่เสร็จสมบูรณ์ #4bb543 สตริง
activeStepIconColor สีของไอคอนขั้นตอนที่ใช้งานอยู่ โปร่งใส สตริง
เสร็จสมบูรณ์StepIconColor สีของไอคอนขั้นตอนที่เสร็จสมบูรณ์ #4bb543 สตริง
ปิดการใช้งานStepIconColor สีของไอคอนขั้นตอนที่ปิดใช้งาน #ebebe4 สตริง
labelFontFamily ตระกูลแบบอักษรสำหรับป้ายไอคอนขั้นตอน แบบอักษรเริ่มต้นของ iOS/Android สตริง
ป้ายสี สีของป้ายกำกับเริ่มต้น แสงสีเทา สตริง
activeLabelColor สีของฉลากที่ใช้งาน #4bb543 สตริง
เสร็จสิ้นLabelColor สีของฉลากที่เสร็จแล้ว แสงสีเทา สตริง
activeStepNumColor สีของหมายเลขขั้นตอนที่ใช้งาน สีดำ สตริง
เสร็จสมบูรณ์StepNumColor สีของหมายเลขขั้นตอนที่เสร็จสมบูรณ์ สีดำ สตริง
ปิดการใช้งานStepNumColor สีของหมายเลขขั้นตอนที่ปิดการใช้งาน สีขาว สตริง
เสร็จสิ้นCheckColor สีของเครื่องหมายถูกขั้นตอนที่เสร็จสมบูรณ์ สีขาว สตริง
activeStep ระบุขั้นตอนที่ใช้งานด้วยตนเอง 0 ตัวเลข
isComplete ตั้งค่าขั้นตอนทั้งหมดเป็นสถานะใช้งาน เท็จ บูลีน

ความคืบหน้า ส่วนประกอบขั้นตอน

ชื่อ คำอธิบาย ค่าเริ่มต้น พิมพ์
ฉลาก ชื่อของขั้นตอนปัจจุบันที่จะแสดง โมฆะ สตริง
onNext เรียกฟังก์ชันเมื่อกดปุ่มขั้นตอนต่อไป โมฆะ ฟังก์ชั่น
ก่อนหน้า เรียกใช้ฟังก์ชันเมื่อกดปุ่มขั้นตอนก่อนหน้า โมฆะ ฟังก์ชั่น
onSubmit เรียกใช้ฟังก์ชันเมื่อกดปุ่มส่งขั้นตอน โมฆะ ฟังก์ชั่น
ถัดไปBtnText ข้อความที่จะแสดงภายในปุ่มถัดไป ต่อไป สตริง
ก่อนหน้าBtnText ข้อความที่จะแสดงภายในปุ่มก่อนหน้า ก่อนหน้า สตริง
จบBtnText ข้อความที่จะแสดงภายในปุ่มในขั้นตอนสุดท้าย ส่ง สตริง
ต่อไปBtnStyle จัดรูปแบบวัตถุให้กับปุ่มถัดไป/เสร็จสิ้น { textAlign: 'center', padding: 8 } วัตถุ
ถัดไปBtnTextStyle จัดรูปแบบวัตถุให้กับข้อความปุ่มถัดไป/เสร็จสิ้น { สี: '# 007aff' ขนาดแบบอักษร: 18 } วัตถุ
ต่อไปBtnDisabled ค่าที่จะปิดการใช้งาน/เปิดใช้งานปุ่มถัดไป เท็จ บูลีน
ก่อนหน้าBtnStyle กำหนดรูปแบบวัตถุให้กับปุ่มก่อนหน้า { textAlign: 'center', padding: 8 } วัตถุ
ก่อนหน้าBtnTextStyle จัดรูปแบบวัตถุเพื่อจัดเตรียมให้กับข้อความปุ่มก่อนหน้า { สี: '# 007aff' ขนาดแบบอักษร: 18 } วัตถุ
ก่อนหน้าBtnDisabled ค่าที่จะปิดการใช้งาน/เปิดใช้งานปุ่มก่อนหน้า เท็จ บูลีน
scrollViewProps วัตถุที่จะจัดเตรียมอุปกรณ์ประกอบฉากให้กับองค์ประกอบ ScrollView {} วัตถุ
ข้อผิดพลาด ใช้เพื่อช่วยในการตรวจสอบขั้นตอนปัจจุบัน หากเป็นจริง ระบบจะไม่แสดงขั้นตอนต่อไป เท็จ บูลีน
ลบBtnRow ใช้เพื่อแสดงขั้นตอนความคืบหน้าโดยไม่มีแถวปุ่ม เท็จ บูลีน

การบริจาค

คำขอดึงยินดีต้อนรับเสมอ! อย่าลังเลที่จะเปิดปัญหา GitHub ใหม่สำหรับการเปลี่ยนแปลงใด ๆ ที่สามารถทำได้

ทำงานกับคำขอดึงครั้งแรกของคุณใช่หรือไม่ คุณสามารถเรียนรู้ได้จากสิ่งนี้ ฟรี ชุด วิธีมีส่วนร่วมในโครงการโอเพ่นซอร์สบน GitHub

roku พร้อมป้อนลิงค์

ดาวน์โหลดรายละเอียด:

ผู้เขียน: colbymillerdev

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

#react-native #การเขียนโปรแกรม #react native

ดูสิ่งนี้ด้วย:

ของใหม่

อ่านได้มากที่สุด

ตัวเลือกของบรรณาธิการ