j-KeyValue

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

A simple component for create key/value pairs values.

Configuration:

placeholderkey {String} a placeholder for the key input
placeholdervalue {String} a placeholder for the value input
icon {String} a label icon without ti-
maxlength {Number} max. lenght for inputs
label {String} a label (default: innerHTML)
disabled {Boolean} can disabled this control
autocomplete {String} a link to function(input, component) which is executed when an input is focused

Other functionality

// Binder
SETTER('keyvalue/binder', function(type, value) {
    if (type === 'key')
        return value.toUpperCase();
    else // type === 'value'
        return value;
});

Use it with <ui-component name="keyvalue">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

example.html

<ui-component name="keyvalue" path="keyvalue" config="placeholderkey:Type a key;placeholdervalue:Type a value and press enter">Key Value component</ui-component>

<script>
	var keyvalue = {};
</script>