Skins

dhtmlxGantt wird mit mehreren integrierten Skins geliefert, die es Ihnen ermöglichen, das Erscheinungsbild des Gantt-Diagramms zu ändern:

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

Ab Version 9.0 sind all diese Skins in der Hauptdatei dhtmlxgantt.css enthalten. Um einen Skin zu aktivieren, können Sie die Eigenschaft gantt.skin setzen:

gantt.skin = "dark";

Alternativ können Sie die Methode gantt.setSkin() verwenden:

gantt.setSkin("dark");

Für Gantt v8.0 und früher wurden Skins in separaten CSS-Dateien bereitgestellt.

Verwendung von Schriftarten

Standardmäßig verwenden die Skins die Schriftart Inter, die von https://fonts.googleapis.com importiert wird. Weitere Details zu Google Fonts finden Sie 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 den Skin neu erstellen, wie im Artikel Skins-Anpassung beschrieben.

'Terrace' Skin

Um den Standard-'Terrace'-Skin zu verwenden, schließen Sie die Standard-CSS-Datei ein:

• dhtmlxgantt.css

Related sample:  Default skin

'Dark' Skin

Um den 'Dark'-Skin zu aktivieren, schließen Sie die Standard-CSS-Datei ein:

• dhtmlxscheduler.css

Setzen Sie dann den Skin mit der Eigenschaft scheduler.skin:

scheduler.skin = "dark";

Related sample:  Dark skin

'Material' Skin

Um den 'Material'-Skin anzuwenden, schließen Sie die Standard-CSS-Datei ein:

• dhtmlxgantt.css

Setzen Sie den Skin mit der Eigenschaft gantt.skin:

gantt.skin = "material";

Related sample:  Material theme

Ab Version 6.3 wird die Schriftart Roboto nicht mehr mit dem Material-Skin importiert. Bei Bedarf können Sie die Schriftart Roboto manuell wie unten gezeigt hinzufügen:

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

'Contrast Black' Skin

Um den 'Contrast Black'-Skin zu verwenden, schließen Sie die Standard-CSS-Datei ein:

• dhtmlxgantt.css

Setzen Sie den Skin mit der Eigenschaft gantt.skin:

gantt.skin = "contrast-black";

Related sample:  High contrast theme - Black

'Contrast White' Skin

Um zum 'Contrast White'-Skin zu wechseln, schließen Sie die Standard-CSS-Datei ein:

• dhtmlxgantt.css

Setzen Sie den Skin mit der Eigenschaft gantt.skin:

gantt.skin = "contrast-white";

Related sample:  High contrast theme - White

'Skyblue' Skin

Um den 'Skyblue'-Skin zu aktivieren, schließen Sie die Standard-CSS-Datei ein:

• dhtmlxgantt.css

Setzen Sie den Skin mit der Eigenschaft gantt.skin:

gantt.skin = "skyblue";

Related sample:  'Skyblue' skin

'Meadow' Skin

Für den 'Meadow'-Skin schließen Sie die Standard-CSS-Datei ein:

• dhtmlxgantt.css

Setzen Sie den Skin mit der Eigenschaft gantt.skin:

gantt.skin = "meadow";

Related sample:  'Meadow' skin

'Broadway' Skin

Um den 'Broadway'-Skin anzuwenden, schließen Sie die Standard-CSS-Datei ein:

• dhtmlxgantt.css

Setzen Sie den Skin mit der Eigenschaft gantt.skin:

gantt.skin = "broadway";

Related sample:  'Broadway' skin

Zurück nach oben