j-TableGrid

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Компонентът прави проста таблична мрежа (състояща се от div елементи), разделена на проста граница, която можете да модифицирате.

Конфигуриране:

count {Number} - изчисление на елементите по ред
countxs {Number} елементи за мобилен дисплей
countsm {Number} елементи на ред за малък дисплей
countmd {Number} елементи на ред за среден дисплей
countlg {Number} елементи на ред за голям дисплей
parent {String} за получаване на размери (предварително: window)
margin {Number} е вертикална маржа (дефолт: 0)
scrollbar {Boolean} позволява персонализирана лента за скалиране (дефолт: false)
fill {Boolean} запълва мрежата с празен ред, който трябва да се дефинира row и scrollbar
row {Number} - стандартна височина на реда за всички дисплеи (предварително: 0)
rowxs {Number} - стандартна височина за мобилен дисплей (предварително: 0)
rowsm {Number} - стандартна височина на реда за малък дисплей (предварително: 0)
rowmd {Number} - стандартна височина на реда за среден дисплей (предварително: 0)
rowlg {Number} - стандартна височина на реда за голям дисплей (предварително: 0)
scrolltop {Boolean} Скръгли към върха след промяна на данните (предварително: true)

Класове:

ui-tablegrid-bl означава левицата
ui-tablegrid-bt означава границата
ui-tablegrid-first Първият елемент в реда
ui-tablegrid-last последен елемент в реда
ui-tablegrid-empty празен елемент

Използвайте го с <ui-component name="tablegrid">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на 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>