Zum Hauptinhalt springen

theme

Beschreibung​

Optional. Definiert ein Theme, das auf das Kanban-Board angewendet wird

Verwendung​

theme?: {
    name: string, // "material" (Standard) | "willow" | "willow-dark"
    fonts?: boolean
};
important

Neben der Einstellung der theme-Eigenschaft ist es auch möglich, ein Theme anzuwenden, indem die entsprechenden css-Klassen direkt zu den Widget-Containern hinzugefügt werden:

  • 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 das gewünschte Theme einbinden, indem Sie das zugehörige Stylesheet aus dem Skins-Ordner verlinken:

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

Parameter​

Hier sind die Parameter, mit denen Sie das theme konfigurieren können:

  • theme - (optional) ein Objekt mit Theme-Einstellungen. Es unterstützt:
    • name - (erforderlich) der Name des Themes, das auf das Kanban angewendet werden soll
    • fonts - (optional) steuert, ob Schriftarten vom CDN (wxi Schriftart) geladen werden
Tipp

Die Willow und Willow-Dark Themes sind ebenfalls verfügbar. Um das Theme dynamisch zu wechseln, kann die Methode setTheme() verwendet werden.

Standardkonfiguration​

Das Kanban-Board verwendet standardmäßig das Material Theme.

theme: {
    name: "material",
    fonts: true
}

Beispiel​

// Kanban erstellen
const board = new kanban.Kanban("#root", {
    columns,
    cards,
    theme: {
        name: "willow-dark", // setzt initial das "willow-dark" Theme
        fonts: false
    }
    // weitere Parameter
});

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

Verwandte Artikel: Stylisierung

Verwandte Beispiele: