Zum Hauptinhalt springen

theme

Beschreibung

Optional. Gibt das auf die Toolbar angewendete Theme an.

Verwendung

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

Zusätzlich zum Setzen der theme-Eigenschaft können Sie das gewünschte Theme 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>

Alternativ können Sie einfach das gewünschte Theme-Stylesheet aus dem Skins-Ordner einbinden:

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

Standardkonfiguration

Die Toolbar verwendet standardmäßig das Material-Theme. Sie können auch auf die Themes Willow oder Willow-Dark wechseln.

Tipp

Um das Theme zur Laufzeit zu ändern, verwenden Sie die Methode setConfig().

Beispiel

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

Änderungsprotokoll: Diese Eigenschaft wurde in Version v1.4 eingeführt

Verwandte Artikel: Stylisierung

Verwandte Beispiele: