j-TableGrid

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Składnik tworzy prostą sieć stołową (w składzie elementów div) podzieloną prostą granicą, którą można zmienić.

Konfiguracja:

count {Number} - liczba elementów na rzędzie
countxs {Number} elementy na rzędzie dla wyświetlacza mobilnego
countsm {Number} elementy na kolejkę dla małego wyświetlacza
countmd {Number} elementy na rzędzie dla średniego wyświetlacza
countlg {Number} elementy na kolejkę dla dużego wyświetlacza
parent {String} dla uzyskania rozmiaru (default: window)
margin {Number} - margina pionowa (default: 0)
scrollbar {Boolean} umożliwia przystosowany pasek skręcania (default: false)
fill {Boolean} wypełnia sieć z pustym paskiem, który wymaga określenia row i scrollbar
row {Number} standardowy poziom kolejności dla wszystkich wyświetleń (default: 0)
rowxs {Number} standardowy poziom wyświetlacza dla telefonów komórkowych (default: 0)
rowsm {Number} standardowy wysokość kolejki dla małego wyświetlacza (default: 0)
rowmd {Number} standardowy poziom wyświetlania średniego (default: 0)
rowlg {Number} standardowe wysokość kolejki dla dużego wyświetlacza (default: 0)
Po zmianie danych scrolltop {Boolean} przechodzi do góry (default: true)

Klasa:

ui-tablegrid-bl oznacza lewą granicę
ui-tablegrid-bt oznacza granicę
Pierwszy element ui-tablegrid-first w kolejce
ui-tablegrid-last ostatni element w kolejce
ui-tablegrid-empty Puste przedmioty

Użyj go z <ui-component name="tablegrid">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja 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>