Vue PageList Component

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.

Bitrix24

bitrix24

Bitrix Tools

bitrix-tools

Bitrix24

bitrix24

Bitrix Tools

bitrix-tools

<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'
    }
  },
  {
    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'
    }
  },

  {
    name: 'Bitrix24',
    description: 'bitrix24',
    to: 'https://github.com/bitrix24',
    target: '_blank',
    avatar: {
      src: 'https://github.com/bitrix24.png',
      alt: 'bitrix24'
    }
  },
  {
    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'
    }
  }
])
</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.

Bitrix24

bitrix24

Bitrix Tools

bitrix-tools

Bitrix24

bitrix24

Bitrix Tools

bitrix-tools

<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'
    }
  },
  {
    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'
    }
  },
  {
    name: 'Bitrix24',
    description: 'bitrix24',
    to: 'https://github.com/bitrix24',
    target: '_blank',
    avatar: {
      src: 'https://github.com/bitrix24.png',
      alt: 'bitrix24'
    }
  },
  {
    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'
    }
  }
])
</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'`	`any` The element or component this component should render as.
`divide`	`false`	`boolean`
`b24ui`		`{ base?: any; }`

Slots

Slot	Type
`default`	`{}`

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'
            }
          }
        }
      }
    })
  ]
})

PageLinks

A list of links to display on the page.

PageSection

A responsive section.