unduh react selectrix - unduh kode sumber react selectrix

react selectrix

Kategori lainnya

1.0.17

Unduh

Bereaksi Selectrix

Pengganti React Select yang cantik, terwujud, mudah digunakan dan fleksibel

Demo

Lihat demo dan contoh penggunaan di sini!

Menginstal

 npm i --save-dev react-selectrix

Dokumentasi

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

Impor ke proyek Anda

 import Selectrix from "react-selectrix";

Contoh Dasar

 < 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 ) }
/>

Alat peraga

Nama	Jenis	Nilai Bawaan	Keterangan
pilihan	susunan	[]	Serangkaian opsi yang tersedia (Objek dengan pasangan "kunci", "label" dan properti opsional "dinonaktifkan").
banyak	boolean	PALSU	Apakah Select mendukung beberapa nilai.
dapat dicari	boolean	BENAR	Apakah Select dapat dicari .
tidak adaPesan Hasil	rangkaian	Tidak ada hasil yang cocok	Pesan tidak ada hasil yang cocok .
mewujudkan	boolean	BENAR	Apakah gaya Pilih harus Terwujud atau default.
Nilai default	boolean/array/string	PALSU	Jika Anda memiliki nilai yang dipilih sebelumnya, gunakan properti ini. Gunakan serangkaian kunci opsi untuk beberapa pilihan, atau kunci sebagai string untuk satu pilihan.
kotak centang	boolean	PALSU	Setel ini ke true jika Anda ingin merender Kotak Centang, bukan item daftar.
tinggi	nomor	190	Ketinggian tarik-turun.
tempatHolderDi dalam	boolean	PALSU	Jika placeholder harus menjadi pilihan.
pengganti	rangkaian	Silakan Pilih	Placeholder dari Pilih.
terbuka	boolean	PALSU	Jika Select harus dirender terbuka.
anak panah	boolean	BENAR	Apakah akan menampilkan panah pada header Select.
dengan disabilitas	boolean	PALSU	Apakah Select harus dinonaktifkan.
bilah gulir khusus	boolean	PALSU	Scrollbar khusus (hanya untuk Chrome)
tetap Terbuka	boolean	PALSU	Kalau di Select harus tetap terbuka atau tidak.
komaDipisahkan	boolean	PALSU	Jika Anda ingin nilai yang dipilih menjadi string yang dipisahkan koma, ubah ini menjadi "benar". ( Hanya tersedia dengan beberapa prop yang disetel ke "true". )
garis tunggal	boolean	PALSU	Dimana nilai yang dipilih ( Select's Header ) harus dimuat dalam satu baris.
kehidupan	boolean	PALSU	Mode Terakhir Masuk Pertama Keluar . Pilihan terakhir pengguna, didahulukan. ( Hanya tersedia dengan beberapa prop yang disetel ke "true". )
indeks pencarian	boolean	BENAR	Aktifkan pencarian berdasarkan bidang Indeks dan Nilai
pilihSemuaTombol	boolean	PALSU	Apakah "tombol pilih semua" harus terlihat di header Select.
adalahDropDown	boolean	BENAR	Setel ini ke true jika Anda ingin menggunakan Select as a Dropdown . Saat Anda memilih opsi, Pilih diciutkan dan header tetap memiliki placeholder sebagai nilai.
tag	boolean	PALSU	Apakah akan mendukung tag khusus.
kunci khusus	objek / boolean	PALSU	Berikan objek untuk mengubah kunci opsi default ( key, label ). Contoh Sintaks: `{ key: "url", label: "title" }` , untuk mengubah key menjadi "url" dan label menjadi "title".
ajax	boolean / objek	PALSU	Apakah akan mengaktifkan ajax. Pustaka mendukung panggilan asinkron melalui pengambilan API. Properti default objek ajax yang tersedia: `{ url: '', headers: {}, debounce: 200, fetchOnSearch: false, q: "", nestedKey: false, searchPrompt: true, minLength: 1 }.` Anda dapat menemukan rincian untuk semua properti objek ajax, di bagian selanjutnya dan di halaman demo kami.
padaRenderOption	fungsi / boolean	PALSU	Gunakan fungsi ini untuk merender item opsi khusus
padaRenderSelection	fungsi / boolean	PALSU	Gunakan fungsi ini untuk merender item pilihan khusus
di Perubahan	fungsi	belum diartikan	Gunakan panggilan balik ini untuk menangkap pemicu perubahan Select.
di Buka	fungsi	belum diartikan	Gunakan panggilan balik ini untuk menangkap pemicu terbuka Select.
diTutup	fungsi	belum diartikan	Gunakan panggilan balik ini untuk menangkap pemicu penutupan Select.

Prop Ajax - kerusakan

Nama	Jenis	Nilai Bawaan	Keterangan
url	rangkaian	''	Url yang dipilih akan mengambil opsi yang tersedia.
header	obyek	{}	Lewati header apa pun yang ingin Anda ambil api.
menghilangkan bouncing	nomor	200	Debounce panggilan ajax dalam milidetik.
ambilOnSearch	boolean	PALSU	Apakah Anda tidak ingin opsi sudah terisi sebelumnya, saat Pilih terbuka, namun Anda ingin menanyakannya berdasarkan nilai pencarian pengguna.
Q	rangkaian	''	Properti ini sejalan dengan properti FetchOnSearch, disetel ke "true". Bergantung pada REST API yang memberi Anda opsi, Anda harus mengubah nilai ini. misalnya "&penelusuran={q}". Di mana pun Anda menggunakan variabel semu {q}, kueri penelusuran pengguna akan dimasukkan ke dalam permintaan akhir.
kunci bersarang	string / boolean	PALSU	Jika REST API Anda mengembalikan data aktual di tingkat yang lebih dalam, di dalam kunci bersarang, katakanlah "artikel", setel nestedKey ke "artikel".
pencarianPrompt	boolean	BENAR	Properti ini sejalan dengan properti FetchOnSearch dan menunjukkan kepada pengguna berapa banyak lagi karakter yang harus diketik, sebelum pencarian ajax dilakukan.
minPanjang	nomor	1	Properti ini sejalan dengan properti FetchOnSearch dan SearchPrompt yang disetel ke "true". Ini adalah panjang minimum karakter yang harus diketik pengguna, sebelum pencarian panggilan ajax dilakukan.

Panggilan balik - kerusakan

Nama	Argumen	Keterangan
di Perubahan	nilai	Objek yang dipilih jika Pilihannya tunggal dan array objek jika Pilihannya banyak.
padaRenderOption	pilihan, indeks	Opsi yang akan dirender dan indeks yang sesuai.
padaRenderSelection	dipilih, pengaturan, batalkan pilihan	Objek yang dipilih, pengaturan Pilih dan fungsi panggilan balik yang digunakan untuk membatalkan pilihan.
di Buka	T/A
diTutup	T/A

Contoh Ajax

Terima kasih banyak kepada newsapi.org atas apinya yang luar biasa. Periksa contoh ini dalam tindakan, di halaman demo kami.

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

Contoh Ajax dengan mengambilOnSearch

Periksa contoh ini dalam tindakan, di halaman demo kami.

 < 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
	} }
/>

Contoh Tag

Periksa contoh ini dalam tindakan, di halaman demo kami.

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

Contoh Render Khusus

Periksa contoh ini dalam tindakan, di halaman demo kami.

 < 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 >
)