Component API

<kanban-column>

Open live example

A single kanban column: a titled, vertically scrollable region that holds
its kanban-card children (its default <slot>), with a header showing the
column title and card count. Purely presentational and metadata-only —
kanban-board creates it, positions the cards inside it, and drives the
drop-target highlight via the reflected dragover attribute and the empty
hint via empty.

Install

import "@f-ewald/components/kanban-column.js";

Usage

<kanban-column></kanban-column>

Attributes / properties

PropertyAttributeTypeDefaultDescription
headingheadingstring""Column title shown in the header.
countcountnumber0Number of cards in the column, shown as a count badge.
dragoverdragoverbooleanfalseSet by the board while a card is dragged over this column, for highlight.
emptyemptybooleanfalseWhether the column currently has no cards, so it renders an empty hint.

Events

None.

Slots

None.

CSS custom properties

Custom property
--ui-border
--ui-border-width
--ui-font
--ui-font-size
--ui-font-size-sm
--ui-font-size-xs
--ui-font-weight-medium
--ui-font-weight-semibold
--ui-line-height-glyph
--ui-line-height-tight
--ui-primary
--ui-radius
--ui-radius-pill
--ui-radius-sm
--ui-surface
--ui-surface-muted
--ui-text
--ui-text-muted