j-TableGrid

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

Componentul face o simplă rețea de masă (compunând din elemente div) împărțită printr-o limită simplă pe care o puteți modifica.

Configurarea:

count {Number} - număr de elemente pe rând
countxs {Number} articole pe rând pentru afișarea mobilă
countsm {Number} articole pe rând pentru afișarea mică
countmd {Number} articole pe rând pentru afișarea medie
countlg {Number} pentru un ecran mare
parent {String} pentru a obține dimensiunea (default: window)
margin {Number} o marjă verticală (default: 0)
scrollbar {Boolean} permite scrollbar-ul personalizat (default: false)
fill {Boolean} umple rețeaua cu o linie goală necesitatea de a defini row și scrollbar
row {Number} este o înălțime de rând standard pentru toate ecranele (default: 0)
rowxs {Number} este o înălțime de rând standard pentru afișarea mobilă (default: 0)
rowsm {Number} o înălțime de rând standard pentru afișarea mică (default: 0)
rowmd {Number} o înălțime de rând standard pentru afișarea medie (default: 0)
rowlg {Number} o înălțime de rând standard pentru afișarea mare (default: 0)
scrolltop {Boolean} se întoarce la vârf după schimbarea datelor (default: true)

Clasă:

ui-tablegrid-bl înseamnă frontieră-left
ui-tablegrid-bt înseamnă graniță
ui-tablegrid-first primul element din rând
ui-tablegrid-last ultimul element din rând
ui-tablegrid-empty este un element gol

Utilizați-l cu <ui-component name="tablegrid">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

<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>