Select
npm package | npm downloads | jsdelivr | github |
---|---|---|---|
安装
yarn add @_nu/react-select @_nu/css-select
- @_nu/react-select: 逻辑组件
- @_nu/css-select: 样式组件
二次封装
/* @components/select/index.js */
import Select from "@_nu/react-select";
// core style
import "@_nu/css-select";
// skin of bootstrap
import "@_nu/css-select/css/skins/default.css";
// custome style
// import './style.css';
// base className of select
Select.defaultProps.classNameBase = "";
export default Select;
项目使用
import Select from "./components/Select";
const Page=()=>{
return (
<div>
<Select className="_l" onChange={(e)=>{
console.log(e.currentTarget.value);
}}>
<option value="1">large</option>
<option value="2">option2</option>
<option value="3">option3</option>
</Select>
<Select>
<option value="1">default</option>
<option value="2">option2</option>
<option value="3">option3</option>
</Select>
<Select className="_danger">
<option value="1">danger</option>
<option value="2">option2</option>
<option value="3">option3</option>
</Select>
<Select className="_s">
<option value="1">small</option>
<option value="2">option2</option>
<option value="3">option3</option>
</Select>
<Select className="_xs">
<option value="1">x-small</option>
<option value="2">option2</option>
<option value="3">option3</option>
</Select>
</div>
);
};
export default Page;
或者去 node_modules/@_nu/react-select/demo
查看更多细节.
接口
属性 | type | 默认值 | 功能 |
---|---|---|---|
children | string | Array | ' ' | children |
className | string | Array | ' ' | className |
classNameDefault | string | Array | ' ' | default className |
disabled | boolean | false | disabled status of button |
ComponentWrap | string | func | object | 'label' | wrapper |