Suche…


Ein Theme einrichten

Zuerst müssen wir uns auf die Styles beziehen, die wir verwenden möchten.

<link rel="stylesheet" href="[file path]/kendo.common.min.css" />
<link rel="stylesheet" href="[file path]/kendo.[Theme].min.css" />

Die meisten Steuerelemente verwenden jetzt das [Theme] , das in der obigen Style-Ressource angegeben ist.

Einige Steuerelemente wie Chart, TreeMap, Diagramm, StockChart, Sparkline, RadialGauge und LinearGauge werden mit von JavaScript berechneten Layouts gerendert und erfordern bei der Initialisierung eine zusätzliche Konfiguration.

Zum Beispiel das Diagramm:

$("#chart").kendoChart({
    theme: "blueOpal",
    //...
});

Liste der Themen:

"black", "blueOpal", "bootstrap", "default", "flat", "highContrast", "material", "materialBlack", "metro", "metroBlack", "moonlight", "silver", "uniform", "fiori"(kendo ui pro), "nova"

Um sie global festzulegen, können Sie Kendo folgendermaßen überschreiben:

//The Themable Elements
var themable = ["Chart", "TreeMap", "Diagram", "StockChart", "Sparkline", "RadialGauge", "LinearGauge"];

//Check if kendo.dataviz is available
if (kendo.dataviz) {
  
  //Set for each control the default theme
  for (var i = 0; i < themable.length; i++) {
    var widget = kendo.dataviz.ui[themable[i]];

    if (widget) {
      widget.fn.options.theme = "blueOpal";
    }
  }
}


Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow