Collections

Vertical lists for grouped content such as menus, settings, and feeds, with optional icons, supporting text, and hoverable or linked items.

Collection List
  • JD
    John Doe
    Software Engineer
  • JS
    Jane Smith
    Designer
  • MJ
    Mike Johnson
    Product Manager
Collection with Actions
  • Item with action
    Click to view details
  • Another item
    With action button
Usage
<script setup lang="ts">
import { VdCollection } from "@vanduo-oss/vd3";
const items = [
  { id: 1, title: "Ada Lovelace", subtitle: "Engineer", avatar: "/ada.jpg" },
  { id: 2, title: "Alan Turing", subtitle: "Mathematician" },
];
</script>

<template>
  <VdCollection :items="items" header="Team" hoverable bordered />
</template>

API Reference

Class NameDescriptionType
.vd-collectionBase component container class, typically applied to <ul>.Component
.vd-collection-itemChild element representing a single list item, typically <li>. Add .active to show selected state.Sub-component
.vd-collection-avatarContainer for leading visual media like avatars or icons.Sub-component
.vd-collection-contentWrapper for textual content inside an item (title and subtitle).Sub-component
.vd-collection-titleThe primary heading or text of the collection item.Sub-component
.vd-collection-textThe secondary descriptive text of the collection item.Sub-component
.vd-collection-actionContainer for trailing actions like buttons or icons.Sub-component

Component API (Vue 3)

PropDescription
:itemsArray of { id, title, subtitle?, avatar?, action? }.
:headerOptional list header text.
:hoverableHover highlight on rows.
:borderedAdds an outer border.
:sizesm | md | lg (default md).