j-Detail

jComponent 20 · jcomponent@20 component Příklad načten s jComponent 20

Tato složka může zobrazit hodnoty z modelu. Podporuje mapování inline - podívejte se na zdrojový kód příkladu.

Konfigurace:

dateformat {String} formát dat (předvolený: DEF.dateformat)
datetimeformat {String} datum/časový formát (předvolený: DEF.dateformat + ' ' + DEF.timeformat)
numberformat {Number} je standardní číslo formátu (default: empty)
small {Boolean} umožňuje menší konstrukci (předvolené: false)
Styl složky style {Number} (podle předvolby: 1), podporuje styl 2, 3 (minimální) a 4 (moderní)
Standardní jméno skupiny defaultgroup {String} (default: Default)
notnull {Boolean} skips nulové hodnoty (předvolené: false)
track {String} může obsahovat trasy rozdělené komou, tato vlastnost bude sledovat pouze změny v klíčkách

Data prohlášení:

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

Údaje o vlastnostech v prohlášení:

group {String} jméno skupiny (vyžaduje se)
label {String} na štítku (vyžaduje se)
type {String} typ (vyžaduje se)
note {String} - malá hodnota pod hodnotou
Číslo format {String} např. 2 nebo datum formátu dd.MM.yyyy
URL adresy detail {String} pro získání údajů typu list, například: /users/{0}/ a {0} budou nahrazeny hodnotou ze seznamu
items {Object Array/String} položky pro typ list pouze, řetězec může obsahovat cestu k Array nebo URL address hledat
value {Object} hodnota nebo model s hodnotami (tím je požadován path)
path {String} je cesta k hodnotě v modelu (value musí obsahovat model)
template {String} A Tangular Téma (působí pouze s type:'template' a {{ value }} obsahuje surovou hodnotu a {{ item }} Obsahuje celý článek)
empty {String} Prázdná hodnota, když je hodnota nulová (podmínkou: ---)
show {String} je podmíněná funkce value.type === 'company' a pak se zobrazí, jestliže hodnocený stav je true
NEW autoformat {Boolean} umožňuje automatický formát pro email, nebo phones, a pouze pro typ string (předvolený: false)
NEW colorize {Boolean} barví hodnotu s výjimkou typů list, color a icon
NEW plus {String} přidává hodnotu na konci renderované hodnoty pro typy number a string

Povolené typy v údajích:

string
bool
number
date
datetime
list
color
emoji
fontawesome
password
template

Dobré vědět:

Pokud skupina obsahuje pouze jeden char, jméno skupiny se nezobrazuje.

Použijte ji s <ui-component name="detail">Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy DEF.fallback a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

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>