react selectrix تحميل - react selectrix تنزيل كود المصدر

react selectrix

فئات أخرى

1.0.17

تنزيل

رد فعل سيليكتريكس

بديل React Select جميل وحقيقي وسهل الاستخدام ومرن

تجريبي

تحقق من العرض التوضيحي واستخدم الأمثلة هنا!

التثبيت

 npm i --save-dev react-selectrix

التوثيق

https://github.com/stratos-vetsos/react-selectrix/

استيراد إلى مشروعك

 import Selectrix from "react-selectrix";

مثال أساسي

 < Selectrix
	multiple = { true }
	materialize = { true }
	options = { [
		{
			key : "javascript" ,
			label : "Javascript"
		} ,
		{
			key : "go" ,
			label : "Go"
		} ,
		{
			key : "ruby" ,
			label : "Ruby On Rails"
		} ,
		{
			key : "php" ,
			label : "PHP"
		}
	] }
	onChange = { value => console . log ( value ) }
/>

الدعائم

اسم	يكتب	القيمة الافتراضية	وصف
خيارات	صفيف	[]	مصفوفة من الخيارات المتاحة (الكائنات ذات أزواج "المفتاح" و"التسمية" والخاصية "المعطلة" اختياريًا).
عديد	منطقية	خطأ شنيع	ما إذا كان التحديد يدعم قيمًا متعددة.
قابلة للبحث	منطقية	حقيقي	ما إذا كان التحديد قابلاً للبحث أم لا.
noResultsMessage	خيط	لا توجد نتائج متطابقة	رسالة عدم تطابق النتائج .
تتحقق	منطقية	حقيقي	ما إذا كان نمط التحديد يجب أن يكون متحققًا أم افتراضيًا.
defaultValue	منطقية / صفيف / سلسلة	خطأ شنيع	إذا كان لديك قيم محددة مسبقًا، استخدم هذه الخاصية. استخدم مجموعة من مفاتيح الخيارات لتحديدات متعددة، أو استخدم المفتاح كسلسلة لتحديد واحد.
مربعات الاختيار	منطقية	خطأ شنيع	اضبط هذا على "صحيح" إذا كنت تريد عرض مربعات الاختيار بدلاً من عناصر القائمة.
ارتفاع	رقم	190	ارتفاع القائمة المنسدلة.
placeHolderInside	منطقية	خطأ شنيع	إذا كان ينبغي أن يكون العنصر النائب خيارًا.
العنصر النائب	خيط	الرجاء التحديد	العنصر النائب للتحديد.
isOpen	منطقية	خطأ شنيع	إذا كان يجب أن يكون التحديد مفتوحًا.
سهم	منطقية	حقيقي	ما إذا كان سيتم إظهار سهم على رأس التحديد أم لا.
عاجز	منطقية	خطأ شنيع	ما إذا كان يجب تعطيل التحديد.
customScrollbar	منطقية	خطأ شنيع	شريط تمرير مخصص (لمتصفح Chrome فقط)
StayOpen	منطقية	خطأ شنيع	إذا كان يجب أن يظل التحديد مفتوحًا أم لا.
commaSeperated	منطقية	خطأ شنيع	إذا كنت تريد أن تكون القيم المحددة سلسلة مفصولة بفواصل، فقم بتحويل هذا إلى "صحيح". (متوفر فقط مع عدة دعامات مضبوطة على "صحيح".)
com.singleLine	منطقية	خطأ شنيع	حيث يجب احتواء القيم المحددة (Select's Header) في سطر واحد.
com.lifo	منطقية	خطأ شنيع	وضع آخر ما دخل أولاً . الاختيار الأخير للمستخدم، يذهب أولاً. (متوفر فقط مع عدة دعامات مضبوطة على "صحيح".)
searchIndex	منطقية	حقيقي	تمكين البحث عن طريق حقلي الفهرس والقيمة
حدد الكلزر	منطقية	خطأ شنيع	ما إذا كان يجب أن يكون "زر تحديد الكل" مرئيًا في رأس التحديد.
isDropDown	منطقية	حقيقي	اضبط هذا على "صحيح" إذا كنت تريد استخدام القائمة المنسدلة " تحديد كقائمة منسدلة" . عندما تحدد خيارًا، يتم طي التحديد ويستمر الرأس في الاحتفاظ بالعنصر النائب كقيمة.
العلامات	منطقية	خطأ شنيع	ما إذا كان سيتم دعم العلامات المخصصة.
com.customKeys	كائن / منطقي	خطأ شنيع	قم بتمرير كائن لتغيير مفاتيح الخيارات الافتراضية (المفتاح، التسمية). مثال على بناء الجملة: `{ key: "url", label: "title" }` ، لتغيير المفتاح إلى "url" والتسمية إلى "title".
اياكس	منطقية / كائن	خطأ شنيع	ما إذا كان سيتم تمكين اياكس. تدعم المكتبة المكالمات غير المتزامنة من خلال fetch API. الخصائص الافتراضية المتاحة لكائن أجاكس: `{ url: '', headers: {}, debounce: 200, fetchOnSearch: false, q: "", nestedKey: false, searchPrompt: true, minLength: 1 }.` يمكنك العثور على تفاصيل لجميع خصائص كائنات أجاكس، في القسم التالي وفي صفحتنا التجريبية.
onRenderOption	الدالة / منطقية	خطأ شنيع	استخدم هذه الوظيفة لعرض عناصر الخيارات المخصصة
onRenderSelection	الدالة / منطقية	خطأ شنيع	استخدم هذه الوظيفة لعرض العناصر المحددة المخصصة
onChange	وظيفة	غير محدد	استخدم رد الاتصال هذا للقبض على مشغل التغيير الخاص بـ Select.
onOpen	وظيفة	غير محدد	استخدم رد الاتصال هذا للقبض على مشغل التحديد المفتوح.
onClose	وظيفة	غير محدد	استخدم رد الاتصال هذا للقبض على مشغل الإغلاق الخاص بـ Select.

اياكس الدعامة - انهيار

اسم	يكتب	القيمة الافتراضية	وصف
عنوان URL	خيط	''	عنوان url الذي سيحدده لجلب الخيارات المتاحة.
رؤوس	هدف	{}	قم بتمرير أي رؤوس تريد جلبها لواجهة برمجة التطبيقات.
نبذ	رقم	200	ارتداد مكالمات ajax بالمللي ثانية.
fetchOnSearch	منطقية	خطأ شنيع	ما إذا كنت لا تريد ملء الخيارات مسبقًا، عند فتح التحديد، ولكنك تريد الاستعلام عنها بناءً على قيمة بحث المستخدم.
س	خيط	''	تتوافق هذه الخاصية مع خاصية fetchOnSearch، والتي تم ضبطها على "true". اعتمادًا على واجهة REST API التي توفر لك الخيارات، يتعين عليك تغيير هذه القيمة وفقًا لذلك. على سبيل المثال "&search={q}". أينما تستخدم المتغير الزائف {q}، سيتم إدراج استعلام بحث المستخدم في الطلب النهائي.
NestedKey	سلسلة / منطقية	خطأ شنيع	إذا قامت REST API الخاصة بك بإرجاع البيانات الفعلية على مستوى أعمق، داخل مفتاح متداخل، دعنا نقول "مقالات"، قم بتعيين مفتاح متداخل على "مقالات".
searchPrompt	منطقية	حقيقي	تتوافق هذه الخاصية مع خاصية fetchOnSearch وتشير للمستخدم إلى عدد الأحرف التي يجب أن يكتبها، قبل إجراء بحث ajax.
minLength	رقم	1	تتوافق هذه الخاصية مع خاصية fetchOnSearch وتم ضبط searchPrompt على "true". هذا هو الحد الأدنى لطول الأحرف التي يجب على المستخدم كتابتها، قبل إجراء البحث عن مكالمة أجاكس.

الاسترجاعات - انهيار

اسم	الحجج	وصف
onChange	قيمة	الكائن المحدد إذا كان التحديد فرديًا ومصفوفة من الكائنات إذا كان التحديد متعددًا.
onRenderOption	الخيار، الفهرس	الخيار الذي سيتم عرضه والفهرس المقابل له.
onRenderSelection	المحدد، الإعدادات، إلغاء التحديد	الكائن المحدد وإعدادات التحديد ووظيفة رد الاتصال لاستخدامها في إلغاء التحديد.
onOpen	لا يوجد
onClose	لا يوجد

مثال اياكس

شكرًا جزيلاً لموقع newsapi.org على واجهة برمجة التطبيقات الرائعة الخاصة بهم. تحقق من هذا المثال عمليًا، في صفحتنا التجريبية.

 < Selectrix
	customKeys = { {
		key : "url" ,
		label : "title"
	} }
	ajax = { {
		url : "https://newsapi.org/v2/everything?q=bitcoin&sortBy=publishedAt&apiKey=9342a9a707ca49c4b2da34e9ea238ea6" ,
		nestedKey : "articles"
	} }
/>

مثال اياكس مع fetchOnSearch

تحقق من هذا المثال عمليًا، في صفحتنا التجريبية.

 < Selectrix
	multiple = { true }
	stayOpen = { true }
	materialize = { true }
	customKeys = { {
		key : "url" ,
		label : "title"
	} }
	ajax = { {
		url : "https://newsapi.org/v2/top-headlines?apiKey=9342a9a707ca49c4b2da34e9ea238ea6" ,
		fetchOnSearch : true ,
		q : "&q={q}" ,
		nestedKey : "articles" ,
		minLength : 3 ,
		debounce : 300
	} }
/>

مثال العلامات

تحقق من هذا المثال عمليًا، في صفحتنا التجريبية.

 < Selectrix
	multiple = { true }
	materialize = { true }
	tags = { true }
	options = { [
		{
			key : "hotdog" ,
			label : "Hot Dog"
		} ,
		{
			key : "pizza" ,
			label : "Pizza"
		}
	] }
	onChange = { value => console . log ( value ) }
/>

مثال تقديم مخصص

تحقق من هذا المثال عمليًا، في صفحتنا التجريبية.

 < Selectrix
	multiple = { true }
	materialize = { true }
	options = { [
		{
			key : "javascript" ,
			label : "Javascript"
		} ,
		{
			key : "go" ,
			label : "Go"
		} ,
		{
			key : "ruby" ,
			label : "Ruby On Rails"
		} ,
		{
			key : "php" ,
			label : "PHP"
		}
	] }
	onRenderOption = { onRenderOption }
	onRenderSelection = { onRenderSelection }
	onChange = { value => console . log ( value ) }
/>

const onRenderOption = ( option , index ) => (
	< span > < i className = "fa fa-laptop" > </ i > { option . label } </ span >
)

const onRenderSelection = ( selected , settings , deselect ) => (
	< span style = { { marginRight : 10 , border : "1px solid #eee" , padding : 5 } } >
		{ selected . label }
		< i style = { { paddingLeft : 5 , cursor : "pointer" } } onClick = { deselect } className = "fa fa-window-close" > </ i >
	</ span >
)