# j-Detail > Ce composant peut restituer les valeurs du modèle. Prend en charge le mappage en ligne - consultez le code source de l'exemple. Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: fr Content-SHA256: 15402d03fb43a1eb6a9d2cbe0f24bd36bfff5791423b07d75d68b07a848fb601 Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded Ce composant peut restituer les valeurs du modèle. Prend en charge le mappage en ligne - consultez le code source de l'exemple. __Configuration__ : - `dateformat {String}` un format de date (par défaut : `DEF.dateformat`) - `datetimeformat {String}` un format date/heure (par défaut : `DEF.dateformat + ' ' + DEF.timeformat`) - `numberformat {Number}` un format numérique par défaut (par défaut : vide) - `small {Boolean}` permet une conception plus petite (par défaut : `false`) - Style de composant `style {Number}` (par défaut : `1`), prend en charge les styles `2`, `3` (minimal) et `4` (moderne) - `defaultgroup {String}` un nom de groupe par défaut (par défaut : `Default`) - `notnull {Boolean}` ignore les valeurs nullables (par défaut : `false`) - `track {String}` peut contenir des chemins divisés par des virgules, cette propriété ne surveillera que les changements dans les clés tracées __Déclaration de données__ : ```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' }); ``` __Propriétés de données dans la déclaration des données__: - `group {String}` un nom de groupe (exigeant) - `label {String}` un étiquette (exigeant) - `type {String}` un type (exigeant) - `note {String}` : une petite note sous valeur - `format {String}` Le numéro g. `2` ou le format `dd.MM.yyyy` - L'adresse URL `detail {String}` pour obtenir des données pour le type `list`, par exemple: `/users/{0}/` et `{0}` seront remplacés par la valeur de la liste - Les éléments `items {Object Array/String}` pour le type `list` uniquement, les lignes peuvent contenir un chemin vers `Array` ou `URL address` à rechercher - `value {Object}` : une valeur ou un modèle avec des valeurs (tandis que `path` est requis) - `path {String}` un chemin vers la valeur dans le modèle (`value` doit contenir un modèle) - `template {String}` Un modèle Tangular (ne fonctionne que avec `type:'template'` et `{{ value }}` contient une valeur première, et le `{{ item }}` contient l'ensemble de l'article) - `empty {String}` Une valeur vide lorsque la valeur est nulle (defaut: `---`) - `show {String}` La fonction conditionnelle `value.type === 'company'` indique si la condition évaluée est `true` - __NEW__ `autoformat {Boolean}` permet le format automatique pour `email`, ou `phones`, et seulement pour le type `string` (defaut: `false`) - __NEW__ `colorize {Boolean}` colorise la valeur à l'exception des types `list`, `color` et `icon` - __NEW__ `plus {String}` ajoute une valeur à la fin de la valeur rendue pour les types `number` et `string` __Les types autorisés dans les données__: - `string` - `bool` - `number` - `date` - `datetime` - `list` - `color` - `emoji` - `fontawesome` - `password` - `template` __Bon à savoir__ : - Si le groupe ne contient qu'un seul char, le nom du groupe n'est pas rendu. Utilisez-le avec ``. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT. ```html example.html

-- OR --


-- OR FILTERED --


```