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