j-Checkboxlist

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Per il design personalizzato è possibile utilizzare j-CheckboxListExpert
Supporta il Dark Mode

Configurazione:

required {Boolean} (opzionale) consente "necessario" (default: false)
items {String} (opzionale) elementi statici key1|value1, key2 with value, key3|value
icon {String} (opzionale) per l'etichetta senza fa- ecc. home, cog, ecc.
checkicon {String} (opzionale) verifica l'icona senza fa-, (default: check).
label {String} (opzionale) etichetta (default è il contenuto HTML)
type {String} (opzionale) può essere number (convertire i valori di String a Number)
datasource {String} percorso verso la fonte di dati (deve essere array)
text {String} determina un nome di proprietà per testo (in fonte dati), predefinito: name
value {String} determina un nome di proprietà per valore (in fonte dati) default :id
empty {String} (opzionale) testo vuoto per la fonte dati vuota
disabled {Boolean} (opzionale) disabilita questo componente

Utilizzare con <ui-component name="checkboxlist">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza MIT.

example.html

<div class="container">
	<div class="row">
		<div class="col-md-8 col-md-offset-2">
			<ui-component name="checkboxlist" path="selected" config="datasource:datasource;class:.col-sm-2;type:number">Frameworks</ui-component>
		</div>
	</div>
	<br />
	<div class="row">
		<div class="col-md-8 col-md-offset-2">
			<ui-component name="checkboxlist" path="selected" config="icon:home;required:true;items:Total.js|1,jComponent|2,Express.js|3,React|4,Angular.js|5;class:.col-sm-2;type:number">Frameworks</ui-component>
		</div>
	</div>
</div>

<script>
	var selected = [1, 2];
	var datasource = [{ id: 1, name: 'Total.js' }, { id: 2, name: 'jComponent' }, { id: 3, name: 'Express.js' }, { id: 4, name: 'React' }, { id: 5, name: 'Angular.js' }];
</script>