j-Detail

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

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 :

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 <ui-component name="detail">. 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.

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>