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.
Divide
Use the divide prop to add a divider between each child element.
API
Props
Slots
Theme
app.config.ts
export default defineAppConfig({
b24ui: {
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-(--ui-color-divider-vibrant-default) *:not-last:after:h-px'
}
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'
export default defineConfig({
plugins: [
vue(),
bitrix24UIPluginVite({
b24ui: {
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-(--ui-color-divider-vibrant-default) *:not-last:after:h-px'
}
}
}
}
})
]
})