# j-InlineProperties

> j-InlineProperties: fácil uso para diferentes casos; singleton

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: es
Content-SHA256: 968a62f59e1788f90219f81189af33c7c9750ab06d741b74eb2732cd3d2b39cd
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- singleton

__Configuración__:

- `close {String}` una etiqueta para el botón de cierre (predeterminado: `Close`)
- `dateformat {String}` un formato de fecha predeterminado (predeterminado: `[date]`)
- `dirsearch {String}` un marcador de posición predeterminado para j-Directory (predeterminado: `Search`)
- `width {Number}` un ancho predeterminado (predeterminado: `200`)

## Uso

```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);
```

Úselo con `<ui-component name="inlineproperties">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (la CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia 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>
```