An IMGUI inspired GUI Framework for javascript thats designed to be as simple to use as IMGUI.
此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/535798/1671620/ImmediateGUI.js
Example Images (and pseudo code how they were made)
const $$ = new ImmediateGUI({
theme: 'dark',
position: 'left',
width: 400,
draggable: true,
title: 'Example GUI',
titleLeftAligned: true,
});
$$.BeginTabs(['Tab 1', 'Tab 2', 'Tab 3'], 0);
// $$.SetActiveTab(0) is implicitly called when the first tab is created
$$.Button("Tab 1 Button 1", () => { console.log('Tab 1 Button 1 clicked'); });
$$.SetActiveTab('Tab 2'); /* Same as calling .SetActiveTab('1') as the second tab is the tab with the text 'Tab 2' */
$$.Button("Tab 2 Button 1", () => { console.log('Tab 1 Button 1 clicked'); });
$$.Textbox("Tab 2 Textbox 1", "Tab 2 Textbox 1");
$$.ToggleSwitch("Tab 2 Toggle", true);
$$.SetActiveTab(2);
$$.TextArea("Tab 3 TextArea 1");
const pb = $$.ProgressBar(0, 0, 100, true);
setInterval(() => {
const value = pb.getValue(); /* pb.value */
if (value >= pb.max) {
pb.setValue(pb.min);
//pb.value = pb.min;
} else {
pb.setValue(value + 1);
//pb.value = value + 1;
}
}, 500);
$$.EndTabs();
$$.Header("Example Header", 5);
$$.ToggleSwitch("Dark Mode", true, '', (value) => { $$.SetTheme(value ? 'dark' : 'light'); });
$$.BeginRow(0);
$$.Textbox("Row Textbox 1");
$$.Button("Row Button 1");
$$.Button("Row Button 2");
$$.EndRow();
$$.Image("https://duckduckgo.com/assets/logo_header.v109.svg", "Example Image", 100, 100);
$$.Button("Example Button", null);
$$.Textbox("Example Textbox");
$$.TextArea("Example TextArea");
$$.Label("Example Label");
$$.ProgressBar(64, 0, 100, true);
$$.ColorPicker('#000000');
$$.DatePicker();
$$.Dropdown(["Option 1", "Option 2", "Option 3"], "Option 1");
$$.NumberInput("Example Number Input", 0, 0, 100);
$$.Slider(0, 100, 25);
$$.Checkbox("Example Checkbox", true);
$$.BeginSection("Example Section (Non collapsable)", false);
$$.Button("Control inside section");
$$.Textbox("Textbox inside section");
$$.EndSection();
$$.BeginSection("Example Section (Collapsable)", true);
$$.Button("Control inside section");
$$.EndSection();
$$.BeginIndentation(1);
$$.Button("Indented Control (Level 1)");
$$.EndIndentation();
$$.BeginIndentation(2);
$$.Button("Indented Control (Level 2)");
$$.EndIndentation();
$$.BeginIndentation(3);
$$.Button("Indented Control (Level 3)");
$$.EndIndentation();
$$.BeginIndentation(4);
$$.Button("Indented Control (Level 4)");
$$.EndIndentation();
$$.BeginIndentation(2);
$$.Button("Indented Control (Level 2 again)");
$$.EndIndentation();
$$.Label("Example Separator");
$$.Separator();
$$.BeginSection("Example Radio Button Group", true);
$$.RadioButtons(['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'], 'Option 1');
$$.EndSection();
$$.Button("Spawn Modal", () => {
$$.ShowModal("Example Modal", "Example Modal Header", {
type: 'success',
buttons: [
{ text: 'OK', callback: () => { console.log('OK clicked'); }, primary: true },
{ text: 'Cancel', callback: () => { console.log('Cancel clicked'); } },
],
});
});
$$.Button("Switch Theme", () => { $$.SetTheme($$.options.theme === 'dark' ? 'light' : 'dark'); });
$$.Show();
Documentation (AI Generated) can be found here: https://github.com/TetteDev/ImmediateGUI-Documentation/blob/main/README.md