j-TableGrid

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

Az összetevő egy egyszerű táblázati hálózatot (a div elemekből áll), amelyet egy egyszerű határ oszt meg, amelyet módosíthat.

konfiguráció:

count {Number} - Az elemek sorrendjére való becsülése
countxs {Number} elemek soronként a mobil kijelző
countsm {Number} elemek soronként kis kijelző
countmd {Number} elemek soronként a közepes kijelző
countlg {Number} elemek soronként egy nagy kijelző
parent {String} a méret megszerzéséhez (default: window)
margin {Number} egy függőleges margin (default: 0)
A scrollbar {Boolean} lehetővé teszi a személyre szabott forgatót (default: false)
fill {Boolean} kitölti a hálózatot üres sorokkal kell meghatározni a row és a scrollbar
row {Number} az összes képernyőre vonatkozó előzetes soros magasság (előzetes: 0)
rowxs {Number} a mobil kijelző alapértelmezett soros magassága (például: 0)
rowsm {Number} egy alapértelmezett sor magassága kis kijelző (default: 0)
rowmd {Number} egy alapértelmezett sor magassága a közepes kijelző (default: 0)
rowlg {Number} egy alapértelmezett sor magassága nagy kijelző (default: 0)
A scrolltop {Boolean} az adatok megváltoztatása után forog a tetejére (default: true)

osztályok:

ui-tablegrid-bl - baloldali határ
A ui-tablegrid-bt a határértéke
ui-tablegrid-first első elem a sorban
ui-tablegrid-last utolsó elem a sorban
ui-tablegrid-empty üres elem

Használja a <ui-component name="tablegrid">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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>