j-Detail

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Deze component kan waarden van het model geven. ondersteunt inline mapping - kijk naar de broncode van het voorbeeld.

Configuratie:

dateformat {String} een datumformaat (default: DEF.dateformat)
datetimeformat {String} een datum/tijd formaat (default: DEF.dateformat + ' ' + DEF.timeformat)
numberformat {Number} een standaard getal formaat (default: leeg)
small {Boolean} maakt het kleinere ontwerp mogelijk (default: false)
style {Number} component stijl (default: 1), ondersteunt stijlen 2, 3 (minimal) en 4 (moderne)
defaultgroup {String} een standaard groepsnaam (default: Default)
notnull {Boolean} schip nullable waarden (default: false)
track {String} kan paden bevatten die door comma worden verdeeld, deze eigenschap zal alleen veranderingen in getrokken sleutels waarnemen

Data verklaring:

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

Gegevens eigenschappen in de gegevensverklaring:

group {String} een groepsnaam (verplicht)
label {String} een label (verplicht)
type {String} een type (verplicht)
note {String} een kleine notitie onder waarde
format {String}, bijvoorbeeld 2 of datumformaat dd.MM.yyyy
detail {String} URL voor het verkrijgen van gegevens voor de list type, bijvoorbeeld: /users/{0}/ en {0} worden vervangen door de waarde uit de lijst
items {Object Array/String} items voor de list type alleen, kan een spoor bevatten naar Array of URL address om te zoeken
value {Object} een waarde of model met waarden (dan is path vereist)
path {String} een weg naar waarde in het model (value moet een model bevatten)
template {String} A Tangular De schilderij (alleen met type:'template' en {{ value }} Het bevat een grondwaarde en {{ item }} Het hele item bevat)
empty {String} Een leegwaarde wanneer de waarde nul is (default: ---)
show {String} de conditiefunctie value.type === 'company' laat dan zien als de beoordeelde toestand true is.
NEW autoformat {Boolean} maakt het mogelijk om een auto-formaat te maken voor email, of phones, en alleen voor de type string (default: false)
NEW colorize {Boolean} verfijt de waarde met uitzondering van list, color en icon
NEW plus {String} voegt een waarde toe aan het einde van de gerendateerde waarde voor number en string typen

Toegestelde soorten in gegevens:

string
bool
number
date
datetime
list
color
emoji
fontawesome
password
template

Goed om te weten:

Als de groep slechts één char bevat, wordt de naam van de groep niet verstrekt.

Gebruik het met <ui-component name="detail">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>