PageList专业版
一种垂直列表布局，用于以堆叠格式显示内容。
用法
PageList 组件提供了一种灵活的方式，用于以垂直列表布局显示内容。它非常适合创建 PageCard 组件或任何其他元素的堆叠列表，并且可以选择在项目之间添加分隔符。
<script setup lang="ts">
const users = ref([
{
name: 'Benjamin Canac',
description: 'benjamincanac',
to: 'https://github.com/benjamincanac',
target: '_blank',
avatar: {
src: 'https://github.com/benjamincanac.png',
alt: 'benjamincanac'
}
},
{
name: 'Sylvain Marroufin',
description: 'smarroufin',
to: 'https://github.com/smarroufin',
target: '_blank',
avatar: {
src: 'https://github.com/smarroufin.png',
alt: 'smarroufin'
}
},
{
name: 'Sébastien Chopin',
description: 'atinux',
to: 'https://github.com/atinux',
target: '_blank',
avatar: {
src: 'https://github.com/atinux.png',
alt: 'atinux'
}
},
{
name: 'Romain Hamel',
description: 'romhml',
to: 'https://github.com/romhml',
target: '_blank',
avatar: {
src: 'https://github.com/romhml.png',
alt: 'romhml'
}
}
])
</script>
<template>
<UPageList>
<UPageCard
v-for="(user, index) in users"
:key="index"
variant="ghost"
:to="user.to"
:target="user.target"
>
<template #body>
<UUser :name="user.name" :description="user.description" :avatar="user.avatar" size="xl" class="relative" />
</template>
</UPageCard>
</UPageList>
</template>
分割
使用 divide prop（属性）在每个子元素之间添加分隔符。
<script setup lang="ts">
const users = ref([
{
name: 'Benjamin Canac',
description: 'benjamincanac',
to: 'https://github.com/benjamincanac',
target: '_blank',
avatar: {
src: 'https://github.com/benjamincanac.png',
alt: 'benjamincanac'
}
},
{
name: 'Sylvain Marroufin',
description: 'smarroufin',
to: 'https://github.com/smarroufin',
target: '_blank',
avatar: {
src: 'https://github.com/smarroufin.png',
alt: 'smarroufin'
}
},
{
name: 'Sébastien Chopin',
description: 'atinux',
to: 'https://github.com/atinux',
target: '_blank',
avatar: {
src: 'https://github.com/atinux.png',
alt: 'atinux'
}
},
{
name: 'Romain Hamel',
description: 'romhml',
to: 'https://github.com/romhml',
target: '_blank',
avatar: {
src: 'https://github.com/romhml.png',
alt: 'romhml'
}
}
])
</script>
<template>
<UPageList divide>
<UPageCard
v-for="(user, index) in users"
:key="index"
variant="ghost"
:to="user.to"
:target="user.target"
>
<template #body>
<UUser :name="user.name" :description="user.description" :avatar="user.avatar" size="xl" />
</template>
</UPageCard>
</UPageList>
</template>
API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
divide |
|
|
插槽
| 插槽 | 类型 |
|---|---|
default |
|
主题
app.config.ts
export default defineAppConfig({
uiPro: {
pageList: {
base: 'relative flex flex-col',
variants: {
divide: {
true: '*:not-last:after:absolute *:not-last:after:inset-x-1 *:not-last:after:bottom-0 *:not-last:after:bg-border *:not-last:after:h-px'
}
}
}
}
})
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: {
pageList: {
base: 'relative flex flex-col',
variants: {
divide: {
true: '*:not-last:after:absolute *:not-last:after:inset-x-1 *:not-last:after:bottom-0 *:not-last:after:bg-border *:not-last:after:h-px'
}
}
}
}
})
]
})
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: {
pageList: {
base: 'relative flex flex-col',
variants: {
divide: {
true: '*:not-last:after:absolute *:not-last:after:inset-x-1 *:not-last:after:bottom-0 *:not-last:after:bg-border *:not-last:after:h-px'
}
}
}
}
})
]
})