🧱 A bundle of micro components.
Import MicroComps.js into your project
Create a MicroComps instance. The constructor takes an object of options. You must provide a "container" which is element that will host the MicroComps instance DOM elements.
let mc = new MicroComps({
container: document.querySelector('.microcomps')
});
Your MicroComps instance got a "add" method. This "add" method signature is the following :
add(objectToUpdate, keyToUpdate, typeOfEditor, options)
Consider this object :
let dog = {
"name": "John Dog",
"age": 4,
}
If you wants to create a control inside your MicroComps instance to update the dog.age, you can proceed like that :
mc.add(dog, 'age', 'number', {
min : 0, // You can add a minimum value
max : 10000000, // You can add a maximum value
onCreate: (value) => {
console.log('Editor created');
},
onChange: (value) => {
console.log('Editor value changed', value);
}
});
See more example in /demo/js/main.js and right in the source.
- StringEditor
- NumberEditor
- BooleanEditor
- ListEditor
- ColorEditor
- XYEditor
- XYZEditor
- Range slider
- More exhaustive documentation
- ...do not hesitate to ask for more