0.7.9 • Published 2 months ago
@violentmonkey/ui v0.7.9
@violentmonkey/ui
Common UI for userscripts, working in Violentmonkey as well as other userscript managers.
Dependencies
Usage
First, include dependencies:
// ...
// @require https://cdn.jsdelivr.net/combine/npm/@violentmonkey/dom@2,npm/@violentmonkey/ui@0.7
// ...
Then use it like so, all exports can be accessed under namespace VM
:
VM.showToast('hello');
VM.showToast(VM.h('div', {}, 'hello, world'));
Toast
const toast = VM.showToast(VM.h('div', {}, 'hello'), {
theme: 'dark', // or 'light'
duration: 2000, // or 0 to manually close it
});
// Manually close it
toast.close();
Panel
const panel = VM.getPanel({
content: VM.h('div', {}, 'This is a panel'),
theme: 'light',
});
panel.wrapper.style.top = '100px';
// Show panel
panel.show();
// Hide panel
panel.hide();
// Allow panel to be moved by mouse dragging
panel.setMovable(true);
SolidJS
It is recommended to initialize a userscript project using generator-userscript and use solid-js.
import { render } from 'solid-js/web';
const panel = VM.getPanel({ theme: 'light' });
panel.wrapper.style.top = '100px';
render(() => <MyPanel />, panel.body);
panel.show();
JSX for @violentmonkey/dom
Not recommended as it is not compatible with solid-js integrated in generator-userscript.
Use with JSX and bundlers, for example:
// .babelrc.js
{
plugins: [
// JSX
['@babel/plugin-transform-react-jsx', {
pragma: 'VM.h',
pragmaFrag: 'VM.Fragment',
}],
],
}
VM.showToast(<div>hello, world</div>);
API
0.7.9
2 months ago
0.7.8
1 year ago
0.7.7
2 years ago
0.7.6
2 years ago
0.7.5
2 years ago
0.7.5-0
2 years ago
0.7.5-1
2 years ago
0.7.2
2 years ago
0.7.1
2 years ago
0.7.4
2 years ago
0.7.3
2 years ago
0.7.0-1
3 years ago
0.7.0-0
3 years ago
0.7.0
3 years ago
0.6.0
3 years ago
0.5.2-1
3 years ago
0.5.2-0
3 years ago
0.5.2
3 years ago
0.5.0
3 years ago
0.5.1
3 years ago
0.4.0
4 years ago
0.3.0
4 years ago
0.2.1
4 years ago
0.2.0
5 years ago
0.1.3
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago