Usage
The PageList component provides a flexible way to display content in a vertical list layout. It's perfect for creating stacked lists of PageCard components or any other elements, with optional dividers between items.
<script setup lang="ts">
const users = ref([
{
name: 'Bitrix24',
description: 'bitrix24',
to: 'https://github.com/bitrix24',
target: '_blank',
avatar: {
src: 'https://github.com/bitrix24.png',
alt: 'bitrix24',
loading: 'lazy' as const
}
},
{
name: 'Bitrix Tools',
description: 'bitrix-tools',
to: 'https://github.com/bitrix-tools',
target: '_blank',
avatar: {
src: 'https://github.com/bitrix-tools.png',
alt: 'bitrix-tools',
loading: 'lazy' as const
}
},
{
name: 'Bitrix24',
description: 'bitrix24',
to: 'https://github.com/bitrix24',
target: '_blank',
avatar: {
src: 'https://github.com/bitrix24.png',
alt: 'bitrix24',
loading: 'lazy' as const
}
},
{
name: 'Bitrix Tools',
description: 'bitrix-tools',
to: 'https://github.com/bitrix-tools',
target: '_blank',
avatar: {
src: 'https://github.com/bitrix-tools.png',
alt: 'bitrix-tools',
loading: 'lazy' as const
}
}
])
</script>
<template>
<B24PageList>
<B24PageCard
v-for="(user, index) in users"
:key="index"
variant="plain"
:to="user.to"
:target="user.target"
>
<template #body>
<B24User :name="user.name" :description="user.description" :avatar="user.avatar" size="xl" class="relative" />
</template>
</B24PageCard>
</B24PageList>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const users = ref([
{
name: 'Bitrix24',
description: 'bitrix24',
to: 'https://github.com/bitrix24',
target: '_blank',
avatar: {
src: 'https://github.com/bitrix24.png',
alt: 'bitrix24',
loading: 'lazy' as const
}
},
{
name: 'Bitrix Tools',
description: 'bitrix-tools',
to: 'https://github.com/bitrix-tools',
target: '_blank',
avatar: {
src: 'https://github.com/bitrix-tools.png',
alt: 'bitrix-tools',
loading: 'lazy' as const
}
},
{
name: 'Bitrix24',
description: 'bitrix24',
to: 'https://github.com/bitrix24',
target: '_blank',
avatar: {
src: 'https://github.com/bitrix24.png',
alt: 'bitrix24',
loading: 'lazy' as const
}
},
{
name: 'Bitrix Tools',
description: 'bitrix-tools',
to: 'https://github.com/bitrix-tools',
target: '_blank',
avatar: {
src: 'https://github.com/bitrix-tools.png',
alt: 'bitrix-tools',
loading: 'lazy' as const
}
}
])
</script>
<template>
<B24PageList>
<B24PageCard
v-for="(user, index) in users"
:key="index"
variant="plain"
:to="user.to"
:target="user.target"
>
<template #body>
<B24User :name="user.name" :description="user.description" :avatar="user.avatar" size="xl" class="relative" />
</template>
</B24PageCard>
</B24PageList>
</template>
Divide
Use the divide prop to add a divider between each child element.
<script setup lang="ts">
const users = ref([
{
name: 'Bitrix24',
description: 'bitrix24',
to: 'https://github.com/bitrix24',
target: '_blank',
avatar: {
src: 'https://github.com/bitrix24.png',
alt: 'bitrix24',
loading: 'lazy' as const
}
},
{
name: 'Bitrix Tools',
description: 'bitrix-tools',
to: 'https://github.com/bitrix-tools',
target: '_blank',
avatar: {
src: 'https://github.com/bitrix-tools.png',
alt: 'bitrix-tools',
loading: 'lazy' as const
}
},
{
name: 'Bitrix24',
description: 'bitrix24',
to: 'https://github.com/bitrix24',
target: '_blank',
avatar: {
src: 'https://github.com/bitrix24.png',
alt: 'bitrix24',
loading: 'lazy' as const
}
},
{
name: 'Bitrix Tools',
description: 'bitrix-tools',
to: 'https://github.com/bitrix-tools',
target: '_blank',
avatar: {
src: 'https://github.com/bitrix-tools.png',
alt: 'bitrix-tools',
loading: 'lazy' as const
}
}
])
</script>
<template>
<B24PageList divide>
<B24PageCard
v-for="(user, index) in users"
:key="index"
variant="plain"
:to="user.to"
:target="user.target"
>
<template #body>
<B24User :name="user.name" :description="user.description" :avatar="user.avatar" size="xl" />
</template>
</B24PageCard>
</B24PageList>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const users = ref([
{
name: 'Bitrix24',
description: 'bitrix24',
to: 'https://github.com/bitrix24',
target: '_blank',
avatar: {
src: 'https://github.com/bitrix24.png',
alt: 'bitrix24',
loading: 'lazy' as const
}
},
{
name: 'Bitrix Tools',
description: 'bitrix-tools',
to: 'https://github.com/bitrix-tools',
target: '_blank',
avatar: {
src: 'https://github.com/bitrix-tools.png',
alt: 'bitrix-tools',
loading: 'lazy' as const
}
},
{
name: 'Bitrix24',
description: 'bitrix24',
to: 'https://github.com/bitrix24',
target: '_blank',
avatar: {
src: 'https://github.com/bitrix24.png',
alt: 'bitrix24',
loading: 'lazy' as const
}
},
{
name: 'Bitrix Tools',
description: 'bitrix-tools',
to: 'https://github.com/bitrix-tools',
target: '_blank',
avatar: {
src: 'https://github.com/bitrix-tools.png',
alt: 'bitrix-tools',
loading: 'lazy' as const
}
}
])
</script>
<template>
<B24PageList divide>
<B24PageCard
v-for="(user, index) in users"
:key="index"
variant="plain"
:to="user.to"
:target="user.target"
>
<template #body>
<B24User :name="user.name" :description="user.description" :avatar="user.avatar" size="xl" />
</template>
</B24PageCard>
</B24PageList>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
divide | false | boolean |
b24ui | { base?: any; } |
Slots
| Slot | Type |
|---|---|
default | {} |
Theme
https://github.com/bitrix24/b24ui/tree/main/src/theme/page-list.ts
export default {
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-(--ui-color-divider-vibrant-default) *:not-last:after:h-px'
}
}
}