j-TableGrid

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

De component maakt een eenvoudige tafelnet (uitgesteld uit div elementen) verdeeld door een eenvoudig grens dat u kunt wijzigen.

Configuratie:

count {Number} een standaard aantal items per rij
countxs {Number} items per rij voor mobiele display
countsm {Number} items per rij voor kleine display
countmd {Number} items per rij voor medium display
countlg {Number} items per rij voor een grote afbeelding
parent {String} voor het verkrijgen van de grootte (default: window)
margin {Number} een verticale marge (default: 0)
scrollbar {Boolean} zorgt voor een aangepaste scrollbar (default: false)
fill {Boolean} vult het netwerk met een leegte die nodig is om row en scrollbar te definiëren
row {Number} een standaard rijhoogte voor alle afbeeldingen (de standaard: 0)
rowxs {Number} een standaard rijhoogte voor mobiele afbeeldingen (de standaard: 0)
rowsm {Number} een standaard rijhoogte voor kleine afbeeldingen (de standaard: 0)
rowmd {Number} een standaard lijnhoogte voor gemiddelde afbeelding (de standaard: 0)
rowlg {Number} een standaard rijhoogte voor grote afbeeldingen (de standaard: 0)
scrolltop {Boolean} scrollt naar de top na het wijzigen van gegevens (default: true)

Klassen:

ui-tablegrid-bl betekent grens links
ui-tablegrid-bt betekent grens
ui-tablegrid-first eerste item in de rij
ui-tablegrid-last laatste item in de rij
ui-tablegrid-empty Vakantie

Gebruik het met <ui-component name="tablegrid">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>