Tweakpane plugin for image thumbnail selection
npm install tweakpane-plugin-thumbnail-list[Tweakpane][tweakpane] plugin for selecting from a thumbnail list.
> EXPERIMENTAL:. API is likely to change before stable release.
html
`
$3
`js
import { Pane } from 'tweakpane';
import * as TweakpaneThumbnailListPlugin from 'tweakpane-plugin-thumbnail-list';const pane = new Pane();
pane.registerPlugin(TweakpaneThumbnailListPlugin);
`
Usage
`js
const params = {
weave: 'p',
};pane.addInput(params, 'weave', {
view: 'thumbnail-list',
options: [
{text: 'Plain', value: 'p', src: './plain.png', data: {...}},
{text: 'Twill', value: 't', src: './twill.png', data: {...}},
{text: 'Basket', value: 'b', src: './basket.png', data: {...}},
{text: 'Herringbone', value: 'h', src: './herringbone.png', data: {...}},
]
}).on('change', (ev) => {
console.log(ev.value);
});
`$3
| property | type | required | description |
|----------|--------|----------|--------------------------------|
| text | string | ✓ | Human-readable label. |
| value | string | ✓ | Unique identifier. |
| src | url | ✓ | Preview URL. |
| data | any | | Any application-specific data. |
CSS Theming
Inherits CSS variables from Tweakpane's theming system, with the following additions:
`css
:root {
/* Max height of dropdown panel. /
--tp-plugin-thumbnail-list-height: 400px; /* Fixed width of dropdown panel. /
--tp-plugin-thumbnail-list-width: 200px;
/* Width/height of (square) thumbnail. /
--tp-plugin-thumbnail-list-thumb-size: 20px;
}
`Contributing
$3
- Install dependencies:
`
% npm install
`
- Build source codes and watch changes:
`
% npm watch
`
- Open test/browser.html to see the result.
$3
`
|- src
| |- sass ............ Plugin CSS
| |- index.ts ........ Entrypoint
| |- plugin.ts ....... Plugin
| |- controller.ts ... Controller for the custom view
| - view.ts ......... Custom view- test
- browser.html .... Plugin labo
[tweakpane]: https://github.com/cocopon/tweakpane/