https://github.com/hirohe/tweakpane-plugin-search-list

plugin for tweakpane, searchable select list
https://github.com/hirohe/tweakpane-plugin-search-list

plugin searchable select tweakpane

Last synced: over 1 year ago
JSON representation

plugin for tweakpane, searchable select list

• Host: GitHub
• URL: https://github.com/hirohe/tweakpane-plugin-search-list
• Owner: hirohe
• License: mit
• Created: 2021-03-18T07:36:00.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2021-09-21T04:50:49.000Z (over 4 years ago)
• Last Synced: 2025-03-03T21:55:58.439Z (over 1 year ago)
• Topics: plugin, searchable, select, tweakpane
• Language: TypeScript
• Homepage:
• Size: 269 KB
• Stars: 9
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
# Tweakpane plugin Search list

![version](https://badge.fury.io/js/tweakpane-plugin-search-list.svg)

This is a plugin for [Tweakpane][tweakpane].

add searchable select list for tweakpane.

**required version `tweakpane@3.x`**

### Install

```bash

npm i tweakpane-plugin-search-list

# or

yarn add tweakpane-plugin-search-list

```

### Usage

```js

import { Pane } from 'tweakpane';

import TweakpaneSearchListPlugin from 'tweakpane-plugin-search-list';

const pane = new Pane();

pane.registerPlugin(TweakpaneSearchListPlugin);

const data = { language: 'JavaScript' };

pane.addInput(data, 'language', {

  // use search-list

  view: 'search-list',

  options: {

    JavaScript: 'JavaScript',

    TypeScript: 'TypeScript',

    Java: 'Java',

    Go: 'Go',

    Dart: 'Dart',

    'C++': 'C++',

    'Object C': 'Object C',

    'C#': 'C#',

    Python: 'Python'

  }

});

// ...

```

### Options

```js

pane.addInput(data, 'field', {

  view: 'search-list',

  options: {

    // ...

  },

  noDataText: 'no data',

  debounceDelay: 250,

});

```

| param         | description                                                 | type   | default   |

|---------------|-------------------------------------------------------------|--------|-----------|

| noDataText    | text to show if no options matched                          | string | 'no data' |

| debounceDelay | delay time to apply on lodash.debounce, for debounce search | number | 250       |

### CSS variables

```css

:root {

  --tp-plugin-select-box-bg-color: --input-background-color;

  --tp-plugin-select-no-data-color: #fff;

  --tp-plugin-select-option-bg-hover: rgb(129, 129, 129);

}

```

[tweakpane]: https://github.com/cocopon/tweakpane/