# j-Detail

> Diese Komponente kann Werte aus dem Modell rendern. Unterstützt Inline-Mapping – schauen Sie sich den Quellcode des Beispiels an.

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

Diese Komponente kann Werte aus dem Modell rendern. Unterstützt Inline-Mapping – schauen Sie sich den Quellcode des Beispiels an.


__Konfiguration__:

- `dateformat {String}` ein Datumsformat (Standard: `DEF.dateformat`)
- `datetimeformat {String}` ein Datums-/Uhrzeitformat (Standard: `DEF.dateformat + ' ' + DEF.timeformat`)
- `numberformat {Number}` ein Standard-Zahlenformat (Standard: leer)
- `small {Boolean}` ermöglicht kleineres Design (Standard: `false`)
- Komponentenstil `style {Number}` (Standard: `1`), unterstützt Stil `2`, `3` (minimal) und `4` (modern)
- `defaultgroup {String}` ein Standardgruppenname (Standard: `Default`)
- `notnull {Boolean}` überspringt Nullwerte (Standard: `false`)
- `track {String}` kann durch Kommas getrennte Pfade enthalten. Diese Eigenschaft überwacht nur Änderungen in verfolgten Schlüsseln

__Datendeklaration__:

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

__Dateneigenschaften in der Datendeklaration__:

- `group {String}` ein Gruppenname (erfordert)
- `label {String}` ein Etikett (erforderlich)
- `type {String}` eine Art (erfordert)
- `note {String}` eine kleine Wertschätzung
- `format {String}` Die Nummer e.g `2` oder Dateformate `dd.MM.yyyy`
- `detail {String}` URL für die Erfassung von Daten für `list` Typ, zum Beispiel: `/users/{0}/` und `{0}` wird durch den Wert aus der Liste ersetzt
- `items {Object Array/String}`-Einheiten für den Typ `list` nur, kann eine Straße auf `Array` oder `URL address` enthalten
- `value {Object}` ein Wert oder ein Modell mit Werten (siehe `path` erforderlich)
- `path {String}` eine Werte in einem Modell (`value` muss ein Modell enthalten)
- `template {String}` A Tangular Die Modelle (nur mit `type:'template'` und `{{ value }}` Sie enthält einen Rohwert und `{{ item }}` enthält das gesamte Element)
- `empty {String}` Eine leere Werte, wenn die Werte null ist (Default: `---`)
- `show {String}` zeigt dann die bedingungspflichtige Funktion `value.type === 'company'` an, wenn die bewertete Bedingung `true` ist.
- Neue `autoformat {Boolean}` Automatisierung ermöglicht `email`oder `phones`Und nur für `string` Der Standard (default ) `false`)
- __NEW__ `colorize {Boolean}` farbiert den Wert mit Ausnahme von `list`, `color` und `icon`
- __NEW__ `plus {String}` fügt einen Wert zum Ende des renderierten Wertes für die Typen `number` und `string` hinzu

__Zulässige Typen in Daten__:

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

__Gut zu wissen__:

- Wenn die Gruppe nur einen Charz enthält, wird der Name der Gruppe nicht angegeben.

Verwenden Sie es mit `<ui-component name="detail">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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