PageGridPRO

GitHub
一种响应式网格系统，用于以灵活的布局显示内容。

用法

PageGrid 组件提供了一种响应式网格布局，用于显示 PageCard 组件或任何其他元素，根据屏幕尺寸自动调整为 1 到 3 列。

图标
Nuxt UI 集成了 Nuxt Icon，可以访问 Iconify 提供的超过 200,000 个图标。
字体
Nuxt UI 集成了 Nuxt Fonts，提供即插即用的字体优化。
颜色模式
Nuxt UI 集成了 Nuxt Color Mode，可在浅色和深色模式之间切换。
<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: '/getting-started/icons'
  },
  {
    title: 'Fonts',
    description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
    icon: 'i-lucide-a-large-small',
    to: '/getting-started/fonts'
  },
  {
    title: 'Color Mode',
    description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-sun-moon',
    to: '/getting-started/color-mode'
  }
])
</script>

<template>
  <UPageGrid>
    <UPageCard
      v-for="(card, index) in cards"
      :key="index"
      v-bind="card"
    />
  </UPageGrid>
</template>

您还可以通过使用 col-span-* 和 row-span-* 工具类，将其用于以便当盒风格的布局显示卡片列表。

主题
了解如何使用 Tailwind CSS v4 定制 Nuxt UI 组件。
Theme
字体
Nuxt UI 集成了 Nuxt Fonts，提供即插即用的字体优化。
颜色模式
Nuxt UI 集成了 Nuxt Color Mode，可在浅色和深色模式之间切换。
图标
Nuxt UI 集成了 Nuxt Icon，可以访问 Iconify 提供的超过 200,000 个图标。
Icons
<script setup lang="ts">
const cards = ref([
  {
    title: 'Theme',
    description: 'Learn how to customize Nuxt UI components using Tailwind CSS v4.',
    icon: 'i-lucide-swatch-book',
    to: '/getting-started/theme',
    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: '/getting-started/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: '/getting-started/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: '/getting-started/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

属性

属性默认值类型
as

'div'

any

此组件应渲染为的元素或组件。

插槽

插槽类型
default

{}

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    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({
      uiPro: {
        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 uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        pageGrid: {
          base: 'relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8'
        }
      }
    })
  ]
})

PageFeature

用于展示应用程序主要功能的组件。

PageHeader

页面的响应式页眉。