j-TableGrid

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Le composant fait une simple grille de table (composée d'éléments div) divisée par un simple bord que vous pouvez modifier.

Configuration :

count {Number} : un nombre d'articles par conséquent
countxs {Number} pour l'affichage mobile
countsm {Number} pour un petit écran
countmd {Number} pour l'affichage moyen
countlg {Number} pour un grand écran
parent {String} pour obtenir la taille (defaut: window)
margin {Number} une marge verticale (defaut : 0)
scrollbar {Boolean} active la barre de défilement personnalisée (par défaut : false)
fill {Boolean} remplit la grille avec des rangs vides nécessitant de définir row et scrollbar
row {Number} une hauteur de ligne par défaut pour tous les disques (par défauts: 0)
rowxs {Number} une hauteur de ligne par défaut pour l'affichage mobile (par défauts: 0)
rowsm {Number} une hauteur de ligne par défaut pour l'affichage petit (defaut: 0)
rowmd {Number} une hauteur de ligne par défaut pour l'affichage moyen (defaut: 0)
rowlg {Number} une hauteur de ligne par défaut pour un grand écran (par défauts: 0)
scrolltop {Boolean} tourne vers le haut après avoir changé les données (defaut: true)

Les classes:

ui-tablegrid-bl signifie frontière gauche
ui-tablegrid-bt signifie le haut de la frontière
ui-tablegrid-first premier élément en ligne
ui-tablegrid-last dernier élément en ligne
ui-tablegrid-empty L'élément vide

Utilisez-le avec <ui-component name="tablegrid">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence 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>