Collection

<k-collection>

• kirby/panel/src/components/Layout/Collection.vue

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