Загрузка 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 ) }
/>

Реквизит

Имя	Тип	Значение по умолчанию	Описание
параметры	множество	[]	Массив доступных опций (объекты с парами «ключ», «метка» и, возможно, свойством «отключено»).
несколько	логическое значение	ЛОЖЬ	Поддерживает ли Select несколько значений.
доступный для поиска	логическое значение	истинный	Доступен ли поиск по элементу Select.
noResultsMessage	нить	Нет совпадений результатов	Сообщение об отсутствии результатов .
материализоваться	логическое значение	истинный	Должен ли стиль Select быть Материализованным или по умолчанию.
значение по умолчанию	логическое значение/массив/строка	ЛОЖЬ	Если у вас есть предварительно выбранные значения, используйте это свойство. Используйте массив ключей опций для множественного выбора или ключ в виде строки для одиночного выбора.
флажки	логическое значение	ЛОЖЬ	Установите для этого параметра значение true, если вы хотите отображать флажки вместо элементов списка.
высота	число	190	Высота раскрывающегося списка.
местоДержательВнутри	логическое значение	ЛОЖЬ	Если заполнитель должен быть опцией.
заполнитель	нить	Пожалуйста, выберите	Заполнитель Select.
isOpen	логическое значение	ЛОЖЬ	Если Select должен быть открыт.
стрелка	логическое значение	истинный	Показывать ли стрелку в заголовке Select.
неполноценный	логическое значение	ЛОЖЬ	Должен ли выбор быть отключен.
пользовательская полоса прокрутки	логическое значение	ЛОЖЬ	Пользовательская полоса прокрутки (только для Chrome)
остатьсяОткрытым	логическое значение	ЛОЖЬ	Должен ли Select оставаться открытым или нет.
запятаяОтдельно	логическое значение	ЛОЖЬ	Если вы хотите, чтобы выбранные значения представляли собой строку, разделенную запятыми, установите для этого параметра значение «true». (Доступно только в том случае, если для нескольких свойств установлено значение «true».)
однолинейный	логическое значение	ЛОЖЬ	Где выбранные значения (заголовок Select) должны содержаться в одной строке.
жизнь	логическое значение	ЛОЖЬ	Режим «Последним пришел — первым ушел» . Последний выбор пользователя идет первым. (Доступно только в том случае, если для нескольких свойств установлено значение «true».)
индекс поиска	логическое значение	истинный	Включить поиск по полям индекса и значения.
выберитеAllButton	логическое значение	ЛОЖЬ	Должна ли быть видна кнопка «Выбрать все» в заголовке Select.
isDropDown	логическое значение	истинный	Установите для этого параметра значение true, если вы хотите использовать «Выбрать» как раскрывающийся список . Когда вы выбираете параметр, элемент «Выбрать» сворачивается, а в заголовке по-прежнему используется заполнитель в качестве значения.
теги	логическое значение	ЛОЖЬ	Поддерживать ли пользовательские теги.
пользовательские ключи	объект/логическое значение	ЛОЖЬ	Передайте объект, чтобы изменить ключи опций по умолчанию (key, label). Пример синтаксиса: `{ 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	функция/логическое значение	ЛОЖЬ	Используйте эту функцию для рендеринга выбранных элементов.
onChange	функция	неопределенный	Используйте этот обратный вызов, чтобы перехватить триггер изменения Select.
onOpen	функция	неопределенный	Используйте этот обратный вызов, чтобы перехватить триггер открытия Select.
onClose	функция	неопределенный	Используйте этот обратный вызов, чтобы перехватить триггер закрытия Select.

Опора Аякса - поломка

Имя	Тип	Значение по умолчанию	Описание
URL	нить	''	URL-адрес, по которому Select будет получать доступные параметры.
заголовки	объект	{}	Передайте любые заголовки, которые вы хотите получить от API.
отскакивать	число	200	Устранение дребезга вызовов ajax за миллисекунды.
выборкаOnSearch	логическое значение	ЛОЖЬ	Не хотите ли вы, чтобы параметры были предварительно заполнены при открытии окна «Выбрать», но вы хотите запросить их на основе значения поиска пользователя.
д	нить	''	Это свойство соседствует со свойством fetchOnSearch, для которого установлено значение «true». В зависимости от того, какой REST API предоставляет вам параметры, вам необходимо соответствующим образом изменить это значение. например, "&search={q}". Где бы вы ни использовали псевдопеременную {q}, поисковый запрос пользователя будет добавлен в окончательный запрос.
вложенный ключ	строка/логическое значение	ЛОЖЬ	Если ваш REST API возвращает фактические данные на более глубоком уровне, внутри вложенного ключа, скажем, «статьи», установите для параметра NestedKey значение «статьи».
поискПодсказка	логическое значение	истинный	Это свойство идет рядом со свойством fetchOnSearch и указывает пользователю, сколько еще символов необходимо ввести, прежде чем произойдет поиск ajax.
миндлина	число	1	Это свойство сочетается со свойством fetchOnSearch и параметром searchPrompt, для которого установлено значение «true». Это минимальная длина символов, которые пользователь должен ввести, прежде чем произойдет поиск вызова ajax.

Обратные вызовы – разбивка

Имя	Аргументы	Описание
onChange	ценить	Выделенный объект, если Select один, и массив объектов, если Select несколько.
onRenderOption	опция, индекс	Опция, которая будет отображена, и соответствующий ей индекс.
onRenderSelection	выбрано, настройки, отменить выбор	Выбранный объект, настройки выбора и функция обратного вызова, используемая для отмены выбора.
onOpen	Н/Д
onClose	Н/Д

Пример Аякса

Большое спасибо 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 >
)