j-TableGrid

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Die Komponente erstellt ein einfaches Tabellenraster (bestehend aus div-Elementen), das durch einen einfachen Rahmen unterteilt ist, den Sie ändern können.

Konfiguration:

count {Number} eine Standardanzahl von Elementen pro Zeile
countxs {Number}-Elemente pro Zeile für die mobile Anzeige
countsm {Number} Elemente pro Zeile für kleine Anzeige
countmd {Number} Elemente pro Zeile für mittlere Anzeige
countlg {Number} Elemente pro Zeile für eine große Anzeige
parent {String} zum Ermitteln der Größe (Standard: window)
margin {Number} ein vertikaler Rand (Standard: 0)
scrollbar {Boolean} aktiviert die benutzerdefinierte Bildlaufleiste (Standard: false)
fill {Boolean} füllt das Raster mit leeren Zeilen. row und scrollbar müssen definiert werden
row {Number} eine Standardzeilenhöhe für alle Anzeigen (Standard: 0)
rowxs {Number} eine Standardzeilenhöhe für die mobile Anzeige (Standard: 0)
rowsm {Number} eine Standardzeilenhöhe für kleine Anzeige (Standard: 0)
rowmd {Number} eine Standardzeilenhöhe für mittlere Anzeige (Standard: 0)
rowlg {Number} eine Standardzeilenhöhe für große Anzeige (Standard: 0)
scrolltop {Boolean} scrollt nach der Datenänderung nach oben (Standard: true)

Klassen:

ui-tablegrid-bl bedeutet Rand links
ui-tablegrid-bt bedeutet Rand oben
ui-tablegrid-first erstes Element in der Zeile
ui-tablegrid-last letztes Element in der Zeile
ui-tablegrid-empty leerer Artikel

Verwenden Sie es mit <ui-component name="tablegrid">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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>