Initialisierung

Erstellen Sie ein Kanban-Widget auf einer Seite in drei Schritten:

1. Binden Sie die Quelldateien ein.
2. Erstellen Sie einen Container.
3. Initialisieren Sie Kanban.

Include source files

Laden Sie das Paket herunter und entpacken Sie den Inhalt in einen Ordner Ihres Projekts.

Binden Sie die folgenden Quelldateien in Ihre Seite ein:

• kanban.js
• kanban.css

Geben Sie korrekte relative Pfade zu beiden Dateien an:

index.html

<script type="text/javascript" src="./dist/kanban.js"></script>  
<link rel="stylesheet" href="./dist/kanban.css">

Create a container

Fügen Sie einen Container für Kanban hinzu und weisen Sie ihm eine ID zu, zum Beispiel root:

index.html

<div id="root"></div>

Um das Widget mit einer Toolbar zu erstellen, fügen Sie einen separaten Container für die Toolbar hinzu:

index.html

<div id="toolbar"></div> // Container für die Toolbar
<div id="root"></div> // Container für Kanban

Initialize Kanban

Initialisieren Sie Kanban mit dem kanban.Kanban-Konstruktor. Der Konstruktor nimmt zwei Parameter entgegen:

• einen CSS-Selektor für den HTML-Container (oder das Container-Element selbst)
• ein Konfigurationsobjekt (siehe die vollständige Liste der Eigenschaften)

Der folgende Code-Ausschnitt erstellt eine Kanban-Instanz:

index.html

// Kanban erstellen
new kanban.Kanban("#root", {
    // Konfigurationseigenschaften
});

Um das Widget mit einer Toolbar zu erstellen, initialisieren Sie die Toolbar separat mit dem kanban.Toolbar-Konstruktor. Die Toolbar-Steuerelemente wirken über den Parameter api auf die Kanban-Instanz ein. Übergeben Sie board.api, um die Toolbar mit dem Board zu verknüpfen:

index.html

// Kanban erstellen
const board = new kanban.Kanban("#root", {
    // Konfigurationseigenschaften
});

new kanban.Toolbar("#toolbar", {
    api: board.api, // erforderlich: verknüpft die Toolbar-Steuerelemente mit der Kanban-Instanz
    // weitere Konfigurationseigenschaften
});

Info

Weitere Informationen zur Konfiguration der Toolbar finden Sie im Abschnitt Konfiguration.

Configuration properties

Die vollständige Konfigurationsreferenz:

• Übersicht der Kanban-Eigenschaften — alle Kanban-Konfigurationseigenschaften
• Übersicht der Toolbar-Eigenschaften — alle Toolbar-Konfigurationseigenschaften

Beispiel

Der folgende Ausschnitt initialisiert Kanban mit Beispieldaten: