Zum Hauptinhalt springen

Skins

dhtmlxGantt bietet mehrere vordefinierte Skins, die Sie verwenden können, um das Gesamterscheinungsbild des Gantt-Diagramms zu verändern:

  1. Terrace (default)
  2. Dark
  3. Material
  4. Contrast Black
  5. Contrast White
  6. Skyblue
  7. Meadow
  8. Broadway

Ab Version 9.0 sind alle Skins in der Hauptdatei dhtmlxgantt.css gebündelt. Ein Skin kann aktiviert werden, indem die Eigenschaft gantt.skin gesetzt wird:

gantt.skin = "dark";

Oder durch Aufruf der gantt.setSkin() Methode:

gantt.setSkin("dark");

In Gantt v8.0 und früheren Versionen werden Skins in separaten CSS-Dateien definiert.

Verwendung von Schriftarten​

Standardmäßig importieren Skins die Schriftart Inter von https://fonts.googleapis.com. Erfahren Sie mehr über Google Fonts hier.

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

Falls erforderlich, können Sie die Schriftart direkt aus den .less-Dateien im Ordner codebase/sources/less/ entfernen und anschließend den Skin wie im Artikel Skins Customization beschrieben neu erstellen.

'Terrace' skin​

Um das Standard-Skin anzuwenden, fügen Sie die Standard-CSS-Datei ein:

  • dhtmlxgantt.css

gantt-default-skin

Standard-Skin

'Dark' skin​

Um das 'Dark' Skin anzuwenden, fügen Sie die Standard-CSS-Datei ein:

  • dhtmlxgantt.css

Und setzen Sie die Skin-Eigenschaft über gantt.skin:

gantt.skin = "dark";

gantt_dark_skin

Dark skin

'Material' skin​

Um das 'Material' Skin anzuwenden, fügen Sie die Standard-CSS-Datei ein:

  • dhtmlxgantt.css

Und setzen Sie die Skin-Eigenschaft über gantt.skin:

gantt.skin = "material";

gantt_material_skin

Material theme

Ab Version 6.3 wurde der Import der Schriftart Roboto aus dem Material Skin entfernt. Falls erforderlich, können Sie die Schriftart Roboto manuell hinzufügen, wie folgt:

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

'Contrast Black' skin​

Um das 'Contrast Black' Skin anzuwenden, fügen Sie die Standard-CSS-Datei ein:

  • dhtmlxgantt.css

Und setzen Sie die Skin-Eigenschaft über gantt.skin:

gantt.skin = "contrast-black";

gantt_contrast_black_skin

High contrast theme - Black

'Contrast White' skin​

Um das 'Contrast White' Skin anzuwenden, fügen Sie die Standard-CSS-Datei ein:

  • dhtmlxgantt.css

Und setzen Sie die Skin-Eigenschaft über gantt.skin:

gantt.skin = "contrast-white";

gantt_contrast_white_skin

High contrast theme - White

'Skyblue' skin​

Um das 'Skyblue' Skin anzuwenden, fügen Sie die Standard-CSS-Datei ein:

  • dhtmlxgantt.css

Und setzen Sie die Skin-Eigenschaft über gantt.skin:

gantt.skin = "skyblue";

gantt-skyblue-skin

'Skyblue' skin

'Meadow' skin​

Um das 'Meadow' Skin anzuwenden, fügen Sie die Standard-CSS-Datei ein:

  • dhtmlxgantt.css

Und setzen Sie die Skin-Eigenschaft über gantt.skin:

gantt.skin = "meadow";

gantt-meadow-skin

'Meadow' skin

'Broadway' skin​

Um das 'Broadway' Skin anzuwenden, fügen Sie die Standard-CSS-Datei ein:

  • dhtmlxgantt.css

Und setzen Sie die Skin-Eigenschaft über gantt.skin:

gantt.skin = "broadway";

gantt-broadway-skin

'Broadway' skin

Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.
Need more help?Contact Support