getCardHeight

Beschreibung

Optional. Eine Funktion, die eine geschätzte Höhe einer Karte zurückgibt

Die Funktion getCardHeight wird vom Widget zur Schätzung der Kartenhöhen verwendet, wenn die Eigenschaft cardHeight nicht gesetzt ist und das Board mit renderType: "lazy" und scrollType: "column" konfiguriert ist. Die geschätzten Höhen ermöglichen es dem Widget, die Scrollleiste korrekt darzustellen, bevor die tatsächlichen Karten im DOM gemessen werden.

Info

Wenn Sie die Eigenschaft cardHeight setzen, verwendet das Widget die feste Höhe und getCardHeight wird nicht aufgerufen. Das Setzen von cardHeight ist die empfohlene Vorgehensweise, um renderType: "lazy" mit scrollType: "column" zu kombinieren.

Verwendung

getCardHeight?: (cardShape: object, card: object, cardWidth: number) => number;

Parameter

Die Callback-Funktion erhält folgende Argumente:

• cardShape - das Konfigurationsobjekt der Karte (die Eigenschaft cardShape)
• card - das Datenobjekt der Karte
• cardWidth - die aktuelle Breite der Karte in Pixeln

Die Funktion muss eine Zahl zurückgeben — die geschätzte Höhe der Karte in Pixeln.

Standardkonfiguration

Standardmäßig verwendet das Widget eine integrierte Funktion, die die Kartenhöhe anhand der in cardShape deklarierten sichtbaren Felder und der in der Karte gespeicherten Daten schätzt. Diese Standardeinstellung funktioniert für Boards, die das integrierte Kartenlayout verwenden.

Wenn Sie ein benutzerdefiniertes cardTemplate bereitstellen, kann die integrierte Schätzung die tatsächliche Höhe des gerenderten Markup-Codes nicht mehr vorhersagen. Geben Sie in diesem Fall eine benutzerdefinierte getCardHeight-Funktion an, die die Höhe der gerenderten Vorlage zurückgibt, oder setzen Sie stattdessen eine statische cardHeight.

Beispiel

Das folgende Beispiel stellt eine benutzerdefinierte getCardHeight-Funktion für ein Board mit einer benutzerdefinierten Kartenvorlage bereit:

const cardTemplate = ({ cardFields }) => {
    const { label, description } = cardFields;
    return `
        <div className="custom-card" style={{padding: '20px'}}>
            <div className="custom-label">${label}</div>
            <div className="custom-description">${description || ""}</div>
        </div>
    `;
};

new kanban.Kanban("#root", {
    cards,
    columns,
    renderType: "lazy",
    scrollType: "column",
    cardTemplate: kanban.template(card => cardTemplate(card)),
    getCardHeight: (cardShape, card, cardWidth) => {
        // Höhe der benutzerdefinierten Vorlage schätzen
        let height = 60; // Basis-Padding + Label-Zeile
        if (card.description) {
            height += Math.ceil(card.description.length / 40) * 18;
        }
        return height;
    },
    // weitere Parameter
});

Verwandte Artikel: Konfiguration