<gui-control> is a custom element that provides a user interface for controlling CSS Custom Properties for a component or app.
<gui-control label="Toggle Controls" position="top left"> </gui-control>
Add the <gui-control>-tag, download and import the script:
import { GuiControl } from './path/index.js';
The position-attribute can be set to top left, top right, bottom left or bottom right. The default is top right.
A scope-attribute can be set, as in scope="body". This will set the CSS Custom Properties on the <body>-tag. scope is any valid querySelector. If you don't set a scope, the default scope will be the doument root (the html-tag).
All methods are called with label, value, property and then an (optional) object with additional attributes.
For <select>, add an object with an options-property, containing an array of key/value-pairs.
You can also call GUI.add(content, label, value, property) directly, with content being raw HTML. This will be added to a <li>-tag and appended to the list.
There's also a GUI.attrs(attributes)-method that outputs the attributes defined in the attributes-object. Boolean attributes (like checked) should have the same value as the key, like:{ checked: 'checked' }
Example:
const GUI = document.querySelector('gui-control');
GUI.addRange('Range 1', 50, '--range-1');
GUI.addRange('Range 2', -25, '--range-2',
{ min: -50, max: 50 }
);
GUI.addColor('Color', '#FF0000', '--color-1');
GUI.addCheckbox('Checkbox', 'dark', '--checkbox-1',
{ checked: 'checked', 'data-unchecked': 'light' }
);
GUI.addSelect('Select', 'serif', '--select-1',
{ options: [
{ key: 'sans-serif', value: 'ui-sans-serif, system-ui' },
{ key: 'serif', value: 'ui-serif, serif' },
{ key: 'monospace', value: 'ui-monospace, monospace' }
]});
GUI.addReset('Reset');
The <gui-control> element has the following CSS parts:
Example:
gui-control::part(summary) {
background-color: crimson;
}