https://github.com/donmccurdy/tweakpane-plugin-thumbnail-list
Image thumbnail list plugin for Tweakpane
https://github.com/donmccurdy/tweakpane-plugin-thumbnail-list
gui plugin tweakpane
Last synced: 7 months ago
JSON representation
Image thumbnail list plugin for Tweakpane
- Host: GitHub
- URL: https://github.com/donmccurdy/tweakpane-plugin-thumbnail-list
- Owner: donmccurdy
- License: mit
- Created: 2021-07-18T17:28:52.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-11-08T19:45:15.000Z (over 2 years ago)
- Last Synced: 2025-03-28T13:05:43.206Z (about 1 year ago)
- Topics: gui, plugin, tweakpane
- Language: TypeScript
- Homepage:
- Size: 556 KB
- Stars: 35
- Watchers: 4
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Tweakpane thumbnail list plugin
[Tweakpane][tweakpane] plugin for selecting from a thumbnail list.
> **EXPERIMENTAL:**. API is likely to change before stable release.
## Installation
### Browser
```html
const pane = new Tweakpane.Pane();
pane.registerPlugin(TweakpaneThumbnailListPlugin);
```
### Package
```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);
});
```
### Option properties:
| property | type | required | description |
|----------|--------|----------|--------------------------------|
| text | string | ✓ | Human-readable label. |
| value | string | ✓ | Unique identifier. |
| src | url | ✓ | Thumbnail URL. |
| data | any | | Any application-specific data. |
## CSS Theming
Inherits CSS variables from [Tweakpane's theming system](https://cocopon.github.io/tweakpane/theming.html), 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
### Quickstart
- Install dependencies:
```
% npm install
```
- Build source codes and watch changes:
```
% npm watch
```
- Open `test/browser.html` to see the result.
### File structure
```
|- src
| |- sass ............ Plugin CSS
| |- index.ts ........ Entrypoint
| |- plugin.ts ....... Plugin
| |- controller.ts ... Controller for the custom view
| `- view.ts ......... Custom view
|- dist ............... Compiled files
`- test
`- browser.html .... Plugin labo
```
[tweakpane]: https://github.com/cocopon/tweakpane/