页面网格
一个可自定义的网格，用于在您的页面中显示卡片。
用法
在默认插槽中使用一些 PageCard、LandingCard 或者任何其他组件来显示基本网格。
<script setup lang="ts">
const modules = [{
title: 'VueUse',
description: 'Collection of essential Vue Composition Utilities for Vue 2 and 3.',
to: 'https://github.com/vueuse/vueuse',
icon: 'i-simple-icons-nuxtdotjs'
}, {
title: 'ESLint',
description: 'ESLint module for Nuxt.',
to: 'https://github.com/nuxt-community/eslint-module',
icon: 'i-simple-icons-eslint'
}, {
title: 'Tailwind CSS',
description: 'Add Tailwind CSS to your Nuxt application in seconds with PurgeCSS included for minimal CSS.',
to: 'https://github.com/nuxt-modules/tailwindcss',
icon: 'i-simple-icons-tailwindcss'
}]
</script>
<template>
<UPageGrid>
<UPageCard v-for="(module, index) in modules" :key="index" v-bind="module" target="_blank">
<template #description>
<span class="line-clamp-2">{{ module.description }}</span>
</template>
</UPageCard>
</UPageGrid>
</template>
插槽
默认
{}
属性
ui
DeepPartial<{ wrapper: string; }>
{}配置
{
wrapper: 'grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-8'
}