Grid Loading

Visão geral

O LxGridLoading é um componente que exibe um layout de carregamento em grade do tipo skeleton. Ele é útil para indicar visualmente que um conteúdo parcial da tela está sendo carregado.

Clique para exibir o código

<template>
	<LxGridLoading v-if="loading" :cols="3" :rows="1" :item-style="{ height: '70px' }" />
	<div v-else class="grid-logo-container">
		<div class="grid-logo-item">
			<img src="/logo.png" alt="Linx Logo" class="grid-logo" />
		</div>
		<div class="grid-logo-item">
			<img src="/logo.png" alt="Linx Logo" class="grid-logo" />
		</div>
		<div class="grid-logo-item">
			<img src="/logo.png" alt="Linx Logo" class="grid-logo" />
		</div>
	</div>

	<LxButton id="toggle-loading" class="mt-3" @click="toggleLoading">{{ loading ? 'Desativar' : 'Ativar' }} carregamento</LxButton>
</template>

<script setup>
import { ref } from 'vue';
import LxGridLoading from '@/components/LxGridLoading/LxGridLoading.vue';
import LxButton from '@/components/LxButton/LxButton.vue';

const loading = ref(true);

function toggleLoading() {
	loading.value = !loading.value;
}
</script>

<style scoped>
.grid-logo-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1rem;
}

.grid-logo-item {
	display: flex;
	justify-content: center;
	align-items: center;
}

.grid-logo {
	height: 70px;
}
</style>

Propriedades

Nome	Descrição	Tipo	Padrão
cols	Número de colunas na grade	Number	1
rows	Número de linhas na grade	Number	1
itemStyle	Estilo customizado para cada célula	Object	{}
gridStyle	Estilo customizado para a grade	Object	{}

Playground

Experimente personalizar o estilo da grade e dos itens no playground abaixo:

Nome	Controle
Colunas
Linhas
Config. Grid Style	{ "gap": "1rem", "maxWidth": "100%" }
Config. Item Style	{ "height": "50px", "borderRadius": "2px", "backgroundColor": "var(--lx-silver-100)" }

Clique para exibir o código

<script setup>
import { ref, computed } from 'vue';
import LxGridLoading from '@/components/LxGridLoading/LxGridLoading.vue';

const cols = ref(3);
const rows = ref(1);

const gridStyle = ref({
	gap: '1rem',
	maxWidth: '100%'
});
const itemStyle = ref({
	height: '50px',
	borderRadius: '2px',
	backgroundColor: 'var(--lx-silver-100)'
});

const gridStyleString = computed({
	get: () => JSON.stringify(gridStyle.value, null, 2),
	set: (value) => {
		try {
			gridStyle.value = JSON.parse(value);
		} catch (e) {
			console.error('JSON inválido para grid-style');
		}
	}
});

const itemStyleString = computed({
	get: () => JSON.stringify(itemStyle.value, null, 2),
	set: (value) => {
		try {
			itemStyle.value = JSON.parse(value);
		} catch (e) {
			console.error('JSON inválido para item-style');
		}
	}
});
</script>

<template>
	<div class="d-flex flex-column">
		<LxGridLoading :cols="cols" :rows="rows" :grid-style="gridStyle" :item-style="itemStyle" />

		<table style="max-height: 50vh">
			<thead>
				<tr>
					<th style="width: 140px">Nome</th>
					<th>Controle</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<label for="cols" class="form-label m-0">Colunas</label>
					</td>
					<td>
						<input id="cols" v-model="cols" type="number" class="form-control" />
					</td>
				</tr>
				<tr>
					<td>
						<label for="rows" class="form-label m-0">Linhas</label>
					</td>
					<td>
						<input id="rows" v-model="rows" type="number" class="form-control" />
					</td>
				</tr>
				<tr>
					<td>
						<label for="gridStyle" class="form-label m-0">Config. Grid Style</label>
					</td>
					<td>
						<textarea id="gridStyle" v-model="gridStyleString" class="form-control" rows="5"></textarea>
					</td>
				</tr>
				<tr>
					<td>
						<label for="itemStyle" class="form-label m-0">Config. Item Style</label>
					</td>
					<td>
						<textarea id="itemStyle" v-model="itemStyleString" class="form-control" rows="5"></textarea>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>