react input pin code رد فعل - react input pin code رمز المصدر

react input pin code

مكونات الطرف الثالث

v1.2.1

تنزيل

تفاعل رمز دبوس الإدخال

مكون إدخال دبوس يمكن الوصول إليه وبسيط مصنوع من أدوات مصممة لـ ReactJs.

العرض التوضيحي

هنا لرؤية الوثائق والأمثلة.

رمز المصدر على https://github.com/luffy84217/React-input-pin-code.

تثبيت

للبدء ، قم بتثبيت وحفظ في تبعيات package.json الخاصة بك. json ، تشغيل:

npm install react-input-pin-code styled-components

أو

yarn add react-input-pin-code styled-components

يرجى ملاحظة أن المصانع المصممة هي تبعية الأقران.

الاستيراد

يمكنك استخدام الطريقتين التاليتين لاستيراد الوحدة النمطية.

 import { PinInput } from 'react-input-pin-code' // ES Module
or
var PinInput = require ( 'react-input-pin-code' ) . PinInput // CommonJS Module

الاستخدام

مثال أساسي

 import React from 'react' ;
import { PinInput } from 'react-input-pin-code' ;

export default ( ) => {
  const [ values , setValues ] = React . useState ( [ '' , '' , '' ] ) ;

  return (
    < PinInput
      values = { values }
      onChange = { ( value , index , values ) => setValues ( values ) }
    />
  ) ;
} ;

ملء حرف واحد في وقت واحد لكل إدخال. عند إدخال حرف ، ينقل التركيز إلى الإدخال التالي تلقائيًا في التسلسل حتى يتم ملء جميع المدخلات. وهنا شرح السلوك أدناه:

يمكنك ملء حرف واحد فقط لكل إدخال.
للكتابة فوق قيمة الإدخال ، لا تحتاج إلى تحديد النص في الإدخال. إذا قمت بكتابة رقم A أثناء تركيز الإدخال ، فسيتم تحديث الإدخال.
سيؤدي الضغط على Backspace عندما يكون فارغًا في الإدخال إلى نقل التركيز إلى الإدخال السابق (إن وجد) ومسح قيمة.

طول إدخال دبوس

يتوقع PinInput مجموعة من الأوتار للقيم values . عدد حقول الإدخال المقدمة يساوي طول الصفيف.

مرور المعرف ، اسم classn

يمكنك تمرير id أو name أو containerClassName أو inputClassName prop.ClassName والاسم سيتم مشاركته بين المدخلات ، مما يعني أنه سيكون لكل منهما اسمه على هذه القيمة ، فهو مريح لاستخدام العنصر الزائفة في ملف global.css . سيقوم ID بإلحاق فهرس بأي سلسلة تقدمها ونمرها إلى الإدخال المقابل. على سبيل المثال ، إذا قمت بتمرير FOO كمعرف وشريط كاسم وكانت هناك أربعة مدخلات ، فإن المعرفات الناتجة هي FOO-0 و FOO-1 و FOO-2 و FOO-3 وكل إدخال يحتوي على شريط الاسم.

حجم المدخلات

يمكنك التحكم في حجم المدخلات مع size الدعامة. يأتي بأربعة أحجام.

متنوع	مقاس	حجم الخط
XS	1.5rem (24px)	0.75REM (12px)
SM	2rem (32px)	0.875REM (14px)
MD	2.5rem (40 بكسل)	1rem (16px)
LG	3REM (48 بكسل)	1.125REM (18px)

السماح بقيم الإدخال الأبجدية الرقمية

بشكل افتراضي ، يتم تمرير رقم PinInput على أنه type الدعامة ، لذا فإنه يقبل فقط القيم الرقمية للظهور. لإضافة دعم للقيم الأبجدية الرقمية ، تمرير type الدعامة وقم بتعيين قيمته على النص أو الرقم .

التحقق من صحة وتنسيق

يوفر PinInput validate PROP لتحديد pattern السمة الأصلي ، وهو تعبير منتظم يجب أن تتطابق قيمة الإدخال من أجل التحقق من صحة القيمة.

Format الدعامة حدد وظيفة نقية لتحويل الإدخال الخام. على سبيل المثال ، لتعيين القيم على الحالة العليا:

(char: string) => char.toUpperCase()

حالة صالحة وغير صالحة

يمكنك تمرير validate الدعامة للتحقق من صحة قيم الإدخال ، إذا كانت قيمة الإدخال لا تتطابق مع اختبار ، فستظهر حدود الخطأ على الفور ، في حين أنها ستظهر فقط الحدود الصحيحة بعد ملء جميع المدخلات وتحقق من صحة.

يمكنك تعطيل هذا السلوك عن طريق showState Prop إلى False .

إضافة قناع

يمكنك تعيين mask Prop على True لمنع من إظهار قيم الإدخال. يعادل تعيين type السمة الأصلي إدخال كلمة المرور .

تعطيل إدارة التركيز

بشكل افتراضي ، يقوم PinInput بتحريك التركيز تلقائيًا إلى الإدخال التالي بمجرد ملء الحقل. كما أنه ينقل التركيز إلى إدخال سابق عند الضغط على Backspace مع التركيز على إدخال فارغ.

لتعطيل هذا السلوك ، قم بتعيين autoTab Prop على False

التركيز التلقائي

يوفر PinInput طريقة تركها تركز منذ البداية. ما عليك سوى تعيين دعامة autoFocus إلى True لتركيز الإدخال الأول عند التركيب الأولي للمكون.

بمجرد ملء جميع المدخلات

يوفر PinInput معالج الأحداث onComplete للوصول إلى قيم الإدخال ، على عكس onChange ، تشغيل onComplete فقط عند ملء جميع المدخلات.

لاحظ إذا كنت تقدم قائمة بالأحرف المسموح بها validate Prop ، فسيؤدي onComplete إلى تشغيل ONY عندما تمر جميع قيم الإدخال.

تغيير العنصر النائب

بشكل افتراضي ، فإن PinInput Placeholder هو (○) ، يمكنك تغيير ذلك إذا أردت.

الملء التلقائي ونسخ + لصق

حاول نسخ ولصق 1234 في أي من المدخلات.

بشكل افتراضي ، يمكنك تغيير إدخال واحد فقط في وقت واحد ، ولكن إذا استقبل أحد حقل الإدخال سلسلة أطول من خلال لصقها ، يحاول PinInput التحقق من صحة السلسلة وملء المدخلات الأخرى.

مدخلات دبوس (غير خاضعة للرقابة)

هناك أيضًا نسخة غير خاضعة للرقابة ، StatefulPinInput ، والتي تدير حالتها الخاصة. طول الإدخال الافتراضي لهذا المكون هو أربعة ، ولكن يمكنك تغيير ذلك عن طريق تمرير الرقم إلى length الدعامة. ASLO يمكنك تمرير initialValue كقيمة أولية لـ StatefulPinInput .

 import React from 'react' ;
import { StatefulPinInput } from 'react-input-pin-code' ;

export default ( ) => {
  return (
    < StatefulPinInput
      length = { 4 }
      initialValue = "1234"
    />
  ) ;
} ;

API

الدعائم PinInput

الاسم (*مطلوب)	يكتب	تقصير	وصف
موصوفة أريا	خيط		يضبط السمة الموصوفة ARIA.
أريا	خيط	"الرجاء إدخال رمز PIN"	تعيين سمة aria-label.
أريا	خيط		يضع سمة aria labelledby.
الإكمال التلقائي	خيط	"عن"	يحدد ما إذا كان يجب أن يوفر المتصفح اقتراحات القيمة.
التركيز التلقائي	منطقية	خطأ شنيع	إذا كان هذا صحيحًا ، فسيتم تركيز المدخلات على الجبل الأول.
Autotab	منطقية	حقيقي	إذا كان التركيز الحقيقي سينتقل تلقائيًا إلى الإدخال التالي/السابق بمجرد ملؤه أو حذفه
الحدود	خيط	RGB (204،204،204)	اسمح لك بتخصيص لون الحدود عندما لا يتم تركيز الإدخال.
errorborderColor	خيط	RGB (220،53،69)	اسمح لك بتخصيص لون الحدود عندما يكون الإدخال غير صالح.
FocusBorderColor	خيط	RGB (13،110،253)	اسمح لك بتخصيص لون الحدود عند تركيز الإدخال.
ValidBorderColor	خيط	RGB (25،135،84)	اسمح لك بتخصيص لون الحدود عندما يكون الإدخال صالحًا.
عاجز	منطقية		يعرض مكون في الحالة المعوقة.
شكل	(Char: String) => String		وظيفة نقية لتحويل المدخلات الخام.
بطاقة تعريف	خيط		قيمة سمة المعرف المراد إضافتها إلى عنصر الإدخال وكملصق لقيمة السمة.
inputmode	خيط		تتيح هذه السمة للمتصفح عرض لوحة مفاتيح افتراضية مناسبة. (ستحدد Type `type` Prop مناسبة `inputMode` تلقائيًا. إذا قمت بتمرير `inputMode` Prop ، فسيتجاوز إدخال `inputMode` المدمج.)
قناع	منطقية	خطأ شنيع	منع من إظهار رمز الدبوس
اسم	خيط		سمة الاسم.
Onblur	(الحدث: React.Focusevent) => void		يسمى الحدث Onblur المفعولات.
onchange	(القيمة: String \| String [] ، الفهرس: الرقم ، القيم: String []) => void		يسمى عندما يتم تغيير قيمة الإدخال.
oncomplete	(القيم: سلسلة []) => باطلة		يسمى عندما يتم ملء جميع المدخلات والتحقق من صحتها
onfocus	(الحدث: React.Focusevent) => void		دعا الحدث onfocus المشغلات.
Onkeydown	(الحدث: React.KeyboardEvent) => void		يسمى الحدث onkeydown مشغلات.
عنصر نائب	خيط	"س"	يتم عرضه عند عدم إدخال رمز PIN بعد.
مطلوب	منطقية		يعرض مكون في الحالة المطلوبة.
Showstate	منطقية	حقيقي	تحديد ما إذا كانت الحدود صالحة/غير صالحة تظهر أم لا.
مقاس	"XS" \| "SM" \| "MD" \| "LG"	"MD"	يقدم مكون في الحجم المقدم.
containerClassName	خيط		يتيح لك إلحاق فئة مخصصة بعنصر الحاوية.
حاوية	هدف	{}	يتيح لك تخصيص عنصر الحاوية.
inputClassName	خيط		يتيح لك إلحاق فئة مخصصة بإدخال عنصر.
InputStyle	هدف	{}	يتيح لك تخصيص عنصر الإدخال.
يكتب	"الرقم" \| "نص"	"رقم"	نوع القيم الذي يجب أن يسمح به مدخل الدبوس
التحقق	سلسلة \| سلسلة [] \| regexp		تعبير منتظم يجب أن تتطابق قيمة الإدخال من أجل تمرير التحقق من صحة القيد.
قيم(*)	خيط[]		سمة قيمة pininput.