j-Detail

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

Este componente puede representar valores del modelo. Admite mapeo en línea: consulte el código fuente del ejemplo.

Configuración:

dateformat {String} un formato de fecha (predeterminado: DEF.dateformat)
datetimeformat {String} un formato de fecha/hora (predeterminado: DEF.dateformat + ' ' + DEF.timeformat)
numberformat {Number} un formato de número predeterminado (predeterminado: vacío)
small {Boolean} permite un diseño más pequeño (predeterminado: false)
Estilo de componente style {Number} (predeterminado: 1), admite el estilo 2, 3 (mínimo) y 4 (moderno)
defaultgroup {String} un nombre de grupo predeterminado (predeterminado: Default)
notnull {Boolean} omite valores que aceptan valores NULL (predeterminado: false)
track {String} puede contener rutas divididas por comas, esta propiedad observará solo los cambios en las claves rastreadas

Declaración de datos:

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

Propiedades de datos en la declaración de datos:

group {String} un nombre de grupo (obligatorio)
label {String} una etiqueta (obligatoria)
type {String} un tipo (obligatorio)
note {String} una pequeña nota por debajo del valor
Número format {String}, p. 2 o formato de fecha dd.MM.yyyy
detail {String} Dirección URL para obtener datos para el tipo list, ejemplo: /users/{0}/ y {0} se reemplazarán con el valor de la lista.
Elementos items {Object Array/String} solo para el tipo list, la cadena puede contener una ruta a Array o URL address para buscar
value {Object} un valor o modelo con valores (entonces se requiere path)
path {String} una ruta al valor en el modelo (value debe contener un modelo)
template {String} Una plantilla Tangular (funciona solo con type:'template' y {{ value }} contiene un valor sin procesar y {{ item }} contiene el elemento completo)
empty {String} Un valor vacío cuando el valor admite valores NULL (predeterminado: ---)
show {String} la función condicional value.type === 'company' luego se muestra si la condición evaluada es true
NEW autoformat {Boolean} habilita el formato automático para email o phones, y solo para el tipo string (predeterminado: false)
NEW colorize {Boolean} colorea el valor excepto el tipo list, color y icon.
NEW plus {String} agrega un valor al final del valor representado para los tipos number y string

Tipos permitidos en datos:

string
bool
number
date
datetime
list
color
emoji
fontawesome
password
template

Es bueno saberlo:

si el grupo contiene solo un carácter, entonces el nombre del grupo no se representa

Úselo con <ui-component name="detail">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (la CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia 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>