Descargar react selectrix - descargar código fuente react selectrix

react selectrix

Otras categorias

1.0.17

Descargar

Reaccionar Selectrix

Un reemplazo React Select hermoso, materializado, fácil de usar y flexible

Manifestación

¡Mira la demostración y usa ejemplos aquí!

Instalación

 npm i --save-dev react-selectrix

Documentación

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

Importar a su proyecto

 import Selectrix from "react-selectrix";

Ejemplo básico

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

Accesorios

Nombre	Tipo	Valor predeterminado	Descripción
opciones	formación	[]	Una serie de opciones disponibles (objetos con pares de "clave", "etiqueta" y, opcionalmente, propiedad "deshabilitada").
múltiple	booleano	FALSO	Si Select admite múltiples valores.
buscable	booleano	verdadero	Si Select se puede buscar .
noResultsMensaje	cadena	Ningún resultado coincide	El mensaje de que no hay resultados coinciden .
materializar	booleano	verdadero	Si el estilo de Selección debe ser Materializado o predeterminado.
valor predeterminado	booleano/matriz/cadena	FALSO	Si tiene valores preseleccionados utilice esta propiedad. Utilice una matriz de claves de opción para selecciones múltiples o una clave como una cadena para una selección única.
casillas de verificación	booleano	FALSO	Establezca esto en verdadero si desea representar casillas de verificación en lugar de elementos de la lista.
altura	número	190	La altura del menú desplegable.
lugarSoporteDentro	booleano	FALSO	Si el marcador de posición debería ser una opción.
marcador de posición	cadena	Por favor seleccione	El marcador de posición de Select.
está abierto	booleano	FALSO	Si el Select debe abrirse.
flecha	booleano	verdadero	Si se debe mostrar una flecha en el encabezado de Select.
desactivado	booleano	FALSO	Si la selección debe desactivarse.
barra de desplazamiento personalizada	booleano	FALSO	Una barra de desplazamiento personalizada (solo para Chrome)
permanecer abierto	booleano	FALSO	Si el Select debe permanecer abierto o no.
comaSeparados	booleano	FALSO	Si desea que los valores seleccionados sean una cadena separada por comas, cambie esto a "verdadero". (Disponible solo con múltiples accesorios configurados en "verdadero".)
línea única	booleano	FALSO	Donde los valores seleccionados (Encabezado de selección) deben estar contenidos en una línea.
vida	booleano	FALSO	Modo último en entrar, primero en salir . La última selección del usuario va primero. (Disponible solo con múltiples accesorios configurados en "verdadero".)
índice de búsqueda	booleano	verdadero	Habilitar la búsqueda por los campos Índice y Valor
seleccionarTodoBotón	booleano	FALSO	Si un "botón Seleccionar todo" debería estar visible en el encabezado de Seleccionar.
es desplegable	booleano	verdadero	Establezca esto en verdadero si desea utilizar Seleccionar como menú desplegable . Cuando selecciona una opción, la Selección se contrae y el encabezado continúa teniendo el marcador de posición como valor.
etiquetas	booleano	FALSO	Ya sea para admitir etiquetas personalizadas.
claves personalizadas	objeto / booleano	FALSO	Pase un objeto para cambiar las claves de opción predeterminadas (clave, etiqueta). Sintaxis de ejemplo: `{ key: "url", label: "title" }` , para cambiar la clave a "url" y la etiqueta a "título".
ajax	booleano / objeto	FALSO	Ya sea para habilitar ajax. La biblioteca admite llamadas asincrónicas a través de la API de recuperación. Propiedades predeterminadas disponibles del objeto ajax: `{ url: '', headers: {}, debounce: 200, fetchOnSearch: false, q: "", nestedKey: false, searchPrompt: true, minLength: 1 }.` Puede encontrar detalles de todas las propiedades del objeto ajax en la siguiente sección y en nuestra página de demostración.
enRenderOption	función / booleano	FALSO	Utilice esta función para representar elementos de opciones personalizadas
enRenderSelection	función / booleano	FALSO	Utilice esta función para representar elementos seleccionados personalizados
en cambio	función	indefinido	Utilice esta devolución de llamada para detectar el activador de cambio de Select.
abierto	función	indefinido	Utilice esta devolución de llamada para detectar el disparador abierto de Select.
enCerrar	función	indefinido	Utilice esta devolución de llamada para detectar el disparador de cierre de Select.

Apoyo del Ajax - avería

Nombre	Tipo	Valor predeterminado	Descripción
URL	cadena	''	La URL donde Seleccionar va a buscar las opciones disponibles.
encabezados	objeto	{}	Pase los encabezados que desee recuperar api.
rebote	número	200	El rebote de las llamadas ajax en milisegundos.
buscar en búsqueda	booleano	FALSO	Si no desea que las opciones se completen previamente cuando se abre Seleccionar, pero desea consultarlas según el valor de búsqueda del usuario.
q	cadena	''	Esta propiedad va junto con la propiedad fetchOnSearch, establecida en "verdadero". Dependiendo de la API REST que le proporcione opciones, deberá cambiar este valor en consecuencia. por ejemplo, "&búsqueda={q}". Siempre que utilice la pseudovariable {q}, la consulta de búsqueda del usuario se inyectará en la solicitud final.
clave anidada	cadena / booleano	FALSO	Si su API REST devuelve los datos reales en un nivel más profundo, dentro de una clave anidada, digamos "artículos", establezca nestedKey en "artículos".
mensaje de búsqueda	booleano	verdadero	Esta propiedad va junto con la propiedad fetchOnSearch e indica al usuario cuántos caracteres más debe escribir antes de que se realice la búsqueda ajax.
minLongitud	número	1	Esta propiedad va junto con la propiedad fetchOnSearch y searchPrompt configurado en "verdadero". Es la longitud mínima de caracteres que el usuario debe escribir antes de que se realice la búsqueda de llamadas ajax.

Devoluciones de llamada - desglose

Nombre	Argumentos	Descripción
en cambio	valor	El objeto seleccionado si la Selección es única y una matriz de objetos si la Selección es múltiple.
enRenderOption	opción, índice	La opción que se va a representar y su índice correspondiente.
enRenderSelection	seleccionado, configuración, deseleccionar	El objeto seleccionado, la configuración de Selección y una función de devolución de llamada para usar para deseleccionar.
abierto	N / A
enCerrar	N / A

Ejemplo de Ajax

Muchas gracias a newsapi.org por su excelente API. Consulte este ejemplo en acción en nuestra página de demostración.

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

Ejemplo de Ajax con fetchOnSearch

Consulte este ejemplo en acción en nuestra página de demostración.

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

Ejemplo de etiquetas

Consulte este ejemplo en acción en nuestra página de demostración.

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

Ejemplo de renderizado personalizado

Consulte este ejemplo en acción en nuestra página de demostración.

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