Anpassung

Das Erscheinungsbild und Verhalten von Kanban können Sie mit folgenden Eigenschaften anpassen:

• cardTemplate — Karten mit einer eigenen HTML-Vorlage rendern
• cardShape.menu, columnShape.menu, rowShape.menu — das Kontextmenü für Karten, Spalten und Zeilen anpassen
• columnShape.headerTemplate, columnShape.collapsedTemplate — Spaltenheader-Vorlagen ersetzen
• cardShape.css, columnShape.css, rowShape.css — CSS-Klassen bedingt anwenden
• items — Toolbar-Struktur neu anordnen und eigene Steuerelemente hinzufügen
• CSS-Variablen — visuelle Stile anpassen (siehe den Abschnitt Stilisierung)

Eigene Karten

Verwenden Sie die cardTemplate-Eigenschaft, um Karten mit einer eigenen HTML-Vorlage zu rendern. Der Callback gibt das Markup für jede Karte zurück.

Der Callback erhält ein Objekt mit folgenden Parametern:

• cardFields — Kartendaten
• selected — ob die Karte ausgewählt ist
• dragging — ob die Karte gerade verschoben wird
• cardShape — Kartenkonfiguration

Um in einer eigenen Kartenvorlage einen Kontextmenü-Auslöser einzubetten, umschließen Sie das Menüsymbol mit einem <div> mit dem Attribut data-menu-id=${cardFields.id} (dieselbe Struktur wie bei der eingebauten Karte). Das Widget bindet das Menü über dieses Attribut an den Container.

Das folgende Demo wendet eine eigene Kartenvorlage an:

Eigenes Kontextmenü

Konfigurieren Sie das Kontextmenü für Karten, Spalten und Zeilen über die Eigenschaften cardShape.menu, columnShape.menu und rowShape.menu. Jeder Eintrag in menu.items kann eine eingebaute Aktions-ID verwenden, um eine Standardoperation auszuführen, oder einen eigenen onClick-Handler für beliebiges Verhalten definieren.

cardShape.menu

Standardmäßig zeigt das Kartenmenü die Optionen Duplizieren und Löschen. Verfügbare eingebaute Aktions-IDs:

• "duplicate-card" — die Karte duplizieren
• "delete-card" — die Karte löschen

columnShape.menu

• "add-card" — eine neue Karte zur Spalte hinzufügen
• "set-edit" — die Spalte umbenennen
• "move-column:left", "move-column:right" — die Spalte nach links oder rechts verschieben
• "delete-column" — die Spalte löschen

rowShape.menu

• "set-edit" — die Zeile umbenennen
• "move-row:up", "move-row:down" — die Zeile nach oben oder unten verschieben
• "delete-row" — die Zeile löschen

Setzen Sie menu.items auf eine Funktion, um pro Karte, Spalte oder Zeile ein unterschiedliches Menü anzuzeigen. Geben Sie null oder false aus der Funktion zurück, um das Menü für ein bestimmtes Element auszublenden.

Das folgende Demo wendet ein eigenes Kontextmenü an:

Eigene Spaltenheader

Die columnShape-Eigenschaft stellt Vorlagen und Verhalten für Spaltenheader bereit:

• columnShape.headerTemplate — HTML-Vorlage des Spaltenheaders im ausgeklappten Zustand
• columnShape.collapsedTemplate — HTML-Vorlage des Spaltenheaders im eingeklappten Zustand
• columnShape.fixedHeaders — Spaltenheader beim vertikalen Scrollen einfrieren (Standard: true)

Der folgende Codeausschnitt setzt eine eigene Headervorlage mit einem Einklapp-Symbol, einem Label mit Kartenanzahl und einem Menüauslöser:

new kanban.Kanban("#root", {
    columns,
    cards,
    columnShape: {
        headerTemplate: kanban.template(({ column, columnState }) => {
            return `<div className="wx-collapse-icon" data-action="collapse">
                        <i className="${column.collapsed ? "wxi-angle-right" : "wxi-angle-left"}"></i>
                    </div>
                    ${!column.collapsed
                        ? `<div className="wx-label" data-action="rename">
                                ${column.label} (${columnState.cardsCount})
                            </div>
                            <div className="wx-menu" data-menu-id="${column.id}">
                                <i className="wxi-dots-h"></i>
                            </div>`
                        : ""}`;
        }),
        collapsedTemplate: kanban.template(({ column }) => `<div className="wx-collapsed-label">${column.label}</div>`)
    }
});

Tipp

Damit fixedHeaders wirksam wird, legen Sie eine feste Höhe am Kanban-Container fest, sodass das Board vertikal scrollt.

Bedingte CSS-Klassen

Um eine CSS-Klasse bedingt anzuwenden, übergeben Sie eine Funktion an den css-Parameter von cardShape, columnShape oder rowShape. Die Funktion gibt einen Klassennamen basierend auf den aktuellen Daten zurück:

• cardShape.css: (card) => string — Klasse, die auf eine Karte angewendet wird
• columnShape.css: (column, cards) => string — Klasse, die auf eine Spalte angewendet wird
• rowShape.css: (row, cards) => string — Klasse, die auf eine Zeile angewendet wird

Der folgende Codeausschnitt hebt überfällige Karten und gering ausgelastete Spalten hervor:

new kanban.Kanban("#root", {
    columns,
    cards,
    cardShape: {
        css: (card) => card.end_date < new Date() ? "overdue" : ""
    },
    columnShape: {
        css: (column, cards) => cards.length < 5 ? "low-load" : ""
    }
});

Eigene Toolbar

Verwenden Sie die items-Eigenschaft, um die Toolbar-Struktur anzupassen. Das Array legt fest, welche Steuerelemente angezeigt werden, in welcher Reihenfolge und mit welchem Verhalten. Ein Eintrag kann sein:

• ein eingebautes Steuerelement: "search", "sort", "undo", "redo", "addColumn", "addRow", "spacer"
• ein Objekt, das die Suchleiste oder das Sortier-Steuerelement mit eigenen Optionen überschreibt
• ein eigenes Steuerelement als Zeichenketten-Bezeichner oder als Funktion

Das folgende Demo passt die Reihenfolge der Steuerelemente, die Suchleiste, das Sortier-Steuerelement und ein eigenes Steuerelement an:

Eigene Stile

Ändern Sie die Werte der CSS-Variablen, um das Erscheinungsbild von Kanban anzupassen. Die vollständige Liste finden Sie im Abschnitt Stilisierung.

Das folgende Beispiel wendet eigene Stile auf Kanban an: