Pageón
Un sistema de cuadrícula sensible para mostrar contenido en un diseño flexible.
xph0000xUso
El componente PageGrid proporciona un diseño de cuadrícula sensible para mostrar componentes PageCard o cualquier otro elemento, ajustando automáticamente de 1 a 3 columnas según el tamaño de la pantalla.
<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>
También se puede utilizar para mostrar una lista de tarjetas en un diseño de estilo bento mediante el uso de clases de utilidad col-span-* y 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 (Edición española)
Props (Edición española)
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
ui | { base?: any; } |
Slots (Edición española)
| Slot | Type |
|---|---|
default | {} |
xph019theme (Edición española)
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'
}
}
})
]
})x020xChangelog (Edición española)
No recent changes