Visão geral

TsgcHTMLComponent_KanbanBoard

Adicione colunas, coloque cards em cada uma (ou vincule um dataset agrupado por status), opcionalmente ative o arrasto e então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_KanbanBoard

Renderiza

Quadro Bootstrap 5 + CSS com escopo (SortableJS opcional)

Família

Dados & Tabelas

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Adicione colunas, adicione cards, renderize

Chame AddColumn para cada raia, adicione cards com o AddCard da coluna, ative DragEnabled se quiser reordenação e então leia HTML.

uses
  sgcHTML_Enums, sgcHTML_Component_KanbanBoard;

var
  oBoard: TsgcHTMLComponent_KanbanBoard;
  oCol: TsgcHTMLKanbanColumn;
begin
  oBoard := TsgcHTMLComponent_KanbanBoard.Create(nil);
  try
    oBoard.BoardID := 'sprint';
    oBoard.Height := '500px';
    oBoard.DragEnabled := True;

    oCol := oBoard.AddColumn('To Do', hcSecondary);
    oCol.AddCard('Draft spec', 'Outline the API.', hcLight, 'Ana');

    oBoard.AddColumn('Done', hcSuccess);

    WebModule.Response := oBoard.HTML;   // board + scoped CSS
  finally
    oBoard.Free;
  end;
end;

// Or bind it straight to a dataset (grouped by status):
oBoard.LoadFromDataSet(qryTasks, 'Status', 'Title', 'Notes', 'Owner');

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_KanbanBoard.hpp

TsgcHTMLComponent_KanbanBoard *oBoard = new TsgcHTMLComponent_KanbanBoard(NULL);
try
{
  oBoard->BoardID = "sprint";
  oBoard->Height = "500px";
  oBoard->DragEnabled = true;

  TsgcHTMLKanbanColumn *oCol = oBoard->AddColumn("To Do", hcSecondary);
  oCol->AddCard("Draft spec", "Outline the API.", hcLight, "Ana");

  oBoard->AddColumn("Done", hcSuccess);

  String html = oBoard->HTML;   // board + scoped CSS
}
__finally
{
  delete oBoard;
}

using esegece.sgcWebSockets;

var board = new TsgcHTMLComponent_KanbanBoard();
board.BoardID = "sprint";
board.Height = "500px";
board.DragEnabled = true;

var col = board.AddColumn("To Do", TsgcHTMLColor.hcSecondary);
col.AddCard("Draft spec", "Outline the API.", TsgcHTMLColor.hcLight, "Ana");

board.AddColumn("Done", TsgcHTMLColor.hcSuccess);

string html = board.HTML;   // board + scoped CSS

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Colunas

Columns contém as raias, cada uma com um Title, enum Color, ColumnID e uma coleção Cards.

Adicionar colunas

AddColumn(aTitle, aColor) adiciona uma raia e retorna a TsgcHTMLKanbanColumn para que você continue adicionando cards a ela.

Cards

O AddCard(aTitle, aDescription, aColor, aAssignee, aTag, aTagColor) de uma coluna adiciona um card com descrição, responsável e badge de tag colorida opcionais.

Vinculação a dataset

LoadFromDataSet(aDataSet, aGroupField, aTitleField, aDescField, aAssigneeField) constrói uma coluna por valor de grupo distinto e um card por linha.

Arrastar e soltar

DragEnabled injeta o SortableJS para que os cards possam ser arrastados entre colunas; deixe-o desativado para um quadro estático.

Layout

BoardID identifica o quadro; Height limita a área de rolagem; HTML retorna o quadro mais seu CSS com escopo.

Recursos

Continue explorando

	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 60 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir

KanbanBoard