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: