日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

可定制React自動完成搜索組件Turnstone實現示例_React

作者：Jovie ? 更新時間： 2022-12-01 編程語言

正文

一個高度可定制的、易于使用的React自動完成搜索組件。

特點

  • 輕量級的React搜索框組件
  • 用可定制的標題將來自多個API或其他數據源的搜索結果分組
  • 指定列表框選項的最大數量，以及每組的加權顯示比例
  • 用你自己的React組件完全定制列表框選項。添加圖片、圖標、額外的子選項、按組或索引的不同視覺處理等等......
  • 在輸入的文本下面顯示typeahead自動建議文本
  • 使用各種CSS方法，包括CSS模塊和Tailwind CSS，可輕松實現風格化。
  • 在移動屏幕尺寸下，搜索輸入可以很容易地固定在屏幕頂部，并有可定制的取消/返回按鈕來退出。
  • 多個回調，包括。onSelect,onChange,onTab,onEnter?以及更多...
  • 內置的WAI-ARIA可訪問性
  • 使用箭頭、Tab和Enter鍵的鍵盤高亮和選擇
  • 自動緩存以減少數據的獲取
  • 退步文本輸入，以減少數據的取用
  • 可選的清除按鈕（可定制）。
  • 可定制的占位符文本
  • 使用插件添加更多的功能
  • 以及更多...

如何使用它

1.安裝并導入Turnstone

# NPM
$ npm i turnstone
import React from 'react'
import Turnstone from 'turnstone'

2.基本使用方法

const App = () => {
  const listbox = {
    data: ['react', 'vue', 'angular']
  }
  return (
    <Turnstone listbox={listbox} />
  )
}

3.默認的組件道具

autoFocus: false,
cancelButton: false,
cancelButtonAriaLabel: 'Cancel',
clearButton: false,
clearButtonAriaLabel: 'Clear contents',
debounceWait: 250,
defaultListboxIsImmutable: true,
disabled: false,
id: randomId(),
listboxIsImmutable: true,
matchText: false,
maxItems: 10,
minQueryLength: 1,
placeholder: '',
styles: {},
typeahead: true,
Cancel: () => 'Cancel',
Clear: () => '\u00d7'

預覽

The postCustomizable Autocomplete Search Component For React - Turnstoneappeared first onReactScript.

原文鏈接：https://juejin.cn/post/7157990985640149029

欄目分類
最近更新