PageGrid
Un système de grille réactif pour afficher le contenu dans une mise en page flexible.
Utilisation
Le composant PageGrid fournit une disposition de grille réactive pour afficher les composants PageCard ou tout autre élément, en ajustant automatiquement de 1 à 3 colonnes en fonction de la taille de l'écran.
<script setup lang="ts">
const cards = ref([
{
title: 'Icons',
description: 'Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
icon: 'i-lucide-smile',
to: '/docs/getting-started/integrations/icons'
},
{
title: 'Fonts',
description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
icon: 'i-lucide-a-large-small',
to: '/docs/getting-started/integrations/fonts'
},
{
title: 'Color Mode',
description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
icon: 'i-lucide-sun-moon',
to: '/docs/getting-started/integrations/color-mode'
}
])
</script>
<template>
<UPageGrid>
<UPageCard
v-for="(card, index) in cards"
:key="index"
v-bind="card"
/>
</UPageGrid>
</template>
<script setup lang="ts">
import { ref, provide } from 'vue'
const cards = ref([
{
title: 'Icons',
description: 'Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
icon: 'i-lucide-smile',
to: '/docs/getting-started/integrations/icons'
},
{
title: 'Fonts',
description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
icon: 'i-lucide-a-large-small',
to: '/docs/getting-started/integrations/fonts'
},
{
title: 'Color Mode',
description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
icon: 'i-lucide-sun-moon',
to: '/docs/getting-started/integrations/color-mode'
}
])
</script>
<template>
<UPageGrid>
<UPageCard
v-for="(card, index) in cards"
:key="index"
v-bind="card"
/>
</UPageGrid>
</template>
Vous pouvez également l'utiliser pour afficher une liste de cartes dans une disposition de style bento en utilisant les classes d'utilitaires col-span-* et row-span-*.
<script setup lang="ts">
const cards = ref([
{
title: 'Theme',
description: 'Learn how to customize Nuxt UI components using Tailwind CSS.',
icon: 'i-lucide-swatch-book',
to: '/docs/getting-started/theme/design-system',
class: 'lg:col-span-2',
image: {
path: 'https://ui2.nuxt.com/illustrations/color-palette',
width: 363,
height: 152
},
orientation: 'horizontal' as const
},
{
title: 'Fonts',
description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
icon: 'i-lucide-a-large-small',
to: '/docs/getting-started/integrations/fonts',
variant: 'soft' as const
},
{
title: 'Color Mode',
description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
icon: 'i-lucide-sun-moon',
to: '/docs/getting-started/integrations/color-mode',
variant: 'soft' as const
},
{
title: 'Icons',
description: 'Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
icon: 'i-lucide-smile',
to: '/docs/getting-started/integrations/icons',
image: {
path: 'https://ui2.nuxt.com/illustrations/icon-library',
width: 362,
height: 184
},
class: 'lg:col-span-2',
orientation: 'horizontal' as const,
reverse: true
}
])
</script>
<template>
<UPageGrid>
<UPageCard
v-for="(card, index) in cards"
:key="index"
v-bind="card"
>
<UColorModeImage
v-if="card.image"
:light="`${card.image.path}-light.svg`"
:dark="`${card.image.path}-dark.svg`"
:width="card.image.width"
:height="card.image.height"
:alt="card.title"
loading="lazy"
class="w-full"
/>
</UPageCard>
</UPageGrid>
</template>
<script setup lang="ts">
import { ref, provide } from 'vue'
const cards = ref([
{
title: 'Theme',
description: 'Learn how to customize Nuxt UI components using Tailwind CSS.',
icon: 'i-lucide-swatch-book',
to: '/docs/getting-started/theme/design-system',
class: 'lg:col-span-2',
image: {
path: 'https://ui2.nuxt.com/illustrations/color-palette',
width: 363,
height: 152
},
orientation: 'horizontal' as const
},
{
title: 'Fonts',
description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
icon: 'i-lucide-a-large-small',
to: '/docs/getting-started/integrations/fonts',
variant: 'soft' as const
},
{
title: 'Color Mode',
description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
icon: 'i-lucide-sun-moon',
to: '/docs/getting-started/integrations/color-mode',
variant: 'soft' as const
},
{
title: 'Icons',
description: 'Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
icon: 'i-lucide-smile',
to: '/docs/getting-started/integrations/icons',
image: {
path: 'https://ui2.nuxt.com/illustrations/icon-library',
width: 362,
height: 184
},
class: 'lg:col-span-2',
orientation: 'horizontal' as const,
reverse: true
}
])
</script>
<template>
<UPageGrid>
<UPageCard
v-for="(card, index) in cards"
:key="index"
v-bind="card"
>
<UColorModeImage
v-if="card.image"
:light="`${card.image.path}-light.svg`"
:dark="`${card.image.path}-dark.svg`"
:width="card.image.width"
:height="card.image.height"
:alt="card.title"
loading="lazy"
class="w-full"
/>
</UPageCard>
</UPageGrid>
</template>
api
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
ui | { base?: any; } |
Slots électronique
| Slot | Type |
|---|---|
default | {} |
Thème
app.config.ts
export default defineAppConfig({
ui: {
pageGrid: {
base: 'relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8'
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
pageGrid: {
base: 'relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8'
}
}
})
]
})Changelog
No recent changes