@zym-com/input-search
Version:
搜索输入框
120 lines (111 loc) • 2.99 kB
Markdown
* `input-search` 组件发布
```bash
npm install @zym-com/input-search
```
or
```bash
yarn add @zym-com/input-search
```
```jsx
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} />
</>
);
}
```