react selectrix Download - react selectrix Quellcode herunterladen

react selectrix

Andere Kategorien

1.0.17

Herunterladen

Selectrix reagieren

Ein wunderschöner, materialisierter, benutzerfreundlicher und flexibler React Select- Ersatz

Demo

Schauen Sie sich hier die Demo und Anwendungsbeispiele an!

Installieren

 npm i --save-dev react-selectrix

Dokumentation

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

In Ihr Projekt importieren

 import Selectrix from "react-selectrix";

Grundlegendes Beispiel

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

Requisiten

Name	Typ	Standardwert	Beschreibung
Optionen	Array	[]	Ein Array der verfügbaren Optionen (Objekte mit „key“, „label“-Paaren und optionaler „disabled“-Eigenschaft).
mehrere	Boolescher Wert	FALSCH	Ob die Auswahl mehrere Werte unterstützt.
durchsuchbar	Boolescher Wert	WAHR	Ob die Auswahl durchsuchbar ist.
noResultsMessage	Zeichenfolge	Keine Ergebnisübereinstimmung	Die Meldung, dass keine Ergebnisse übereinstimmen .
materialisieren	Boolescher Wert	WAHR	Ob der Stil der Auswahl „Materialisiert“ oder „Standard“ sein soll.
Standardwert	boolescher Wert / Array / String	FALSCH	Wenn Sie vorab ausgewählte Werte haben, verwenden Sie diese Eigenschaft. Verwenden Sie ein Array von Optionstasten für die Mehrfachauswahl oder eine Taste als Zeichenfolge für die Einzelauswahl.
Kontrollkästchen	Boolescher Wert	FALSCH	Setzen Sie dies auf „true“, wenn Sie Kontrollkästchen anstelle von Listenelementen rendern möchten.
Höhe	Nummer	190	Die Höhe des Dropdowns.
placeHolderInside	Boolescher Wert	FALSCH	Wenn der Platzhalter eine Option sein soll.
Platzhalter	Zeichenfolge	Bitte auswählen	Der Platzhalter des Select.
istOffen	Boolescher Wert	FALSCH	Wenn die Auswahl gerendert werden soll, öffnen Sie sie.
Pfeil	Boolescher Wert	WAHR	Ob in der Kopfzeile von Select ein Pfeil angezeigt werden soll.
deaktiviert	Boolescher Wert	FALSCH	Ob die Auswahl deaktiviert werden soll.
benutzerdefinierte Bildlaufleiste	Boolescher Wert	FALSCH	Eine benutzerdefinierte Bildlaufleiste (nur für Chrome)
bleibOffen	Boolescher Wert	FALSCH	Ob die Auswahl offen bleiben soll oder nicht.
durch Kommas getrennt	Boolescher Wert	FALSCH	Wenn Sie möchten, dass die ausgewählten Werte eine durch Kommas getrennte Zeichenfolge sind, setzen Sie dies auf „true“. (Nur verfügbar, wenn mehrere Requisiten auf „true“ gesetzt sind.)
singleLine	Boolescher Wert	FALSCH	Wo die ausgewählten Werte (Select's Header) in einer Zeile enthalten sein sollen.
lifo	Boolescher Wert	FALSCH	Last-In-First-Out-Modus . Die letzte Auswahl des Benutzers steht an erster Stelle. (Nur verfügbar, wenn mehrere Requisiten auf „true“ gesetzt sind.)
suchIndex	Boolescher Wert	WAHR	Aktivieren Sie die Suche sowohl nach Index- als auch nach Wertfeldern
selectAllButton	Boolescher Wert	FALSCH	Ob in der Kopfzeile von Select eine Schaltfläche „Alle auswählen“ sichtbar sein soll.
isDropDown	Boolescher Wert	WAHR	Setzen Sie dies auf „true“, wenn Sie „Als Dropdown auswählen“ verwenden möchten. Wenn Sie eine Option auswählen, wird die Option „Auswählen“ ausgeblendet und die Kopfzeile enthält weiterhin den Platzhalter als Wert.
Tags	Boolescher Wert	FALSCH	Ob benutzerdefinierte Tags unterstützt werden sollen.
benutzerdefinierte Schlüssel	Objekt / boolescher Wert	FALSCH	Übergeben Sie ein Objekt, um die Standardoptionsschlüssel ( key, label ) zu ändern. Beispielsyntax: `{ key: "url", label: "title" }` , um den Schlüssel in „url“ und die Beschriftung in „title“ zu ändern.
Ajax	Boolescher Wert / Objekt	FALSCH	Ob Ajax aktiviert werden soll. Die Bibliothek unterstützt asynchrone Aufrufe über die Abruf-API. Verfügbare Standardeigenschaften des Ajax-Objekts: `{ url: '', headers: {}, debounce: 200, fetchOnSearch: false, q: "", nestedKey: false, searchPrompt: true, minLength: 1 }.` Details zu allen Ajax-Objekteigenschaften finden Sie im nächsten Abschnitt und auf unserer Demoseite.
onRenderOption	Funktion / boolescher Wert	FALSCH	Verwenden Sie diese Funktion, um benutzerdefinierte Optionselemente zu rendern
onRenderSelection	Funktion / boolescher Wert	FALSCH	Verwenden Sie diese Funktion, um benutzerdefinierte ausgewählte Elemente zu rendern
onChange	Funktion	undefiniert	Verwenden Sie diesen Rückruf, um den Änderungsauslöser von Select abzufangen.
onOpen	Funktion	undefiniert	Verwenden Sie diesen Rückruf, um den Open-Trigger von Select abzufangen.
onClose	Funktion	undefiniert	Verwenden Sie diesen Rückruf, um den Close-Trigger von Select abzufangen.

Ajax-Stütze – Panne

Name	Typ	Standardwert	Beschreibung
URL	Zeichenfolge	''	Die URL, unter der die Auswahl die verfügbaren Optionen abruft.
Kopfzeilen	Objekt	{}	Übergeben Sie alle Header, die Sie über die API abrufen möchten.
entprellen	Nummer	200	Die Entprellung der Ajax-Aufrufe in Millisekunden.
fetchOnSearch	Boolescher Wert	FALSCH	Legt fest, ob die Optionen beim Öffnen der Auswahl nicht vorab ausgefüllt sein sollen, Sie sie jedoch basierend auf dem Suchwert des Benutzers abfragen möchten.
Q	Zeichenfolge	''	Diese Eigenschaft geht mit der fetchOnSearch-Eigenschaft einher, die auf „true“ gesetzt ist. Abhängig davon, welche REST-API Ihnen Optionen zur Verfügung stellt, müssen Sie diesen Wert entsprechend ändern. zB „&search={q}“. Wo immer Sie die Pseudovariable {q} verwenden, wird die Suchanfrage des Benutzers in die endgültige Anfrage eingefügt.
verschachtelter Schlüssel	Zeichenfolge / boolescher Wert	FALSCH	Wenn Ihre REST-API die tatsächlichen Daten auf einer tieferen Ebene zurückgibt, in einem verschachtelten Schlüssel, sagen wir „articles“, setzen Sie nestedKey auf „articles“.
searchPrompt	Boolescher Wert	WAHR	Diese Eigenschaft geht mit der fetchOnSearch-Eigenschaft einher und gibt dem Benutzer an, wie viele weitere Zeichen eingegeben werden müssen, bevor die Ajax-Suche durchgeführt wird.
minLänge	Nummer	1	Diese Eigenschaft geht mit der Eigenschaft fetchOnSearch einher und searchPrompt ist auf „true“ gesetzt. Dies ist die Mindestlänge der Zeichen, die der Benutzer eingeben sollte, bevor die Ajax-Aufrufsuche durchgeführt wird.

Rückrufe – Aufschlüsselung

Name	Argumente	Beschreibung
onChange	Wert	Das ausgewählte Objekt, wenn die Auswahl einzeln ist, und ein Array von Objekten, wenn die Auswahl mehrere ist.
onRenderOption	Option, Index	Die Option, die gerendert werden soll, und der entsprechende Index.
onRenderSelection	ausgewählt, Einstellungen, abwählen	Das ausgewählte Objekt, die Select-Einstellungen und eine Rückruffunktion zur Aufhebung der Auswahl.
onOpen	N / A
onClose	N / A

Ajax-Beispiel

Vielen Dank an newsapi.org für ihre tolle API. Sehen Sie sich dieses Beispiel in Aktion auf unserer Demoseite an.

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

Ajax-Beispiel mit fetchOnSearch

Sehen Sie sich dieses Beispiel in Aktion auf unserer Demoseite an.

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

Beispiel für Tags

Sehen Sie sich dieses Beispiel in Aktion auf unserer Demoseite an.

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

Beispiel für ein benutzerdefiniertes Rendering

Sehen Sie sich dieses Beispiel in Aktion auf unserer Demoseite an.

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

Lizenz

MIT-Lizenz. Stratos Vetsos.

Beiträge

Beiträge sind mehr als willkommen. Führen Sie npm install && npm start auf dem Master aus und schon kann es losgehen! Die Datei CONTRIBUTING.md wird bald veröffentlicht.

Expandieren

Zusätzliche Informationen