Install
npm install @zym-com/select
or
yarn add @zym-com/select
Import
import ScrollDom from "@zym-com/select";
import "@zym-com/select/dist/style.css";
Usage
import ScrollDom from "@zym-com/select";
import "@zym-com/select/dist/style.css";
function App() {
const options = {
configuration: {
defaultCheck: false,
selectTextStyle: {
fontFamily: "Microsoft Yahei",
fontSize: 12,
color: "rgba(255,255,255,1)",
fontWeight: "normal",
letterSpacing: 0,
fontStyle: "normal",
},
selectTextPadding: {
t: 0,
r: 0,
b: 0,
l: 8,
},
selectDafaultChecked: "index",
selectFieldChecked: {
fieldName: "label",
fieldValue: "选项一",
},
selectIndexChecked: 0,
selectBgColorSelect: "solidBgColor",
selectBgsolidBgColor: "rgba(34,39,41,0.7)",
selectBgAnamorphism: {
startVal: "rgba(255,68,68,1)",
endVal: "rgba(0,0,0,1)",
direction: 180,
},
selectBgImage: "",
selectBgBGSize: {
selectBgBGSizeW: 100,
selectBgBGSizeH: 80,
},
selectBgBGPosition: {
selectBgBGPositionW: 50,
selectBgBGPositionH: 50,
},
placeholder: "请选择",
placeholderTextStyle: {
fontFamily: "Microsoft Yahei",
fontSize: 12,
color: "rgba(128,128,128,1)",
fontWeight: "normal",
letterSpacing: 0,
fontStyle: "normal",
},
selectBorderWidth: 0,
selectBorderType: "solid",
selectBorderColor: "rgba(0,59,81,1)",
selectBorderRadius: 4,
dropDownIconDefault: true,
dropDownIconImg: "",
dropDownIconSize: {
dropDownIconSizeW: 20,
dropDownIconSizeH: 20,
},
dropDownIconPadding: {
t: 0,
r: 8,
b: 0,
l: 8,
},
dropDownIconBorderRadius: 0,
selectPictureSize: {
selectPictureSizeW: 20,
selectPictureSizeH: 20,
},
selectPictureMR: 5,
dropDownBoxHeight: 150,
dropDownBoxOffset: 2,
dropDownOptionsHeight: 40,
dropDownOptionPL: 8,
dropDownOptionItemSpacing: 4,
dropDownBoxBgColorSelect: "solidBgColor",
dropDownBoxsolidBgColor: "rgba(34,39,41,0.7)",
dropDownBoxAnamorphism: {
startVal: "rgba(255,68,68,1)",
endVal: "rgba(0,0,0,1)",
direction: 180,
},
dropDownBoxImage: "",
dropDownBoxBGSize: {
dropDownBoxBGSizeW: 100,
dropDownBoxBGSizeH: 80,
},
dropDownBoxBGPosition: {
dropDownBoxBGPositionW: 50,
dropDownBoxBGPositionH: 50,
},
itemDefaultTextStyle: {
fontFamily: "Microsoft Yahei",
fontSize: 12,
color: "rgba(255,255,255,1)",
fontWeight: "normal",
letterSpacing: 0,
lineHeight: 40,
fontStyle: "normal",
},
itemDefaultBgColorSelect: "solidBgColor",
itemDefaultBgsolidBgColor: "rgba(57, 69, 83,1)",
itemDefaultBgAnamorphism: {
startVal: "rgba(255,68,68,1)",
endVal: "rgba(0,0,0,1)",
direction: 180,
},
itemDefaultBgImage: "",
itemDefaultBgBGSize: {
itemDefaultBGSizeW: 100,
itemDefaultBGSizeH: 80,
},
itemDefaultBGPosition: {
itemDefaultBGPositionW: 50,
itemDefaultBGPositionH: 50,
},
itemDefaultBGBorderRadius: 4,
itemHoverTextStyle: {
fontFamily: "Microsoft Yahei",
fontSize: 14,
color: "rgba(255,255,255,1)",
fontWeight: "normal",
letterSpacing: 0,
lineHeight: 40,
fontStyle: "normal",
},
itemHoverBgColorSelect: "solidBgColor",
itemHoverBgsolidBgColor: "rgba(100, 115, 132,1)",
itemHoverBgAnamorphism: {
startVal: "rgba(255,68,68,1)",
endVal: "rgba(0,0,0,1)",
direction: 180,
},
itemHoverBgImage: "",
itemHoverBgBGSize: {
itemHoverBgBGSizeW: 100,
itemHoverBgBGSizeH: 80,
},
itemHoverBgBGPosition: {
itemHoverBgBGPositionW: 50,
itemHoverBgBGPositionH: 50,
},
itemHoverBGBorderRadius: 4,
scrollbarWidth: 4,
scrollbarColor: "rgba(255,255,255,0)",
scrollbarRadius: 10,
scrollbarThumbColor: "rgba(76,76,76,1)",
scrollbarThumbRadius: 10,
pictureSeries: [
{
mappingField: "",
pictureUrl: "",
pictureSize: {
pictureSizeW: 20,
pictureSizeH: 20,
},
pictureMR: 5,
seriesTextStyle: {
fontFamily: "Microsoft Yahei",
fontSize: 12,
color: "rgba(255,255,255,1)",
fontWeight: "normal",
letterSpacing: 0,
lineHeight: 0,
fontStyle: "normal",
},
},
],
selectBGStyle: true,
placeholderStyle: true,
selectBorderStyle: true,
dropDownIcon: true,
selectIcon: true,
dropDownBox: false,
},
base: {
width: 240,
height: 40,
},
dataSource: [
{
label: "选项一",
value: "1",
},
{
label: "选项二",
value: "2",
},
{
label: "选项三",
value: "3",
},
],
bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}
return (
<>
<ScrollDom {...options} />
</>
);
}
export default App;