j-Detail

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Acest component poate reprezenta valori de la model. susține maparea inline - se uită la codul de sursă al exemplului.

Configurarea:

dateformat {String} este un format de date (default: DEF.dateformat)
datetimeformat {String} un format de date/timă (default: DEF.dateformat + ' ' + DEF.timeformat)
numberformat {Number} este un format de număr (default: gol)
small {Boolean} permite un design mai mic (default: false)
Stilul de componentă style {Number} (default: 1), susține stilul 2, 3 (minimal) și 4 (modern)
defaultgroup {String} este un nume de grup standard (default: Default)
notnull {Boolean} Valoare zero (defaultă) false)
track {String} poate conține căi împărțite de comma, această proprietate va observa doar schimbările în cheile tracte

Declarație de date:

var model = { firstname: 'Peter', lastname: 'Širka', age: 33 };
var items = [{ id: 2, name: 'Banská Bystrica' }, { id: 3, name: 'Bratislava' }];
var form = [];

// The below values will be binded automatically from the "model" (according to the "path" field) because they contain "path" field
form.push({ group: 'Personal', label: 'First name', path: 'firstname', type: 'string', value: model, note: 'This is first name' });
form.push({ group: 'Personal', label: 'Last name', path: 'lastname', type: 'string', value: model, placeholder: 'String' });
form.push({ group: 'Personal', label: 'Age', path: 'age', type: 'number', value: model });

// The below values will be binded from "value" key
form.push({ group: 'Personal', label: 'Birth date', type: 'date', value: NOW });
form.push({ group: 'Additional', label: 'Newsletter', type: 'bool', value: true });
form.push({ group: 'Additional', label: 'City', type: 'list', value: 2, items: 'items' });
form.push({ group: 'Additional', label: 'Color', type: 'color', value: '#e73323' });
form.push({ group: 'Additional', label: 'Icon', type: 'fontawesome', value: 'fas fa-home' });

Proprietăți de date în declarația de date:

group {String} un nume de grup (necesar)
label {String} un etichetă (reclamat)
type {String} un tip (necesar)
note {String} - o notă mică sub valoare
Numărul format {String}, de exemplu, numărul 2 sau formatul date dd.MM.yyyy
Adresa URL detail {String} pentru obținerea datelor pentru tipul list, de exemplu: /users/{0}/ și {0} vor fi înlocuite cu valoarea din listă
Elementele items {Object Array/String} pentru tipul list pot conține o cale către Array sau URL address pentru a căuta
value {Object} este un valor sau un model cu valori (dacă path este necesar)
path {String} este o cale de valoare în model (value trebuie să conțină un model)
template {String} A Tangular șablon (funcționează numai cu type:'template' și {{ value }} conține o valoare crudă, iar {{ item }} conține întregul element)
empty {String} O valoare goală atunci când valoarea este nulă (default: ---)
show {String} funcția condițională value.type === 'company' apoi afișează dacă starea evaluată este true
NEW autoformat {Boolean} permite formatarea automată pentru email, sau phones, și numai pentru tipul string (default: false)
NEW colorize {Boolean} colorează valoarea cu excepția tipurilor list, color și icon
NEW plus {String} adaugă o valoare la sfârșitul valorii renderate pentru tipurile number și string

Tipuri permise în date:

string
bool
number
date
datetime
list
color
emoji
fontawesome
password
template

bine să știi:

Dacă grupul conține doar un car, atunci numele grupului nu este prezentat.

Utilizați-l cu <ui-component name="detail">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

example.html

<div style="width:500px">
	<ui-component name="detail" path="form"></ui-component>
	<br />
	<div>-- OR --</div>
	<br />
	<ui-component name="detail" path="model" config="style:2">
		<script type="text/plain">
			[
				{ name: 'First name', path: 'firstname', type: 'string' },
				{ name: 'Last name', path: 'lastname', type: 'string' },
				{ name: 'Age', path: 'age', type: 'number' }
			]
		</script>
	</ui-component>
	<br />
	<div>-- OR FILTERED --</div>
	<br />
	<ui-component name="detail" path="model" config="style:3">
		<script type="text/plain">
			[
				// Will be displayed, look to show condition ("value" means "model")
				{ name: 'First name', path: 'firstname', type: 'string', show: 'value.type==1' },
				{ name: 'Last name', path: 'lastname', type: 'string', show: 'value.type==1' },
				// Won't be displayed, look to show condition ("value" means "model")
				{ name: 'Age', path: 'age', type: 'number', show: 'value.type==2' }
			]
		</script>
	</ui-component>
	<br />
	<ui-component name="detail" path="model" config="style:4">
		<script type="text/plain">
			[
				// Will be displayed, look to show condition ("value" means "model")
				{ name: 'First name', path: 'firstname', type: 'string', show: 'value.type==1' },
				{ name: 'Last name', path: 'lastname', type: 'string', show: 'value.type==1' },
				// Won't be displayed, look to show condition ("value" means "model")
				{ name: 'Age', path: 'age', type: 'number', show: 'value.type==2' }
			]
		</script>
	</ui-component>
</div>

<script>
	var model = { firstname: 'Peter', lastname: 'Širka', age: 33, type: 1 };
	var items = [{ id: 2, name: 'Banská Bystrica' }, { id: 3, name: 'Bratislava' }];
	var form = [];

	// The below values will be binded automatically from the "model" (according to the "path" field) because they contain "path" field
	form.push({ group: 'Personal', label: 'First name', path: 'firstname', type: 'string', value: model, note: 'This is first name' });
	form.push({ group: 'Personal', label: 'Last name', path: 'lastname', type: 'string', value: model, placeholder: 'String' });
	form.push({ group: 'Personal', label: 'Age', path: 'age', type: 'number', value: model });

	// The below values will be binded from "value" key
	form.push({ group: 'Personal', label: 'Birth date', type: 'date', value: NOW });
	form.push({ group: 'Additional', label: 'Newsletter', type: 'bool', value: true });
	form.push({ group: 'Additional', label: 'City', type: 'list', value: 2, items: 'items' });
	form.push({ group: 'Additional', label: 'Color', type: 'color', value: '#e73323' });
	form.push({ group: 'Additional', label: 'Icon', type: 'fontawesome', value: 'ti ti-home' });
</script>