# j-InlineProperties

> j-InlineProperties: facile da usare per diversi casi; singletone

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: it
Content-SHA256: 9f7aafd97c92ed33b712d4e05c772d29216419039bf225c3fe34ba41ee997129
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- singolo

__Configurazione__:

- `close {String}` un'etichetta per il pulsante chiuso (default: `Close`)
- `dateformat {String}` formato di data predefinita (predefinito: `[date]`)
- `dirsearch {String}` è un locatore predefinito per j-Directory (predefinita: `Search`)
- `width {Number}` una larghezza predefinita (predefinito: `200`)

## Utilizzo

```js
var opt = {};

// opt.offsetX {Number}      : adds X offset (default: 0)
// opt.offsetY {Number}      : adds Y offset (default: 0)
// opt.align {String}        : align "left" (default), "center" or "right"
// opt.position {String}     : position "top" (default) or "bottom"
// opt.class {String}        : adds class to the parent

opt.element = YOUR_ELEMENT;
// or if you want to use a fixed position:
// opt.x {Number}            : "x" position
// opt.y {Number}            : "y" position

opt.items = []
opt.items.push({ id: 'firstname', name: 'First name', type: 'string', value: 'Peter' });
opt.items.push({ id: 'lastname', name: 'Last name', type: 'string', value: 'Širka', placeholder: 'String' });
opt.items.push({ id: 'age', name: 'Age', type: 'number', value: 33 });
// |---- id {String}               : identifier/a property name
// |---- name {String}             : label
// |---- value {Object}            : a value
// |---- type {String}             : supported types: string, number, boolean, icon, color, date, list
// |---- items {String/Array}      : a list for "list" type

// If you want to assign values from a model instead of filling a value in the "items" field, you can use:
// opt.value {Object}

opt.callback = function(model, changed) {
	// @model {Object}
	// @changed {String Array}
	console.log(model);
};

SETTER('inlineproperties/show', opt);
```

Utilizzare con `<ui-component name="inlineproperties">`Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo `DEF.fallback` (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza MIT.

```html example.html
<style>
	body { background-color: #E0E0E0; }
</style>

<ui-component name="LAZY directory"></ui-component>
<ui-component name="LAZY colorpicker"></ui-component>
<ui-component name="LAZY icons"></ui-component>
<ui-component name="LAZY datepicker"></ui-component>
<ui-component name="inlineproperties" config="dateformat:yyyy-MM-dd"></ui-component>

<div class="container">
	<div class="row">
		<div class="col-xs-4 col-xs-offset-4" style="text-align:center">
			<a href="javascript:void(0)" style="color:black;font-size:20px"><i class="ti ti-ellipsis-v"></i></a>
		</div>
	</div>
</div>

<script>
	$(document).on('click', 'a', function() {

		var cities = [{ id: 2, name: 'Banská Bystrica' }, { id: 3, name: 'Bratislava' }];

		var opt = {};
		opt.items = [];
		opt.items.push({ id: 'firstname', name: 'First name', type: 'string', value: 'Peter' });
		opt.items.push({ id: 'lastname', name: 'Last name', type: 'string', value: 'Širka' });
		opt.items.push({ id: 'age', name: 'Age', type: 'number', value: 33 });
		opt.items.push({ id: 'birth', name: 'Birth date', type: 'date', value: NOW });
		opt.items.push({ id: 'newsletter', name: 'Newsletter', type: 'boolean', value: true });
		opt.items.push({ id: 'city', name: 'City', type: 'list', value: 2, items: cities, dirsearch: 'Search city' });
		opt.items.push({ id: 'color', name: 'Color', type: 'color', value: '#e73323' });
		opt.items.push({ id: 'icon', name: 'Icon', type: 'icon', value: 'ti ti-home' });

		opt.align = 'center';
		opt.element = this;

		opt.callback = function(value) {
			console.log(value);
		};

		SETTER('inlineproperties/show', opt);
	});
</script>
```