页面列
一个可自定义的列组件，用于在页面中显示卡片。
用法
在默认插槽中使用一些 页面卡片 或任何其他内容，以将它们显示为列。
Nostrud reprehenderit magna deserunt dolor.
Evan you
Vue.js 和 Vite 的创建者
Irure irure dolore Lorem dolor anim velit id fugiat minim cupidatat dolore nulla Lorem aliquip cillum.
Guillermo Rauch
Vercel 的联合创始人兼首席执行官
Magna labore amet velit eiusmod velit dolor cillum sunt est tempor ea commodo fugiat amet tempor.
Addy Osmani
Chrome 首席工程师
Culpa amet do sit officia non magna cillum ullamco dolore qui sunt occaecat.
Sarah Drasner
Google 工程总监
Ex veniam eu incididunt.
Dominik Angerer
Storyblok 的联合创始人
Nostrud id Lorem laborum ut eiusmod voluptate aliquip non esse sint occaecat.
Savas Vedova
GitLab 高级前端工程师
<script setup lang="ts">
const testimonials = [{
quote: 'Nostrud reprehenderit magna deserunt dolor.',
author: {
name: 'Evan you',
job: 'Creator of Vue.js and Vite',
src: 'https://ipx.nuxt.com/f_auto,s_40x40/gh_avatar/yyx990803'
}
}, {
quote: 'Irure irure dolore Lorem dolor anim velit id fugiat minim cupidatat dolore nulla Lorem aliquip cillum.',
author: {
name: 'Guillermo Rauch',
job: 'Co-founder and CEO of Vercel',
src: 'https://ipx.nuxt.com/f_auto,s_40x40/gh_avatar/rauchg'
}
}, {
quote: 'Magna labore amet velit eiusmod velit dolor cillum sunt est tempor ea commodo fugiat amet tempor.',
author: {
name: 'Addy Osmani',
job: 'Chief Engineer of Chrome',
src: 'https://ipx.nuxt.com/f_auto,s_40x40/gh_avatar/addyosmani'
}
}, {
quote: 'Culpa amet do sit officia non magna cillum ullamco dolore qui sunt occaecat.',
author: {
name: 'Sarah Drasner',
job: 'Director of Engineering, Google',
src: 'https://ipx.nuxt.com/f_auto,s_40x40/gh_avatar/sdras'
}
}, {
quote: 'Ex veniam eu incididunt.',
author: {
name: 'Dominik Angerer',
job: 'Co-founder of Storyblok',
src: 'https://ipx.nuxt.com/f_auto,s_40x40/gh_avatar/DominikAngerer'
}
}, {
quote: 'Nostrud id Lorem laborum ut eiusmod voluptate aliquip non esse sint occaecat.',
author: {
name: 'Savas Vedova',
job: 'Sernior Frontend Engineer at GitLab',
src: 'https://ipx.nuxt.com/f_auto,s_40x40/gh_avatar/svedova'
}
}]
</script>
<template>
<UPageColumns>
<UPageCard v-for="(testimonial, index) in testimonials" :key="index">
<q class="italic text-gray-500 dark:text-gray-400">
{{ testimonial.quote }}
</q>
<div class="flex gap-x-3 items-center mt-3">
<UAvatar :src="testimonial.author.src" :alt="testimonial.author.name" size="sm" />
<div class="min-w-0 text-sm">
<p class="font-semibold">
{{ testimonial.author.name }}
</p>
<p class="truncate">
{{ testimonial.author.job }}
</p>
</div>
</div>
</UPageCard>
</UPageColumns>
</template>
插槽
默认
{}
属性
ui
DeepPartial<{ wrapper: string; }>
{}配置
{
wrapper: 'column-1 md:columns-2 lg:columns-3 gap-8 space-y-8'
}