# j-Detail

> Αυτό το συστατικό μπορεί να εκδίδει τιμές από το μοντέλο. υποστηρίζει την ενσωματωμένη χαρτογράφηση - δείτε τον κώδικα πηγής του παραδείγματος.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: el
Content-SHA256: 5aa4d6418fd50ce27a01c6469bee988274a6b5f34343edce0fb613ddcfa34055
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Αυτό το συστατικό μπορεί να εκδίδει τιμές από το μοντέλο. υποστηρίζει την ενσωματωμένη χαρτογράφηση - δείτε τον κώδικα πηγής του παραδείγματος.


__ΕΠΙΤΡΟΦΗ__:

- `dateformat {String}` μια μορφή ημερομηνίας (προεπιλεγμένη: `DEF.dateformat`)
- `datetimeformat {String}` σε μορφή ημερομηνίας/ώρα (προεπιλεγμένη: `DEF.dateformat + ' ' + DEF.timeformat`)
- `numberformat {Number}` μια προεπιλεγμένη μορφή αριθμού (προεπιλογή: κενή)
- Το `small {Boolean}` επιτρέπει μικρότερο σχεδιασμό (προεπιλεγμένο: `false`)
- Το στυλ συστατικών `style {Number}` (προεπιλεγμένο: `1`), υποστηρίζει το στυλό `2`, `3` (μικρό) και `4` (σύγχρονο)
- `defaultgroup {String}` ένα προεπιλεγμένο όνομα ομάδας (προεπιλογή: `Default`)
- `notnull {Boolean}` σκάφη μηδενικές τιμές (προεπιλεγμένη: `false`)
- Το `track {String}` μπορεί να περιέχει μονοπάτια που χωρίζονται από το comma, αυτό το ακίνητο θα παρατηρήσει μόνο τις αλλαγές στα κλειδιά

__Η δήλωση δεδομένων__:

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

__Ιδιότητες δεδομένων στην δήλωση δεδομένων__:

- `group {String}` ένα όνομα ομάδας (αναγκαίο)
- `label {String}` μια ετικέτα (αναγκαία)
- `type {String}` ένα είδος (αναγκαίο)
- `note {String}`: Μικρή τιμή κάτω από την αξία
- Ο αριθμός `format {String}`, π.χ. `2` ή η μορφή ημερομηνίας `dd.MM.yyyy`
- Η διεύθυνση URL `detail {String}` για την απόκτηση δεδομένων για τον τύπο `list`, για παράδειγμα: `/users/{0}/` και `{0}` θα αντικατασταθούν με την τιμή από τη λίστα
- Τα στοιχεία `items {Object Array/String}` για τον τύπο `list` μόνο, η γραμμή μπορεί να περιέχει ένα μονοπάτι στο `Array` ή το `URL address` για αναζήτηση
- `value {Object}` αξία ή μοντέλο με τιμές (το `path` απαιτείται)
- Το `path {String}` είναι μια πορεία προς την αξία στο μοντέλο (το `value` πρέπει να περιέχει ένα μοντέλα)
- `template {String}` Ένα πρότυπο Tangular (δραστηριότητες μόνο με `type:'template'` και `{{ value }}` περιέχει μια βασική αξία, και το `{{ item }}` περιέχουν ολόκληρο το στοιχείο)
- `empty {String}` Μια κενή τιμή όταν η τιμή είναι μηδενική (προεπιλεγμένη: `---`)
- Το `show {String}` εμφανίζει τη συνθησιακή λειτουργία `value.type === 'company'` και στη συνέχεια αν η εκτιμώμενη κατάσταση είναι `true`.
- __NEW__ `autoformat {Boolean}` επιτρέπει την αυτόματη μορφή για το `email`, ή `phones`, και μόνο για τον τύπο `string` (προεπιλεγμένο: `false`)
- __NEW__ `colorize {Boolean}` χρωματίζει την τιμή με εξαίρεση τον τύπο `list`, `color` και `icon`
- __NEW__ `plus {String}` προσθέτει μια τιμή στο τέλος της τιμής που παραδίδεται για τους τύπους `number` και `string`

__Επιτρεπόμενοι τύποι στα δεδομένα__:

- `string`
- `bool`
- `number`
- `date`
- `datetime`
- `list`
- `color`
- `emoji`
- `fontawesome`
- `password`
- `template`

__Καλό να ξέρεις__:

- Εάν η ομάδα περιέχει μόνο το ένα φορτίο, τότε το όνομα της ομάδας δεν παραδίδεται

Χρησιμοποιήστε το με `<ui-component name="detail">`Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση `DEF.fallback` (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, MIT άδεια.

```html 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>
```