Skip to content

Kirby 3.7.5

Collection

<k-collection>

This UI component hasn't been finalized yet. The functionality and syntax aren't stable and might be redone in an upcoming release. Only use it at your own risk - breaking changes are likely to occur.

The k-collection component is a wrapper around k-items that adds sortabilty and pagination to the items.

Props

Prop Type Default Description
columns
object|array
function() { return {}; }
empty
object
help
string
Help text to show below the collection
items
array|object
function() { return []; }
layout
string
Supported values:
list, cards
"list"
Layout of the collection
link
boolean
true
Enable/disable item links
pagination
boolean|object
function() { return false; }
size
string
Supported values:
tiny, small, medium, large, huge
Size for items in cards layout
sortable
boolean
Whether the collection can be sorted

Events

Event Description Passes
action
change
empty
item
option
paginate
Emitted when the pagination changes
  • object pagination
sort

Slots

Slot Description
options

Example

<k-collection layout="cards" :items="[
  {
    text: 'a.jpg',
    image:   { ... },
    options: [ ... ]
  },
  {
    text: 'b.jpg',
    image:   { ... },
    options: [ ... ]
  },
  {
    text: 'c.jpg',
    image:   { ... },
    options: [ ... ]
  }
]" />

CSS classes

.k-collection