kendo-ui
Темы

Настройка темы

Сначала нам нужно обратиться к стилям, которые мы хотим использовать.

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

Теперь большинство элементов управления использует [Theme] , указанную в вышеуказанном ресурсе стиля.

Некоторые элементы управления, такие как Chart, TreeMap, Diagram, StockChart, Sparkline, RadialGauge и LinearGauge , отображаются с использованием вычислений с использованием JavaScript и требуют дополнительной настройки при инициализации.

Например, диаграмма:

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

Список тем:

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

Чтобы установить их глобально, вы можете переопределить Kendo следующим образом:

//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";
    }
  }
}