Перейти к основному содержимому

Скины

dhtmlxGantt предлагает разнообразие предустановленных скинов для легкой смены внешнего вида диаграммы Gantt:

  1. Terrace (по умолчанию)
  2. Dark
  3. Material
  4. Contrast Black
  5. Contrast White
  6. Skyblue
  7. Meadow
  8. Broadway

Начиная с версии 9.0, все скины включены в основной файл dhtmlxgantt.css. Вы можете активировать нужный скин, установив свойство gantt.skin:

gantt.skin = "dark";

Также можно использовать метод gantt.setSkin():

gantt.setSkin("dark");

В версиях 8.0 и ниже скины предоставляются как отдельные CSS-файлы.

Использование шрифтов​

По умолчанию скины загружают шрифт Inter с https://fonts.googleapis.com. Подробнее о Google Fonts читайте здесь.

@import (css) url(
'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'
);

При необходимости вы можете удалить импорт шрифта напрямую из файлов .less, которые расположены в папке codebase/sources/less/, а затем пересобрать скин согласно инструкции в статье Кастомизация скинов.

Скин 'Terrace'​

Для использования скина по умолчанию подключите стандартный CSS-файл:

  • dhtmlxgantt.css

gantt-default-skin

Default skin

Скин 'Dark'​

Чтобы применить скин 'Dark', подключите стандартный CSS-файл:

  • dhtmlxgantt.css

Затем установите скин через свойство gantt.skin:

gantt.skin = "dark";

gantt_dark_skin

Dark skin

Скин 'Material'​

Для использования скина 'Material' подключите стандартный CSS-файл:

  • dhtmlxgantt.css

Установите скин с помощью свойства gantt.skin:

gantt.skin = "material";

gantt_material_skin

Material theme

Начиная с версии 6.3, скин Material больше не импортирует шрифт Roboto автоматически. При необходимости вы можете добавить шрифт Roboto вручную следующим образом:

<link rel="stylesheet" href="'https://fonts.googleapis.com/css?'+
    +'family="Open+Sans|Roboto:regular,medium,thin,bold"'">

Скин 'Contrast Black'​

Для использования скина 'Contrast Black' подключите стандартный CSS-файл:

  • dhtmlxgantt.css

Затем установите скин с помощью свойства gantt.skin:

gantt.skin = "contrast-black";

gantt_contrast_black_skin

High contrast theme - Black

Скин 'Contrast White'​

Чтобы применить скин 'Contrast White', подключите стандартный CSS-файл:

  • dhtmlxgantt.css

Установите скин через свойство gantt.skin:

gantt.skin = "contrast-white";

gantt_contrast_white_skin

High contrast theme - White

Скин 'Skyblue'​

Для использования скина 'Skyblue' подключите стандартный CSS-файл:

  • dhtmlxgantt.css

Установите скин через свойство gantt.skin:

gantt.skin = "skyblue";

gantt-skyblue-skin

'Skyblue' skin

Скин 'Meadow'​

Чтобы применить скин 'Meadow', подключите стандартный CSS-файл:

  • dhtmlxgantt.css

Установите скин с помощью свойства gantt.skin:

gantt.skin = "meadow";

gantt-meadow-skin

'Meadow' skin

Скин 'Broadway'​

Чтобы применить скин 'Broadway', подключите стандартный CSS-файл:

  • dhtmlxgantt.css

Установите скин через свойство gantt.skin:

gantt.skin = "broadway";

gantt-broadway-skin

'Broadway' skin