LivaDocs

LivaKanbanBoard

DevExtreme Sortable ve ScrollView üzerine kurulu bir Kanban panosu. Görev kartları kolonlar arasında sürüklenip bırakılabilir, kolonlar başlıklarından tutularak yeniden sıralanabilir. Her kartta açıklama, atanan kişi, termin tarihi ve görsel alanları desteklenir; kart düzenleme ve görev ekleme için dahili bir form içerir.

import { LivaKanbanBoard, type KanbanItem, type KanbanColumn } from "@dataliva/livalib";

Temel kullanım

columns kolonları, items görev kartlarını tanımlar. Bir kartın hangi kolonda görüneceğini status alanı belirler; bu değer kolonun id değeriyle eşleşmelidir. Kolonun color değeri kartların sol kenar şeridine uygulanır. Kartları kolonlar arasında sürükleyerek deneyin.

Temel kullanım
Önizleme yükleniyor…

Pano kabı yüksekliğini kapsayıcıdan alır; bu yüzden sabit yükseklikli bir div içine yerleştirilmesi önerilir.

Renkli başlıklar ve kolon taşıma

columnHeaderColors ile kolon kimliği başına başlık arka plan rengi verilebilir. allowColumnReorder açıldığında kolonlar, başlıklarından tutulup sürüklenerek yeniden sıralanabilir.

Renkli başlıklar ve kolon taşıma
Önizleme yükleniyor…

Veri tipleri

interface KanbanItem {
  id: number;
  title: string;
  status: string;          // kolonun id değeriyle eşleşir
  description?: string;
  dueDate?: Date | string; // string verilirse olduğu gibi gösterilir
  assignee?: string;       // kart üzerinde baş harfiyle gösterilir
  image?: string;
}

interface KanbanColumn {
  id: string;
  title: string;
  color?: string; // kartların sol kenar şeridi rengi
}

Dahili görev formu (LivaKanbanBoardForm)

Her kolonun altındaki + Add Task düğmesi ve kartlardaki kalem simgesi, panonun içine gömülü LivaKanbanBoardForm bileşenini açar. Form; başlık, açıklama, atanan kişi, termin tarihi ve görsel alanlarını düzenler. Mevcut sürümde bu form paket kökünden ayrıca dışa aktarılmaz, yalnızca panonun içinde kullanılır. Formun değer tipi şu şekildedir:

type KanbanTaskFormValue = {
  id?: number;
  title: string;
  description?: string;
  assignee?: string;
  dueDate?: Date;
  image?: string;
};