KanbanColumn

Kanban lane with a title and card counter. Cards are passed as children. The size prop (xs, sm, md, lg, xl) scales padding, text and avatar size.

Jump to API reference

Import

Vue

import { UiKanbanColumn } from '@ziyarago/ui/vue'

With cards

To contact2

Visa documentsGroup of 12Urgent

Hotel voucherDar Al ImanDone

Vue

<UiKanbanColumn title="To contact">
  <UiKanbanCard
    title="Visa documents"
    sub="Group of 12"
    tag="Urgent"
    tone="danger"
   />
  <UiKanbanCard
    title="Hotel voucher"
    sub="Dar Al Iman"
    tag="Done"
    tone="success"
   />
</UiKanbanColumn>

Custom count

Visa pending12

Vue

<UiKanbanColumn title="Visa pending" :count="12" />

Sizes

To contact2

Vue

<UiKanbanColumn title="To contact" :count="2" size="xs" />

<UiKanbanColumn title="To contact" :count="2" size="sm" />

<UiKanbanColumn title="To contact" :count="2" size="md" />

<UiKanbanColumn title="To contact" :count="2" size="lg" />

<UiKanbanColumn title="To contact" :count="2" size="xl" />

API reference

Single kanban column with a title, count badge and stacked cards.

Props

PropType and valuesDefaultDescription

titlerequiredstring—Column heading.

countnumber—Count badge; defaults to the number of children.

sizexssmmdlgxl'md'Scales padding, text and avatars.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultCards, usually KanbanCard or DealCard. React passes them as children.