@zym-com/input-search

1.0.6 / 2023-07-27

• input-search 组件发布

Install

npm install @zym-com/input-search

or

yarn add @zym-com/input-search

Basic Usage

import InputSearch from "@zym-com/input-search";
import "@zym-com/input-search/dist/style.css";

function App() {
const options = {
    "configuration": {
        "textStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 15,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 2,
            "fontStyle": "normal"
        },
        "levelalignment": "left",
        "valuePadding": {
            "l": 8,
            "r": 0
        },
        "bgColorSelect": "solidBgColor",
        "solidBgColor": "rgba(24, 144, 255,0.15)",
        "anamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "image": "",
        "imageSize": "cover",
        "borderRadiusName": 6,
        "transparency": 1,
        "placeholderValue": "请输入",
        "placeholderTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 15,
            "color": "rgba(113,111,111,1)",
            "fontWeight": "normal",
            "letterSpacing": 2,
            "fontStyle": "normal"
        },
        "borderStyle": "solid",
        "borderWidthName": 2,
        "borderColor": "rgba(24, 144, 255,1)",
        "shadow": {
            "shadowOffsetX": 0,
            "shadowOffsetY": 0,
            "shadowBlur": 0,
            "shadowColor": "rgba(255,255,255,1)"
        },
        "clickTrigger": true,
        "valueTrigger": false,
        "blurTrigger": false,
        "searchBtnWH": {
            "W": 85,
            "H": 45
        },
        "searchBtnRT": {
            "R": -100,
            "T": 50
        },
        "searchBtnBgStype": "solidBgColor",
        "searchBtnBgColor": "rgba(24, 144, 255,0.15)",
        "searchBtnBgImage": "",
        "searchBtnBorderRadius": 10,
        "searchBtnType": "solidBgColor",
        "searchBtnText": "搜索",
        "searchBtnTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 15,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 2,
            "fontStyle": "normal"
        },
        "searchBtnImage": "",
        "searchBtnImgWH": {
            "W": 30,
            "H": 30
        },
        "backgroundStyleChild": true,
        "placeholderStyleChild": true,
        "borderStyleChild": false,
        "textShadowChild": false,
        "searchBtnChild": false,
        "searchBtnBgStyle": true,
        "searchBtnContent": true
    },
    "base": {
        "width": 300,
        "height": 48
    },
    "dataSource": "",
   bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}

 return (
    <>
      <InputSearch {...options} />
    </>
  );
}