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

道具

姓名	類型	預設值	描述
選項	大批	[]	可用選項的陣列（具有“key”、“label”對和可選的“disabled”屬性的物件）。
多種的	布林值	錯誤的	Select 是否支援多個值。
可搜尋的	布林值	真的	Select 是否可搜尋。
無結果訊息	細繩	沒有結果匹配	沒有結果匹配的訊息。
物化	布林值	真的	Select 的樣式應為Materialized還是預設。
預設值	布林值/數組/字串	錯誤的	如果您已預先選擇值，請使用此屬性。使用選項鍵數組進行多項選擇，或使用鍵作為字串進行單項選擇。
複選框	布林值	錯誤的	如果您想呈現複選框而不是清單項，請將其設為 true。
高度	數位	190	下拉式選單的高度。
佔位符內部	布林值	錯誤的	如果佔位符應該是一個選項。
佔位符	細繩	請選擇	選擇的佔位符。
正在打開	布林值	錯誤的	如果選擇應呈現開啟狀態。
箭	布林值	真的	是否在 Select 的標題上顯示箭頭。
殘障人士	布林值	錯誤的	是否應禁用“選擇”。
自訂捲軸	布林值	錯誤的	自訂捲軸（僅適用於 Chrome）
保持開放	布林值	錯誤的	選擇是否應保持開啟。
逗號分隔	布林值	錯誤的	如果您希望所選值是逗號分隔的字串，請將其設為「true」。（僅當 multiple 屬性設為「true」時才可用。）
單線	布林值	錯誤的	所選值（所選的標題）應包含在一行中。
後進先出	布林值	錯誤的	後進先出模式。用戶最後的選擇首先進行。（僅當 multiple 屬性設為「true」時才可用。）
搜尋索引	布林值	真的	啟用按索引和值欄位搜尋
全選按鈕	布林值	錯誤的	「全選按鈕」是否應在「選擇」的標題上可見。
是下拉式選單	布林值	真的	如果您想使用 Select as a Dropdown ，請將此設為 true 。當您選擇選項時，「選擇」會折疊，標題繼續將佔位符作為值。
標籤	布林值	錯誤的	是否支援自訂標籤。
自訂按鍵	物件/布林值	錯誤的	傳遞一個物件來更改預設選項鍵（ key 、 label ）。範例語法： `{ key: "url", label: "title" }` ，將鍵改為“url”，將標籤改為“title”。
阿賈克斯	布林值/對象	錯誤的	是否啟用ajax。該程式庫支援透過 fetch API 進行非同步呼叫。 ajax 物件可用的預設屬性： `{ url: '', headers: {}, debounce: 200, fetchOnSearch: false, q: "", nestedKey: false, searchPrompt: true, minLength: 1 }.`您可以在下一節和我們的演示頁面中找到所有 ajax 物件屬性的詳細資訊。
渲染選項	函數/布林值	錯誤的	使用此函數呈現自訂選項項
渲染選擇	函數/布林值	錯誤的	使用此功能來渲染自訂選定的項目
改變時	功能	不明確的	使用此回調擷取 Select 的變更觸發器。
打開時	功能	不明確的	使用此回調捕捉 Select 的開啟觸發器。
關閉時	功能	不明確的	使用此回調捕捉 Select 的關閉觸發器。

Ajax 道具 - 分解

姓名	類型	預設值	描述
網址	細繩	」	Select 將取得可用選項的 url。
標頭	目的	{}	傳遞您想要取得 api 的任何標頭。
去抖	數位	200	ajax 呼叫的反跳以毫秒為單位。
搜尋時獲取	布林值	錯誤的	當選擇開啟時，您是否不想預先填入選項，但希望根據使用者的搜尋值查詢它們。
q	細繩	」	此屬性與 fetchOnSearch 屬性一起設定為「true」。根據為您提供的 REST API 選項，您必須相應地變更此值。例如“&search={q}”。無論您在何處使用偽變數 {q}，使用者的搜尋查詢都會注入到最終請求中。
嵌套鍵	字串/布林值	錯誤的	如果您的 REST API 傳回更深層的實際數據，在嵌套鍵（假設為「articles」）內，請將nestedKey 設為「articles」。
搜尋提示	布林值	真的	該屬性與 fetchOnSearch 屬性一起使用，指示使用者在進行 ajax 搜尋之前還應該輸入多少個字元。
最小長度	數位	1	此屬性與 fetchOnSearch 屬性一起使用，並且 searchPrompt 設定為「true」。它是在 ajax 呼叫搜尋發生之前用戶應輸入的最小字元長度。

回調 - 細分

姓名	論據	描述
改變時	價值	如果選擇是單一，則為選定的物件；如果選擇是多個，則為物件陣列。
渲染選項	選項、索引	將要呈現的選項及其對應的索引。
渲染選擇	選擇、設定、取消選擇	選定的物件、已選取的設定以及用於取消選取的回呼函數。
打開時	不適用
關閉時	不適用

阿賈克斯範例

非常感謝 newsapi.org 提供的出色的 API。在我們的演示頁面中檢查此範例的實際效果。

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

使用 fetchOnSearch 的 Ajax 範例

在我們的演示頁面中檢查此範例的實際效果。

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