Kanban column
A single column inside a FluxKanban board. Each column has a unique column-id that is referenced by its child items and included in the move event when an item is dropped on it. The header shows the label, an optional icon and a count badge, and can be extended with the actions slot for things like a quick-add button. Use the empty slot for an empty-state message and the footer slot for inline actions like adding a new item.
Props
column-id: string | number
Unique identifier for this column. Included in move events.
count?: string | number
A badge value displayed next to the label, typically the number of items. The badge renders even when the value is 0.
disabled?: boolean
Disables drag-and-drop for this column. Items inside cannot be picked up and the column refuses incoming drops.
Default: false
icon?: FluxIconName
An icon displayed before the column label.
label: string
Header label displayed at the top of the column.
Slots
default
Item content. Place FluxKanbanItem components here.
actions
Extra content rendered at the end of the column header (e.g. an add button).
empty
Shown inside the column body when there are no items.
footer
Rendered below the item list, useful for an inline "Add item" action.
Examples
Basic
A column with a label and a couple of items.
<template>
<FluxKanban style="max-width: 100%">
<FluxKanbanColumn
column-id="todo"
label="To do">
<FluxKanbanItem
item-id="1"
column-id="todo">
<div class="card">
Design system review
</div>
</FluxKanbanItem>
<FluxKanbanItem
item-id="2"
column-id="todo">
<div class="card">
Write unit tests
</div>
</FluxKanbanItem>
<FluxKanbanItem
item-id="3"
column-id="todo">
<div class="card">
Update documentation
</div>
</FluxKanbanItem>
</FluxKanbanColumn>
</FluxKanban>
</template>
<script
lang="ts"
setup>
import { FluxKanban, FluxKanbanItem, FluxKanbanColumn } from '@flux-ui/components';
</script>
<style scoped>
.card {
padding: 12px;
background: var(--gray-25);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
transition: box-shadow 180ms var(--swift-out);
}
.card:hover {
box-shadow: 0 1px 4px rgb(0 0 0 / .08);
}
</style>Actions
Adding an action button to the column header via the actions slot.
<template>
<FluxKanban style="max-width: 100%">
<FluxKanbanColumn
column-id="todo"
label="To do">
<template #actions>
<FluxSecondaryButton
icon-leading="plus"
size="small"/>
</template>
<FluxKanbanItem
item-id="1"
column-id="todo">
<div class="card">
Design system review
</div>
</FluxKanbanItem>
<FluxKanbanItem
item-id="2"
column-id="todo">
<div class="card">
Write unit tests
</div>
</FluxKanbanItem>
</FluxKanbanColumn>
</FluxKanban>
</template>
<script
lang="ts"
setup>
import { FluxKanban, FluxKanbanItem, FluxKanbanColumn, FluxSecondaryButton } from '@flux-ui/components';
</script>
<style scoped>
.card {
padding: 12px;
background: var(--gray-25);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
transition: box-shadow 180ms var(--swift-out);
}
.card:hover {
box-shadow: 0 1px 4px rgb(0 0 0 / .08);
}
</style>Header
Adding an icon and a count badge to the column header.
<template>
<FluxKanban style="max-width: 100%">
<FluxKanbanColumn
column-id="todo"
icon="list"
label="To do"
:count="3">
<FluxKanbanItem
item-id="1"
column-id="todo">
<div class="card">
Design system review
</div>
</FluxKanbanItem>
<FluxKanbanItem
item-id="2"
column-id="todo">
<div class="card">
Write unit tests
</div>
</FluxKanbanItem>
<FluxKanbanItem
item-id="3"
column-id="todo">
<div class="card">
Update documentation
</div>
</FluxKanbanItem>
</FluxKanbanColumn>
</FluxKanban>
</template>
<script
lang="ts"
setup>
import { FluxKanban, FluxKanbanItem, FluxKanbanColumn } from '@flux-ui/components';
</script>
<style scoped>
.card {
padding: 12px;
background: var(--gray-25);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
transition: box-shadow 180ms var(--swift-out);
}
.card:hover {
box-shadow: 0 1px 4px rgb(0 0 0 / .08);
}
</style>Empty state
Showing a message in the empty slot when no items are present.
<template>
<FluxKanban>
<FluxKanbanColumn
v-for="column in columns"
:key="column.id"
:column-id="column.id"
:label="column.label">
<FluxKanbanItem
v-for="card in getCards(column.id)"
:key="card.id"
:item-id="card.id"
:column-id="column.id">
<div class="card">
{{ card.title }}
</div>
</FluxKanbanItem>
<template #empty>
Drop a card here.
</template>
</FluxKanbanColumn>
</FluxKanban>
</template>
<script
lang="ts"
setup>
import { FluxKanban, FluxKanbanItem, FluxKanbanColumn } from '@flux-ui/components';
const columns = [
{id: 'todo', label: 'To do'},
{id: 'in-progress', label: 'In progress'},
{id: 'done', label: 'Done'}
];
const cards = [
{id: 1, columnId: 'todo', title: 'A lonely card'}
];
function getCards(columnId: string) {
return cards.filter(card => card.columnId === columnId);
}
</script>
<style scoped>
.card {
padding: 12px;
background: var(--gray-25);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
transition: box-shadow 180ms var(--swift-out);
}
.card:hover {
box-shadow: 0 1px 4px rgb(0 0 0 / .08);
}
</style>Footer
An inline "Add item" button rendered through the footer slot.
<template>
<FluxKanban style="max-width: 100%">
<FluxKanbanColumn
column-id="todo"
label="To do">
<FluxKanbanItem
item-id="1"
column-id="todo">
<div class="card">
Design system review
</div>
</FluxKanbanItem>
<FluxKanbanItem
item-id="2"
column-id="todo">
<div class="card">
Write unit tests
</div>
</FluxKanbanItem>
<template #footer>
<FluxSecondaryButton
icon-leading="plus"
label="Add card"
size="small"/>
</template>
</FluxKanbanColumn>
</FluxKanban>
</template>
<script
lang="ts"
setup>
import { FluxKanban, FluxKanbanItem, FluxKanbanColumn, FluxSecondaryButton } from '@flux-ui/components';
</script>
<style scoped>
.card {
padding: 12px;
background: var(--gray-25);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
transition: box-shadow 180ms var(--swift-out);
}
.card:hover {
box-shadow: 0 1px 4px rgb(0 0 0 / .08);
}
</style>