j-TableGrid

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

Komponent vytvára jednoduchú mriežku tabuľky (zloženú z prvkov div) rozdelenú jednoduchým okrajom, ktorý môžete upravovať.

Konfigurácia:

count {Number} predvolený počet položiek na riadok
countxs {Number} položiek na riadok pre mobilné zobrazenie
countsm {Number} položiek na riadok pre malé zobrazenie
countmd {Number} položiek na riadok pre stredné zobrazenie
countlg {Number} položiek na riadok pre veľký displej
parent {String} na získanie veľkosti (predvolené: window)
margin {Number} zvislý okraj (predvolené: 0)
scrollbar {Boolean} umožňuje vlastný posuvník (predvolené: false)
fill {Boolean} vyplní mriežku prázdnymi riadkami, je potrebné definovať row a scrollbar
row {Number} predvolená výška riadkov pre všetky displeje (predvolená: 0)
rowxs {Number} predvolená výška riadka pre mobilný displej (predvolená: 0)
rowsm {Number} predvolená výška riadka pre malý displej (predvolené: 0)
rowmd {Number} predvolená výška riadka pre stredné zobrazenie (predvolené: 0)
rowlg {Number} predvolená výška riadku pre veľký displej (predvolená: 0)
scrolltop {Boolean} sa po zmene údajov posunie nahor (predvolené: true)

Triedy:

ui-tablegrid-bl znamená hranica-vľavo
ui-tablegrid-bt znamená okraj-vrchol
ui-tablegrid-first prvá položka v rade
ui-tablegrid-last posledná položka v riadku
ui-tablegrid-empty prázdna položka

Použite ho so <ui-component name="tablegrid">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

example.html

<div style="width:500px;padding:10px">
	<ui-component name="tablegrid" path="items" config="count:3" style="border:1px solid #EBECF2">
		<script type="text/html">
			<div style="padding:20px 0;text-align:center">{{ value.name }}</div>
		</script>
		<script type="text/html">
			<div style="padding:20px 0;text-align:center" class="b">Optional: empty</div>
		</script>
	</ui-component>
</div>
<script>
	var items = [{ name: 'Total.js' }, { name: 'SuperAdmin' }, { name: 'Code Editor' }, { name: 'jComponent' }];
</script>