Composables
Grid Layout
useGridClass e useFixedGridClass per classi CSS grid responsive.
Panoramica
Due composables che generano classi Tailwind CSS per layout a griglia responsive. Differiscono nel comportamento:
useGridClass— adatta automaticamente il numero di colonne in base al conteggio elementi.useFixedGridClass— mantiene un numero fisso di colonne con breakpoint responsive.
Entrambi accettano MaybeRefOrGetter<number> per supportare valori reattivi.
useGridClass
import { useGridClass } from '@pzeta/vue-widget'
const items = ref([1, 2, 3, 4])
const gridClass = useGridClass(() => items.value.length)
// gridClass.value = 'grid-cols-2 md:grid-cols-4'
Opzioni — GridClassOptions
| Opzione | Tipo | Default | Descrizione |
|---|---|---|---|
maxCols | number | 6 | Numero massimo di colonne |
breakpoints | 'default' | 'extended' | 'default' | Set di breakpoint da usare |
Mapping breakpoint default
| Conteggio | Classi |
|---|---|
| 1 | grid-cols-1 |
| 2 | grid-cols-1 md:grid-cols-2 |
| 3 | grid-cols-1 md:grid-cols-3 |
| 4 | grid-cols-2 md:grid-cols-4 |
| 5 | grid-cols-2 md:grid-cols-5 |
6+ (con maxCols >= 6) | grid-cols-2 md:grid-cols-3 xl:grid-cols-6 |
Mapping breakpoint extended
Aggiunge breakpoint sm e lg per granularita piu fine:
const gridClass = useGridClass(5, { breakpoints: 'extended' })
// 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5'
useFixedGridClass
Layout a colonne fisse (1-4) con responsive automatico:
import { useFixedGridClass } from '@pzeta/vue-widget'
const gridClass = useFixedGridClass(3)
// 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
const cols = ref(2)
const reactiveGrid = useFixedGridClass(cols)
Mapping
| Colonne | Classi |
|---|---|
| 1 | grid-cols-1 |
| 2 | grid-cols-1 md:grid-cols-2 |
| 3 | grid-cols-1 md:grid-cols-2 lg:grid-cols-3 |
| 4 | grid-cols-1 md:grid-cols-2 lg:grid-cols-4 |
| altro | grid-cols-1 md:grid-cols-2 (fallback) |
Esempio uso in template
<script setup lang="ts">
import { computed } from 'vue'
import { useFixedGridClass } from '@pzeta/vue-widget'
const props = defineProps<{ columns: 1 | 2 | 3 | 4 }>()
const gridClass = useFixedGridClass(() => props.columns)
</script>
<template>
<div class="grid gap-4" :class="gridClass">
<slot />
</div>
</template>