react selectrix ดาวน์โหลด - react selectrix ดาวน์โหลดซอร์สโค้ด

react selectrix

หมวดหมู่อื่นๆ

1.0.17

ดาวน์โหลด

ตอบสนอง Selectrix

การเปลี่ยน 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 ) }
/>

อุปกรณ์ประกอบฉาก

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
ตัวเลือก	อาร์เรย์	-	อาร์เรย์ของตัวเลือกที่มีอยู่ (ออบเจ็กต์ที่มีคู่ "key", "label" และคุณสมบัติ "disabled" เป็นทางเลือก)
หลายรายการ	บูลีน	เท็จ	ไม่ว่า Select จะรองรับหลายค่าหรือไม่
ค้นหาได้	บูลีน	จริง	ไม่ว่าจะ ค้นหา Select ได้หรือไม่
ไม่มีข้อความผลลัพธ์	เชือก	ไม่มีผลลัพธ์ที่ตรงกัน	ข้อความว่า ไม่มีผลลัพธ์ที่ตรงกัน
เป็นรูปธรรม	บูลีน	จริง	ไม่ว่าสไตล์ของ Select ควรเป็น รูปธรรม หรือเป็นค่าเริ่มต้น
ค่าดีฟอลต์	บูลีน / อาร์เรย์ / สตริง	เท็จ	หากคุณมีค่าที่เลือกไว้ล่วงหน้า ให้ใช้คุณสมบัตินี้ ใช้อาร์เรย์ของคีย์ตัวเลือกสำหรับการเลือกหลายรายการ หรือใช้คีย์เป็นสตริงสำหรับการเลือกรายการเดียว
ช่องทำเครื่องหมาย	บูลีน	เท็จ	ตั้งค่านี้เป็นจริงถ้าคุณต้องการแสดง ช่องทำเครื่องหมาย แทนรายการ
ความสูง	ตัวเลข	190	ความสูงของเมนูแบบเลื่อนลง
placeHolderInside	บูลีน	เท็จ	หากตัวยึดตำแหน่งควรเป็นทางเลือก
ตัวยึดตำแหน่ง	เชือก	กรุณาเลือก	ตัวยึดตำแหน่งของ Select
คือเปิด	บูลีน	เท็จ	หากเลือกควรเปิดการแสดงผล
ลูกศร	บูลีน	จริง	จะแสดงลูกศรบนส่วนหัวของ Select หรือไม่
พิการ	บูลีน	เท็จ	ควรปิดใช้งานการเลือกหรือไม่
แถบเลื่อนแบบกำหนดเอง	บูลีน	เท็จ	แถบเลื่อนที่กำหนดเอง (สำหรับ Chrome เท่านั้น)
อยู่เปิด	บูลีน	เท็จ	หากเลือกควรเปิดค้างไว้หรือไม่
คั่นด้วยเครื่องหมายจุลภาค	บูลีน	เท็จ	หากคุณต้องการให้ค่าที่เลือกเป็นสตริงที่คั่นด้วยเครื่องหมายจุลภาค ให้เปลี่ยนค่านี้เป็น "จริง" (ใช้ได้เฉพาะกับเสาหลายอันที่ตั้งค่าเป็น "จริง")
สายเดี่ยว	บูลีน	เท็จ	โดยที่ค่าที่เลือก ( Select's Header ) ควรอยู่ในหนึ่งบรรทัด
ลิโฟ	บูลีน	เท็จ	เข้าครั้งสุดท้ายออกก่อนโหมด การเลือกสุดท้ายของผู้ใช้จะไปก่อน (ใช้ได้เฉพาะกับเสาหลายอันที่ตั้งค่าเป็น "จริง")
ดัชนีการค้นหา	บูลีน	จริง	เปิดใช้งานการค้นหาทั้งในช่องดัชนีและค่า
เลือกปุ่มทั้งหมด	บูลีน	เท็จ	ควรมองเห็น "ปุ่มเลือกทั้งหมด" บนส่วนหัวของ Select หรือไม่
คือดรอปดาวน์	บูลีน	จริง	ตั้งค่านี้เป็นจริงหากคุณต้องการใช้ Select as a Dropdown เมื่อคุณเลือกตัวเลือก ตัวเลือกจะยุบลงและส่วนหัวยังคงมีพื้นที่ที่สำรองไว้เป็นค่า
แท็ก	บูลีน	เท็จ	ไม่ว่าจะสนับสนุนแท็กที่กำหนดเอง
คีย์ที่กำหนดเอง	วัตถุ / บูลีน	เท็จ	ส่งวัตถุเพื่อเปลี่ยนคีย์ตัวเลือกเริ่มต้น ( คีย์ ป้ายกำกับ ) ไวยากรณ์ตัวอย่าง: `{ key: "url", label: "title" }` เพื่อเปลี่ยนคีย์เป็น "url" และป้ายกำกับเป็น "title"
อาแจ็กซ์	บูลีน / วัตถุ	เท็จ	ไม่ว่าจะเปิดใช้งาน ajax. ไลบรารีรองรับการโทรแบบอะซิงโครนัสผ่านการดึงข้อมูล API คุณสมบัติเริ่มต้นที่มีอยู่ของวัตถุ ajax: `{ url: '', headers: {}, debounce: 200, fetchOnSearch: false, q: "", nestedKey: false, searchPrompt: true, minLength: 1 }.` คุณสามารถดูรายละเอียดเกี่ยวกับคุณสมบัติออบเจ็กต์ ajax ทั้งหมดได้ในส่วนถัดไปและในหน้าสาธิตของเรา
onRenderOption	ฟังก์ชั่น / บูลีน	เท็จ	ใช้ฟังก์ชันนี้เพื่อแสดงรายการตัวเลือกแบบกำหนดเอง
onRenderSelection	ฟังก์ชั่น / บูลีน	เท็จ	ใช้ฟังก์ชันนี้เพื่อแสดงรายการที่เลือกแบบกำหนดเอง
เมื่อเปลี่ยน	การทำงาน	ไม่ได้กำหนด	ใช้การโทรกลับนี้เพื่อจับทริกเกอร์การเปลี่ยนแปลงของ Select
บนเปิด	การทำงาน	ไม่ได้กำหนด	ใช้การโทรกลับนี้เพื่อจับทริกเกอร์เปิดของ Select
บนปิด	การทำงาน	ไม่ได้กำหนด	ใช้การโทรกลับนี้เพื่อจับทริกเกอร์ปิดของ Select

อาแจ็กซ์ พร็อพ - พังทลาย

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
URL	เชือก	-	URL ที่ Select จะดึงตัวเลือกที่มีอยู่
ส่วนหัว	วัตถุ	-	ส่งส่วนหัวใดๆ ที่คุณต้องการดึงข้อมูล API
ดีเด้ง	ตัวเลข	200	debounce ของการโทร ajax ในหน่วยมิลลิวินาที
ดึงข้อมูลOnSearch	บูลีน	เท็จ	ไม่ว่าคุณจะไม่ต้องการมีตัวเลือกที่เติมไว้ล่วงหน้าหรือไม่ เมื่อเลือกเปิดขึ้น แต่คุณต้องการสอบถามตัวเลือกเหล่านั้นตามค่าการค้นหาของผู้ใช้
ถาม	เชือก	-	คุณสมบัตินี้ใช้ร่วมกับคุณสมบัติ fetchOnSearch ซึ่งตั้งค่าเป็น "จริง" คุณต้องเปลี่ยนค่านี้ตามนั้น ทั้งนี้ขึ้นอยู่กับ REST API ที่ให้ตัวเลือกแก่คุณ เช่น "&search={q}" เมื่อใดก็ตามที่คุณใช้ตัวแปรหลอก {q} คำค้นหาของผู้ใช้จะถูกแทรกเข้าไปในคำขอสุดท้าย
ซ้อนคีย์	สตริง / บูลีน	เท็จ	หาก REST API ของคุณส่งคืนข้อมูลจริงในระดับที่ลึกกว่า ภายในคีย์ที่ซ้อนกัน สมมติว่า "บทความ" ให้ตั้งค่า NestedKey เป็น "บทความ"
ค้นหาพร้อมท์	บูลีน	จริง	คุณสมบัตินี้ใช้ร่วมกับคุณสมบัติ fetchOnSearch และระบุจำนวนอักขระที่ควรพิมพ์แก่ผู้ใช้ ก่อนที่การค้นหา ajax จะเกิดขึ้น
นาทีความยาว	ตัวเลข	1	คุณสมบัตินี้ใช้ร่วมกับคุณสมบัติ fetchOnSearch และ searchPrompt ที่ตั้งค่าเป็น "จริง" เป็นความยาวขั้นต่ำของอักขระที่ผู้ใช้ควรพิมพ์ ก่อนที่จะค้นหาการโทร ajax

โทรกลับ - พัง

ชื่อ	ข้อโต้แย้ง	คำอธิบาย
เมื่อเปลี่ยน	ค่า	ออบเจ็กต์ที่เลือกหาก Select เป็นแบบเดี่ยวและอาร์เรย์ของออบเจ็กต์หาก Select มีหลายรายการ
onRenderOption	ตัวเลือกดัชนี	ตัวเลือกที่กำลังจะแสดงผลและเป็นดัชนีที่เกี่ยวข้อง
onRenderSelection	เลือกอยู่ การตั้งค่า ยกเลิกการเลือก	วัตถุที่เลือก การตั้งค่าของการเลือก และฟังก์ชันการโทรกลับเพื่อใช้สำหรับการยกเลิกการเลือก
บนเปิด	ไม่มี
บนปิด	ไม่มี

ตัวอย่างอาแจ็กซ์

ขอขอบคุณ newsapi.org มากสำหรับ API ที่ยอดเยี่ยม ตรวจสอบตัวอย่างนี้ในทางปฏิบัติในหน้าสาธิตของเรา

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

ตัวอย่าง Ajax พร้อม 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 >
)