j-Detail

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

Ez az összetevő értékeket adhat a modellből. támogatja az inline mapping-t - nézze meg a forráskódot a példa.

konfiguráció:

dateformat {String} egy dátum formátum (default: DEF.dateformat)
datetimeformat {String} egy dátum/idő formátum (default: DEF.dateformat + ' ' + DEF.timeformat)
numberformat {Number} egy alapértelmezett szám formátum (default: üres)
A small {Boolean} lehetővé teszi a kisebb tervezést (default: false)
A style {Number} összetevő stílus (default: 1), támogatja a 2, 3 (minimális) és 4 (modern) stílust.
defaultgroup {String} egy alapértelmezett csoportnév (default: Default)
notnull {Boolean} hajók nulla értékek (default: false)
A track {String} tartalmazhat útvonalakat, amelyeket a comma oszt, ez a tulajdonság csak a törölt kulcsok változását látja.

adatnyilatkozat:

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' });

Az adatok tulajdonságai az adatnyilatkozatban:

group {String} egy csoport neve (követelmény)
label {String} egy címke (követelmény)
type {String} egy típusú (követelmény)
note {String} - kis értéktípus
format {String} szám, például 2 vagy dátum formátum dd.MM.yyyy
detail {String} URL-cím a list típusú adatok megszerzésére, például: /users/{0}/ és {0} helyettesíti az értéket a listából
items {Object Array/String} elemek csak a list típus, szalag tartalmazhat egy utat a Array vagy URL address keresni
value {Object} érték vagy modell értékeivel (ezután path szükséges)
path {String} egy út az értékhez a modellben (value tartalmaznia kell egy modellt)
template {String} A Tangular A templom (csak a type:'template' és {{ value }} a nyers értékeket tartalmazza, és {{ item }} Az egész elemet tartalmazza)
empty {String} Egy üres érték, amikor az értéke nulla (default: ---)
show {String} a feltételes funkció value.type === 'company' akkor jeleníti meg, ha az értékelett állapot true
Új autoformat {Boolean} Az automatikus formátumok emailvagy phonesÉs csak azért, hogy string Az alapértelmezett (default ) false)
NEW colorize {Boolean} színesíti az értéket, kivéve a list, color és icon típusokat
NEW plus {String} hozzáadja az érték végét a number és a string típusok

Megengedett típusok az adatokban:

string
bool
number
date
datetime
list
color
emoji
fontawesome
password
template

Jó tudni:

Ha a csoport csak egy csarnokot tartalmaz, akkor a csoport neve nem jelenik meg.

Használja a <ui-component name="detail">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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>