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