salix-front/src/components/ui/SkeletonTable.vue

39 lines
838 B
Vue

<script setup>
defineProps({
columns: {
type: Number,
default: 6,
},
});
</script>
<template>
<div class="q-pa-md q-mx-md container">
<div class="row q-gutter-md q-mb-md justify-around no-wrap">
<QSkeleton type="rect" square v-for="n in columns" :key="n" class="column" />
</div>
<div
class="row q-gutter-md q-mb-md justify-around no-wrap"
v-for="n in 5"
:key="n"
>
<QSkeleton
type="QInput"
square
v-for="m in columns"
:key="m"
class="column"
/>
</div>
</div>
</template>
<style lang="scss" scoped>
.container {
width: 100%;
overflow-x: hidden;
}
.column {
flex-shrink: 0;
width: 200px;
}
</style>