j-Configuration

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Modul întunecat - Dark Mode

Configurarea:

dateformat {String} este un format de date (default: DEF.dateformat)

Declaraţie

Proprietăți autorizate:

type {String} este susținută de:
- string
- number
- date
- boolean
- dropdown
- color
- icon
- multiline
- selectable
text {String} un text / titlu
name {String} - un nume de proprietate în model
align {Number} align pentru intrări (0 stânga (default), 1 centru, 2 dreapta)
icon {String} opțional, Total JS sau identificator iconic de font
summary {String} opțional, rezumat
note {String} opțional, o notă
required {Boolean} opțional, este necesară proprietatea?
disable {String} opțional, declarația funcției de stradă în formularul value.interval === 100
visible {String} opțional, declarația funcției de stradă în formularul value.interval === 100
button {String} opțional, creează un buton mic
click {String} opțional, un link la metoda (dependent de button)
maxlength {Number} este opțional, susține numai tipul string
min {Number} este opțional, susține numai tipul number
max {Number} este opțional, susține numai tipul number
increment {Number} opțional, un număr de creștere - susține numai tipul number (default: 1)
multiple {Boolean} opțional, funcționează cu tipul selectable (o valoare va fi aranjată)
monospace {Boolean} opțional, funcționează cu tipurile string și number
bold {Boolean} opțional, funcționează cu tipurile string și number
placeholder {String} opțional
items {String/Object Array} opțional pentru dropdown și selectable în formularul [{ id: 'VALUE', name: 'TEXT' }]
- tipul string o cale către Object Array (funcționează cu scopuri)
- tipul Object Array Aria definită

dirplaceholder {String} opțional, localizator pentru j-Directory

dirsearch {Boolean} opțional, permite/disabilă câmpul search în j-Directory (default: true)

NEW: datasource {String} opțional, o cale către sursa de date pentru elementele de configurare

Declarația trebuie să fie definită în corpul elementului componentului încorporat în elementul <script type="text/plain">.

[
	{
		name: 'My group label',
		type: 'group',
		// summary: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam, nostrum.',
		// icon: 'ti ti-home'
	},
	{
		id: 'name',
		name: 'Application name',
		type: 'string',
		icon: 'ti ti-home',
		disable: 'model => model.interval < 100',
		summary: 'Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Iste eos, illum voluptas assumenda sunt possimus necessitatibus nobis provident dicta deserunt.',
		required: true
	},
	... other items
]

Utilizați-l cu <ui-component name="configuration">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

example.html

<ui-component name="LAZY colorpicker"></ui-component>
<ui-component name="LAZY datepicker"></ui-component>
<ui-component name="LAZY directory"></ui-component>
<ui-component name="LAZY icons"></ui-component>

<ui-component name="configuration" path="config" class="invisible">
	<script type="name/plain">
		[
			{
				name: 'My group',
				type: 'group',
				summary: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam, nostrum.',
				icon: 'ti ti-home'
			},
			{
				id: 'name',
				name: 'Application name',
				type: 'string',
				icon: 'ti ti-home',
				disable: 'model => model.interval < 100',
				button: 'Verify',
				note: 'ajldksasdljsalj',
				summary: 'Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Iste eos, illum voluptas assumenda sunt possimus necessitatibus nobis provident dicta deserunt.',
				required: true
			},
			{
				id: 'name',
				name: 'Application name',
				type: 'string',
				icon: 'ti ti-home',
				note: 'ajldksasdljsalj',
				summary: 'Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Iste eos, illum voluptas assumenda sunt possimus necessitatibus nobis provident dicta deserunt.',
				camouflage: true,
				required: true
			},
			{
				id: 'date',
				name: 'Date',
				type: 'date',
				disable: 'model => model.interval < 100',
				placeholder: 'Test',
				summary: 'Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Iste eos, illum voluptas assumenda sunt possimus necessitatibus nobis provident dicta deserunt.'
			},
			{
				id: 'interval',
				name: 'Backup interval',
				type: 'number',
				min: 1,
				summary: 'Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Iste eos, illum voluptas assumenda sunt possimus necessitatibus nobis provident dicta deserunt.'
			},
			{
				id: 'color',
				name: 'Color',
				type: 'color',
				disable: 'model => model.interval < 100',
				summary: 'Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Iste eos, illum voluptas assumenda sunt possimus necessitatibus nobis provident dicta deserunt.'
			},
			{
				id: 'icon',
				name: 'Icon',
				type: 'icon',
				disable: 'model => model.interval < 100',
				summary: 'Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Iste eos, illum voluptas assumenda sunt possimus necessitatibus nobis provident dicta deserunt.'
			},
			{
				id: 'interval',
				name: 'Backup interval',
				type: 'number'
			},
			{
				id: 'interval',
				disable: 'model => model.interval < 100',
				name: 'Backup interval',
				type: 'number'
			},
			{
				id: 'city2',
				items: [{ id: 'bb', name: 'BB', icon: 'ti ti-map-pin' }, { id: 'ba', name: 'BA', icon: 'ti ti-map-pin' }, { id: 'zv', name: 'ZV', icon: 'ti ti-map-pin' }, { id: 'se', name: 'SE', icon: 'ti ti-map-pin' }],
				name: 'City',
				multiple: true,
				dirempty: 'Empty',
				type: 'selectable'
			},
			{
				id: 'city',
				items: [{ id: 'bb', name: 'Banská Bystrica' }, { id: 'ba', name: 'Bratislava' }, { id: 'zv', name: 'Zvolen' }],
				name: 'City',
				noborder: 1,
				dirempty: 'Empty',
				placeholder: 'Choose city',
				disable: 'model => model.interval < 100',
				type: 'dropdown'
			},
			{
				name: 'System',
				type: 'group',
				summary: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam, nostrum.',
				icon: 'ti ti-home'
			},
			{
				id: 'notes',
				name: 'Multiline',
				type: 'multiline',
				placeholder: 'Test placeholder',
				summary: 'Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Iste eos, illum voluptas assumenda sunt possimus necessitatibus nobis provident dicta deserunt.'
			},
			{
				id: 'newsletter',
				name: 'Allow newsletter',
				type: 'boolean',
				disable: 'model => model.interval < 100',
				summary: 'Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Iste eos, illum voluptas assumenda sunt possimus necessitatibus nobis provident dicta deserunt.'
			}
		]
	</script>
</ui-component>

<script>
	var config = { interval: 100, icon: 'ti ti-home', color: '#A0A0A0', newsletter: false, name: 'Peter Širka', city: '' };
</script>