Zum Hauptinhalt springen

Initialisierung

Diese Anleitung gibt Ihnen eine detaillierte Schritt-für-Schritt-Anleitung, wie Sie Kanban auf einer Seite erstellen, um Ihre Anwendung mit den Funktionen eines Kanban-Boards zu erweitern. Gehen Sie wie folgt vor, um eine einsatzbereite Komponente zu erhalten:

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

Including source files​

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

Um Kanban zu erstellen, müssen Sie zwei Quelldateien in Ihre Seite einbinden:

  • kanban.js
  • kanban.css

Stellen Sie sicher, dass Sie die korrekten relativen Pfade zu den Quelldateien angeben:

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

Creating container​

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

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

Wenn Sie das Widget zusammen mit der Toolbar erstellen möchten, müssen Sie dafür einen separaten Container hinzufügen:

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

Initializing Kanban​

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

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

Wenn Sie das Widget zusammen mit der Toolbar erstellen möchten, müssen Sie diese separat mit dem kanban.Toolbar-Konstruktor initialisieren. Auch dieser nimmt zwei Parameter entgegen:

  • 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

Um mehr über die Konfiguration der Toolbar von Kanban zu erfahren, lesen Sie den Abschnitt Konfiguration

Configuration properties​

Hinweis

Die vollständige Liste der Eigenschaften zur Konfiguration von Kanban finden Sie hier.
Die vollständige Liste der Eigenschaften zur Konfiguration der Toolbar von Kanban finden Sie hier.

Beispiel​

In diesem Beispiel sehen Sie, wie Kanban mit Anfangsdaten initialisiert wird: