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;