How to Use

Include the following line in the head of your HTML document:

<link rel="stylesheet" href="https://workbench.imuscica.eu/dev/lib/common/bundle.min.css">

Include the following line at the end of the body of your HTML document:

<script type="text/javascript" src="https://workbench.imuscica.eu/dev/lib/common/bundle.min.js"></script>

Call the function initializeComponents() before using any iMuSciCA props.

This function may recieve a tier (e.g. 'dev', 'stable', 'release/v3') to load the assets from that tier.

Examples

Toolbar

This code was used to generate the toolbar in this demo page:

initializeComponents();

demoToolbar = new Toolbar().insertInto('body');

demoToolbar.addComponentToLeftPanel(new ImageButton({
    icon: 'imuscica-close',
    style: 'naked',
    tooltip: {
        label: 'Close'
    }
}));

demoToolbar.addComponentToLeftPanel(new Separator());

demoToolbar.addComponentToLeftPanel(new Dropdown({
    icon: 'imuscica-menu',
    style: 'naked',
    tooltip: {
        label: 'Dropdown'
    },
    title: 'Dropdown Menu',
    width: 500,
    height: 200,
    align: 'left',
    content: [
        new Label({
            label: 'Demo Dropdown Menu'
        })
    ]
}));

demoToolbar.addComponentToLeftPanel(new ImageButton({
    icon: 'imuscica-play',
    style: 'naked',
    callback: function(me) {
        if (me.playing) {
            me.playing = false;
            me.displayIcon('imuscica-play');
            me.setTooltip('Play');
        } else {
            me.playing = true;
            me.displayIcon('imuscica-pause');
            me.setTooltip('Pause');
        }
    },
    tooltip: {
        label: 'Play'
    }
}));

demoToolbar.addComponentToLeftPanel(new Separator());

demoToolbar.addComponentToLeftPanel(new ImageButton({
    icon: 'imuscica-copy',
    style: 'naked',
    tooltip: {
        label: 'Copy'
    }
}));

demoToolbar.addComponentToLeftPanel(new ImageButton({
    icon: 'imuscica-paste',
    style: 'naked',
    tooltip: {
        label: 'Paste'
    }
}));

demoToolbar.addComponentToCenterPanel(new Label({
    label: 'GUI Toolkit Demo',
    classes: {
        'imuscica-label': 'imuscica-title-secondary'
    }
}));

demoToolbar.addComponentToRightPanel(new ImageButton({
    icon: 'imuscica-zoom-in',
    style: 'naked',
    tooltip: {
        label: 'Zoom in'
    }
}));

demoToolbar.addComponentToRightPanel(new ImageButton({
    icon: 'imuscica-zoom-out',
    style: 'naked',
    tooltip: {
        label: 'Zoom out'
    }
}));

Title 1

Title 2

Title 3

Text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Important text Bold text (?)

Loader

This code was used to generate the radio buttons in this demo page:

demoLoader = new Loader().insertInto('#imuscica-loader-demo');

Radio Buttons

This code was used to generate the radio buttons in this demo page:

demoRadioGroup = new RadioGroup({
    name: 'demo',
    radioButtons: [
        {
            value: '1',
            label: 'Radio Button 1',
            checked: true
        },
        {
            value: '2',
            label: 'Radio Button 2',
        },
        {
            value: '3',
            label: 'Radio Button 3',
        }
    ]
}).insertInto('#imuscica-radio-buttons-demo');

Checkboxes

This code was used to generate the checkboxes in this demo page:

demoCheckGroup = new CheckGroup({
    checkboxes: [
        {
            value: '1',
            label: 'Checkbox 1',
        },
        {
            value: '2',
            label: 'Checkbox 2',
        },
        {
            value: '3',
            label: 'Checkbox 3',
        }
    ]
}).insertInto('#imuscica-checkboxes-demo');

Selects

This code was used to generate the select menu in this demo page:

demoSelect = new SelectMenu({
    options: [
        {
            label: 'Slower',
            value: 1
        },
        {
            label: 'Slow',
            value: 2
        },
        {
            label: 'Medium',
            selected: true,
            value: 3
        },
        {
            label: 'Fast',
            value: 4
        },
        {
            label: 'Faster',
            value: 5
        }
    ]
}).insertInto('#imuscica-select-menu-demo');

Sliders

This code was used to generate the sliders in this demo page:

demoSliderH = new Slider({
    min: 0,
    max: 100,
    value: 50
}).insertInto('#imuscica-slider-horizontal-demo');

demoSliderV = new Slider({
    orientation: 'vertical',
    min: 0,
    max: 100,
    value: 50
}).insertInto('#imuscica-slider-vertical-demo'); demoDoubleSliderH = new DoubleSlider({
    min: 0,
    max: 100,
    values: [25, 75]
}).insertInto('#imuscica-double-slider-horizontal-demo');

demoDoubleSliderV = new DoubleSlider({
    orientation: 'vertical',
    min: 0,
    max: 100,
    values: [25, 75]
}).insertInto('#imuscica-double-slider-vertical-demo');

Horizontal Slider

Vertical Slider

Horizontal Double Slider

Vertical Double Slider

Spinners

This code was used to generate the spinner in this demo page:

demoSpinner = new Spinner({
    min: 0,
    max: 100,
    step: 1
}).insertInto('#imuscica-spinner-demo');

Text Fields

This code was used to generate the text field in this demo page:

demoTextField = new TextField({
    width: 320,
    label: 'Text Field',
    placeholder: 'Placeholder',
    value: 'Default Value'
}).insertInto('#imuscica-text-field-demo');

Buttons

This code was used to generate some of the buttons in this demo page:

demoTextButton = new TextButton({
    label: 'Text Button',
    style: 'teal'
}).insertInto('#imuscica-button-demo');

demoImgButton = new ImageButton({
    icon: 'imuscica-copy',
    style: 'naked'
}).insertInto('#imuscica-image-button-demo');

demoCompButton = new CompoundButton({
    icon: 'imuscica-paste',
    label: 'Compound Button',
    style: 'orange-yellow'
}).insertInto('#imuscica-compound-button-demo');

Text Buttons

Icon Buttons

Compound Buttons