Zum Hauptinhalt springen

Initialisierung

Hier erfahren Sie, wie Sie Kanban schnell auf einer Seite einrichten und alle Board-Funktionen zu Ihrer App hinzufügen. Befolgen Sie einfach diese Schritte, um die Komponente in Betrieb zu nehmen:

  1. Binden Sie die Kanban-Quelldateien auf einer Seite ein.
  2. Erstellen Sie einen Container für Kanban.
  3. Initialisieren Sie Kanban mit einem Konstruktor.

Including source files​

Laden Sie zunächst das Paket herunter und entpacken Sie es in Ihren Projektordner.

Damit Kanban funktioniert, fügen Sie einfach diese beiden Dateien zu Ihrer Seite hinzu:

  • kanban.js
  • kanban.css

Stellen Sie sicher, dass die Pfade zu diesen Dateien korrekt sind:

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

Creating container​

Fügen Sie ein Containerelement für Kanban hinzu und vergeben Sie eine ID, z. B. "root":

index.html
<div id="root"></div>

Wenn das Kanban-Board eine Toolbar haben soll, fügen Sie auch dafür einen separaten Container hinzu:

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

Initializing Kanban​

Kanban wird mit dem kanban.Kanban-Konstruktor initialisiert. Er erwartet zwei Argumente:

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

Wenn Sie auch eine Toolbar hinzufügen möchten, initialisieren Sie diese separat mit dem kanban.Toolbar-Konstruktor. Auch hier werden zwei Argumente benötigt:

  • Einen HTML-Container (die ID des HTML-Containers)
  • Ein Objekt mit Konfigurationseigenschaften
index.html
// Kanban erstellen
const board = new kanban.Kanban("#root", {
    // Konfigurationseigenschaften
});

new kanban.Toolbar("#toolbar", {
    // Konfigurationseigenschaften
});
Info

Weitere Informationen zum Einrichten der Kanban Toolbar finden Sie im Abschnitt Konfiguration.

Configuration properties​

Hinweis

Eine vollständige Liste der Konfigurationsoptionen für Kanban finden Sie hier.
Die vollständige Liste der Eigenschaften für die Toolbar von Kanban finden Sie hier.

Beispiel​

Hier ein Beispiel, das zeigt, wie Kanban mit einigen Anfangsdaten initialisiert wird: