theme

Beschreibung

Optional. Ein Theme, das auf die Toolbar angewendet wird

Verwendung

theme?: string; // "material" | "willow" | "willow-dark"

important

Neben der Verwendung der Eigenschaft theme können Sie das gewünschte Theme auch anwenden, indem Sie die entsprechenden css-Klassen zu den Widget-Containern hinzufügen:

• Material Theme

    <!-- Kanban Toolbar -->
    <div id="toolbar" class="wx-material-theme"></div>
    <!-- Kanban Container -->
    <div id="root" class="wx-material-theme"></div>

• Willow Theme

    <!-- Kanban Toolbar -->
    <div id="toolbar" class="wx-willow-theme"></div>
    <!-- Kanban Container -->
    <div id="root" class="wx-willow-theme"></div>

• Willow-Dark Theme

    <!-- Kanban Toolbar -->
    <div id="toolbar" class="wx-willow-dark-theme"></div>
    <!-- Kanban Container -->
    <div id="root" class="wx-willow-dark-theme"></div>

oder binden Sie einfach das benötigte Theme von dem skins-Ordner auf der Seite ein:

<link type="stylesheet" href="path/to/kanban/skins/willow-dark.css"/>

Standardkonfiguration

Standardmäßig verwendet die Toolbar das Material Theme. Sie können es auch auf die Willow und Willow-Dark Themes einstellen.

Tipp

Um das aktuelle Theme dynamisch zu ändern, können Sie die Methode setConfig() verwenden.

Beispiel

// Kanban erstellen
const board = new kanban.Kanban("#root", {
    columns,
    cards,
    theme: "willow-dark" // das "willow-dark" Theme wird initial gesetzt
    // weitere Parameter
});
// Toolbar erstellen
new Toolbar("#toolbar", {
    api: board.api,
    theme: "willow-dark", // das "willow-dark" Theme wird initial gesetzt
});

Änderungsprotokoll: Die Eigenschaft wurde in v1.4 hinzugefügt

Verwandte Artikel: Stylisierung

Verwandtes Beispiel: Kanban. Ändern eines Themes über die CSS-Klasse