https://github.com/cosmicshelter/tweakpane-plugin-thumbnail-grid
Thumbail grid select binding plugin for tweakpane
https://github.com/cosmicshelter/tweakpane-plugin-thumbnail-grid
gui plugin tweakpane tweaks
Last synced: 9 days ago
JSON representation
Thumbail grid select binding plugin for tweakpane
- Host: GitHub
- URL: https://github.com/cosmicshelter/tweakpane-plugin-thumbnail-grid
- Owner: cosmicshelter
- License: mit
- Created: 2025-05-22T10:03:39.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-23T13:40:54.000Z (about 1 year ago)
- Last Synced: 2025-06-22T09:37:59.753Z (about 1 year ago)
- Topics: gui, plugin, tweakpane, tweaks
- Language: TypeScript
- Homepage:
- Size: 225 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Tweakpane plugin thumbnail grid
Thumbnail grid select binding plugin for [Tweakpane][tweakpane].
# For plugin users
## Installation
```bash
npm install tweakpane-plugin-thumbnail-grid
```
## Usage
```js
import { Pane } from 'tweakpane';
import * as TweakpanePluginThumbnailGrid from 'tweakpane-plugin-thumbnail-grid';
const params = {
value: 'image1',
images: {
image1: { label: 'Image 1', thumbnail: 'https://picsum.photos/id/1/300/300' },
image2: { label: 'Image 2', thumbnail: 'https://picsum.photos/id/2/300/300' },
image3: { label: 'Image 3', thumbnail: 'https://picsum.photos/id/3/300/300' },
}
};
const pane = new Pane();
// Register plugin
pane.registerPlugin(TweakpanePluginThumbnailGrid);
// TODO: Update parameters for your plugin
pane.addBinding(params, 'value', {
options: params.images,
showLabel: true, // Show the label on top of the thumbnails
height: 300, // Max height of the scrollable grid
columns: 2, // Grid column amount
label: null, // Set to null to allow full width grid
view: 'thumbnail-grid',
}).on('change', (ev) => {
console.log(ev.value);
});
```
[tweakpane]: https://github.com/cocopon/tweakpane/