@bilions/search-js

搜索联署材料

任何 Javascript 框架的实例搜索 UI 组件 .

兼容

• 反应
• 阴道
• 角质

目录

• 安装
  • 通过 cdn
  • 通过 npm
• 使用量
  • Javascript
  • 字体
  • 使用 API
• 选项
• 职能
• 主题
  • 自定义 主题

安装

通过 cdn 安装

<script src="https://cdn.jsdelivr.net/npm/@bilions/search-js/dist/search-js.js"></script>

通过 npm 安装

npm install @bilions/search-js

使用量

Javascript

import SearchJS from '@bilions/search-js'

const data = [
  {
    title: 'Validation',
    description: 'Create validation easily using validator',
    route: '/validation',
  },
  {
    title: 'Request',
    description: 'Http request',
    route: '/request',
  },
]

const searchJs = SearchJS({
  data,
  theme: '#FF2E1F',
  width: '600px',
  positionTop: '85px',
  search: {
    placeholder: 'Search docs',
  },
  onSelected: (i) => {
    console.log(i)
  },
  onSearch: (keyword) => {
    console.log(keyword)
  },
})

searchJs.open()

字体

import SearchJS, { SearchJSConfig, SearchJSItem } from '@bilions/search-js'

const config: SearchJSConfig = {
  data: [
    {
      title: 'Validation',
      description: 'Create validation easily using validator',
      route: '/validation',
    },
    {
      title: 'Request',
      description: 'Http request',
      route: '/request',
    },
  ],
  theme: '#FF2E1F',
  width: '600px',
  positionTop: '85px',
  search: {
    placeholder: 'Search docs',
  },
  onSelected: (value: SearchJSItem) => {
    console.log(value)
  },
  onSearch: (keyword) => {
    console.log(keyword)
  },
}

const searchJs = SearchJS(config)
searchJs.open()

API 调用

async function getFromApi(keyword = '') {
  let res = await fetch('https://dummyjson.com/products/search?q=' + keyword)
  let json = await res.json()
  return json.products
}

const searchJs = SearchJS({
  theme: '#FF2E1F',
  width: '600px',
  darkMode: false,
  positionTop: '50px',
  data: [],
  search: {
    placeholder: 'Search products',
  },
  onSelected: (route) => {
    console.log(route)
  },
  onSearch: (keyword) => {
    return getFromApi(keyword)
  },
})

可用选项

现有职能

• open() 函数将触发打开搜索菜单
• close() 函数将触发关闭搜索菜单
• 或者按键 cmd + k 或者说 ctrl + k 打开搜索菜单,并 ESC 关闭菜单

主题

备妥的主题

• github-dark
• github-light

Github Dark (github- dark) (英语)

Github 光( 光)

光线 有颜色代码的主题

阴暗 有颜色代码的主题

自定义主题颜色

覆盖自定义主题颜色的 css 变量下方 .

默认光线模式

root {
  --search-js-backdrop-bg: rgba(101, 108, 133, 0.8);
  --search-js-modal-bg: #f5f6f7;
  --search-js-modal-box-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5), 0 3px 8px 0 #555a64;
  --search-js-modal-footer-box-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgba(69, 98, 155, 0.12);
  --search-js-keyboard-button-box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
    0 1px 2px 1px rgba(30, 35, 90, 0.4);
  --search-js-keyboard-button-bg: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
  --search-js-search-input-bg: white;
  --search-js-item-bg: white;
  --search-js-text-color: #969faf;
  --search-js-input-placeholder-color: #969faf;
  --search-js-item-box-shadow: 0 1px 3px 0 #d4d9e1;
}

默认黑暗模式

root {
  --search-js-backdrop-bg: rgba(47, 55, 69, 0.7);
  --search-js-modal-bg: #1b1b1d;
  --search-js-modal-box-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
  --search-js-modal-footer-box-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
  --search-js-keyboard-button-box-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
    0 2px 2px 0 rgba(3, 4, 9, 0.3);
  --search-js-keyboard-button-bg: linear-gradient(-26.5deg, transparent 0%, transparent 100%);
  --search-js-search-input-bg: black;
  --search-js-item-bg: #1c1e21;
  --search-js-text-color: #b3b3b3;
  --search-js-input-placeholder-color: #aeaeae;
  --search-js-item-box-shadow: none;
}

受爱高丽所启发