j-TableGrid

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

O componente faz uma simples rede de mesa (composta por elementos div) dividida por um limite simples que você pode modificar.

Configuração:

count {Number} - Número de itens por sequência
countxs {Number} itens por linha para a tela móvel
countsm {Number} item por linha para pequeno exibição
countmd {Number} item por linha para exibição média
countlg {Number} item por linha para um grande display
parent {String} para obter tamanho (default: window)
margin {Number} uma margem vertical (default: 0)
scrollbar {Boolean} permite a barra de rolamento personalizada (default: false)
fill {Boolean} enche a rede com uma linha vazia que precisa definir row e scrollbar
row {Number} uma altura de linha padrão para todos os ecrãs (default: 0)
rowxs {Number} uma altura de linha padrão para a tela móvel (default: 0)
rowsm {Number} uma altura de linha padrão para um pequeno ecrã (default: 0)
rowmd {Number} uma altura de linha padrão para a tela média (default: 0)
rowlg {Number} uma altura de linha padrão para grande exibição (default: 0)
scrolltop {Boolean} se move para o topo após a mudança de dados (default: true)

Clases:

ui-tablegrid-bl significa fronteira esquerda
ui-tablegrid-bt é o limite
ui-tablegrid-first primeiro item na linha
ui-tablegrid-last último item na linha
ui-tablegrid-empty item vazio

Use-o com <ui-component name="tablegrid">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença 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>