Skins-Anpassung

Ab Version 9.0 verwenden Gantt-Skins CSS-Variablen, was die Anpassung und das Styling erleichtert.

Wichtige CSS-Variablen:

:root {
    --dhx-gantt-theme: terrace;
    --dhx-gantt-font-family: Inter, Helvetica, Arial, sans-serif;
    --dhx-gantt-font-size: 14px;
 
    --dhx-gantt-base-colors-white: #FFFFFF;
    --dhx-gantt-base-colors-select: #EFF3FF;
    --dhx-gantt-base-colors-hover-color: #e0e0e0;
    --dhx-gantt-base-colors-border-light: #F0F0F0;
    --dhx-gantt-base-colors-border: #DFE0E1;
 
    --dhx-gantt-base-colors-icons: #A1A4A6;
    --dhx-gantt-base-colors-disabled: #E9E9E9;
    --dhx-gantt-base-colors-select: #E0E5F3;
    --dhx-gantt-base-colors-text-light: #555D63;
    --dhx-gantt-base-colors-text-base: #23272A;
    --dhx-gantt-base-colors-text-on-fill: rgba(255, 255, 255, 0.90);
    --dhx-gantt-base-colors-background: #FFFFFF;
    --dhx-gantt-base-colors-background-alt: #F2F2F2;
 
    --dhx-gantt-base-colors-primary: #537CFA;
    --dhx-gantt-base-colors-warning: #FAB936;
    --dhx-gantt-base-colors-error: #E3334E;
    --dhx-gantt-base-colors-success: #1BC297;
 
    --dhx-gantt-container-background: var(--dhx-gantt-base-colors-background);
    --dhx-gantt-container-color: var(--dhx-gantt-base-colors-text-base);
    --dhx-gantt-offtime-background: var(--dhx-gantt-base-colors-background-alt);
 
    --dhx-gantt-scale-background: var(--dhx-gantt-container-background);
    --dhx-gantt-scale-border-vertical: 1px solid var(--dhx-gantt-base-colors-border-light);
    --dhx-gantt-scale-border-horizontal: 1px solid var(--dhx-gantt-base-colors-border);
 
    --dhx-gantt-scale-color: var(--dhx-gantt-base-colors-text-light);
 
    --dhx-gantt-grid-body-background: transparent;
    --dhx-gantt-grid-scale-background: var(--dhx-gantt-scale-background);
    --dhx-gantt-grid-scale-color: var(--dhx-gantt-scale-color);
    --dhx-gantt-grid-scale-border-vertical: var(--dhx-gantt-scale-border-vertical);
    --dhx-gantt-timeline-scale-background: var(--dhx-gantt-scale-background);
    --dhx-gantt-timeline-scale-color: var(--dhx-gantt-scale-color);
    --dhx-gantt-timeline-scale-border-vertical:  var(--dhx-gantt-scale-border-vertical);
 
    /* Aufgaben */
 
    --dhx-gantt-task-blue: linear-gradient(180deg, #527CFF 0%, #9751FC 100%);
    --dhx-gantt-task-green: linear-gradient(180deg, #12D979 0%, #1ECDEB 100%);
    --dhx-gantt-task-violet: linear-gradient(180deg, #D071EF 0%, #EE71D5 100%);
    --dhx-gantt-task-yellow: linear-gradient(180deg, #FFB725 0%, #FFBB25 31.25%, #FAEA27 100%);
 
    --dhx-gantt-task-background: var(--dhx-gantt-task-blue);
    --dhx-gantt-task-border: none;
    --dhx-gantt-task-color: var(--dhx-gantt-base-colors-text-on-fill);
    --dhx-gantt-project-color: var(--dhx-gantt-task-color);
    --dhx-gantt-task-line-text: var(--dhx-gantt-container-color);
 
    --dhx-gantt-task-row-border: 1px solid var(--dhx-gantt-base-colors-border);
    --dhx-gantt-task-row-background: var(--dhx-gantt-container-background);
    --dhx-gantt-task-row-background--odd: var(--dhx-gantt-container-background);
 
    --dhx-gantt-project-background: var(--dhx-gantt-task-green);
    --dhx-gantt-milestone-background: var(--dhx-gantt-task-violet);
 
    --dhx-gantt-task-marker-color: var(--dhx-gantt-task-background);
 
    --dhx-gantt-popup-background: var(--dhx-gantt-container-background);
    --dhx-gantt-popup-color: var(--dhx-gantt-container-color);
 
    --dhx-gantt-tooltip-background: var(--dhx-gantt-base-colors-text-base);
    --dhx-gantt-tooltip-color: var(--dhx-gantt-container-background);
 
    --dhx-gantt-link-background: var(--dhx-gantt-base-colors-icons);
    --dhx-gantt-link-background-hover: var(--dhx-gantt-base-colors-icons-hover);
    --dhx-gantt-link-critical-background: var(--dhx-gantt-base-colors-error);
 
}

Alle Variablen finden Sie in der Datei codebase/sources/less/src/themes/variables.less.

Wie man Skins anpasst

Um das Aussehen des Gantt-Diagramms anzupassen, können Sie die notwendigen CSS-Variablen in Ihrem Stylesheet überschreiben. Hier ist ein Beispiel:

<style>:root {
 /* Skalen */
  --dhx-gantt-scale-background: #8E8E8E;
  --dhx-gantt-base-colors-border-light: #C5C5C5;
  --dhx-gantt-base-colors-border: #DFE0E1;
  --dhx-gantt-scale-color: #FFF;
  --dhx-gantt-base-colors-icons: #00000099;
 
  /* Aufgaben */
  --dhx-gantt-task-background: #3db9d3;
  --dhx-gantt-task-color: #FFFFFF;
  --dhx-gantt-project-background: #6AA84F;
  --dhx-gantt-project-color: #FFFFFF;
 
  /* Links */
  --dhx-gantt-link-background: #ffa011;
  --dhx-gantt-link-background-hover: #ffa011;
 
}
</style>

Related sample: Change skin dynamically

Wenn Sie Variablen auf diese Weise definieren, können Sie die Standardstile überschreiben und sicherstellen, dass Ihre benutzerdefinierten Stile auf das Gantt angewendet werden.

Um eine ordnungsgemäße Vererbung im gesamten Thema zu gewährleisten, definieren Sie Variablen am :root-Element.

Das Definieren dieser Stile am :root-Element stellt sicher, dass sie korrekt im gesamten Komponentenbereich vererbt und angewendet werden. Auf diese Weise wirkt sich eine Neudefinition einer von anderen verwendeten Variablen auf die damit verbundenen Stile in der gesamten Komponente aus.

Zum Beispiel erbt die Variable --dhx-gantt-scale-color von der Haupttextfarbvariable --dhx-gantt-container-color.

Die Neudefinition von --dhx-gantt-container-color auf der :root-Ebene stellt sicher, dass --dhx-gantt-scale-color sich der Änderung anpasst.

<style>:root {
    /* --dhx-gantt-scale-color und andere
  Variablen, die von `--dhx-gantt-container-color` erben,
  werden diese Änderung widerspiegeln
  */
  --dhx-gantt-container-color: #222;
 
}
</style>

Wenn jedoch --dhx-gantt-container-color auf einer niedrigeren Ebene im DOM, wie innerhalb von .gantt_container, neu definiert wird, wirkt sich dies nicht auf --dhx-gantt-scale-color aus.

<style>.gantt_container {
    /* nur Elemente, die direkt 
  --dhx-gantt-container-color verwenden, werden beeinflusst
  */
  --dhx-gantt-container-color: #222;
}
</style>

Wie man Quellcodes verwendet

Das Gantt-Paket enthält Stil-Dateien in folgenden Formen:

codebase/dhtmlxgantt.css - eine komprimierte CSS-Datei für Skins, bereit für die Produktion.
codebase/sources/dhtmlxgantt.css - lesbare vorgefertigte CSS-Dateien.
codebase/sources/less/ - LESS-Quell-Dateien für Gantt-Skins.

Die LESS-Dateien ermöglichen tiefere Anpassungen oder die Erstellung völlig neuer Skins.

Wie man anfängt

Sie können codebase/sources/less als ein NPM-Paket initialisieren. Die Quellen enthalten zwei Arten von Dateien:

Stylesheets.
Dateien mit Mikrovariablendeklarationen zur Anpassung der Gantt-Ansicht oder zur Erstellung neuer Skins.

Wie man Skins erstellt

In codebase/sources/less/ führen Sie aus:

> npm install

Nach der Installation können Sie die CSS-Dateien mit diesen Befehlen neu erstellen:

> npm run build

Oder

> npm run watch

Diese Skripte generieren CSS-Dateien aus den Quellen und platzieren sie im codebase Ordner, wobei die vorhandenen Dateien ersetzt werden.

Struktur

Hier ist die Struktur des less-Ordners für Version 9.0 (sie kann sich in zukünftigen Versionen ändern):

Bilder

./src/imgs - SVG-Icons für alle Skins.
./src/iconfont - Icons, die in eine Web-Schriftart integriert sind.

Skin-Definitionen

Der terrace Skin definiert die Standardvariablen, während andere Skins diese Variablen anpassen und spezifische Stile hinzufügen.

./src/themes
- ./src/themes/variables.less - allgemeine Variablen für alle Skins, einschließlich terrace.
- ./src/themes/contrast_black - Variablen für den Kontrast-Schwarz-Skin.
- ./src/themes/contrast_white - Variablen für den Kontrast-Weiß-Skin.
- ./src/themes/material - Variablen für den Material-Skin.
- ./src/themes/dark - Variablen für den Dunkel-Skin.
- ./src/themes/flat - Variablen für den Flat-Skin.

Einstiegspunkte zum Erstellen von Skins

theme.less
package.json

Erstellen eines benutzerdefinierten Skins

Um einen neuen Skin zu erstellen, kopieren und benennen Sie einen der vorhandenen Skins im sources/less/src/themes Ordner um. Befolgen Sie diese Schritte:

1) Kopieren und benennen Sie eine vorhandene Datei um, zum Beispiel:

-> kopieren:
codebase/sources/less/src/themes/material.less
 
-> umbenennen in:
codebase/sources/less/src/themes/custom.less

2) Importieren Sie die neue Datei in sources/less/src/themes/index.less wie folgt:

@import "./custom";

Fügen Sie dann Inhalte wie diesen hinzu:

:root[data-gantt-theme='custom'] {
    --dhx-gantt-theme: custom;
    --dhx-gantt-font-family: Roboto, Helvetica, Arial, sans-serif;
 
    --dhx-gantt-base-colors-primary: #0288D1;
 
}

Denken Sie daran, Skin-Variablen unter dem :root-Element mithilfe des data-gantt-theme-Selectors zu definieren.

Ein neues Thema muss die Variable --dhx-gantt-theme mit dem Namen des Themas enthalten.

3) Erstellen Sie die Skins neu, indem Sie ausführen:

npm run build

Gantt könnte einige voreingestellte Kalendereinstellungen basierend auf dem verwendeten Skin anwenden. Wenn Sie einen neuen Skin erstellen, indem Sie einen vorhandenen kopieren, müssen Sie diese Einstellungen möglicherweise manuell in Gantt konfigurieren.

JS-Styling-Einstellungen

Beachten Sie, dass nicht alle Gantt-Stil-Einstellungen über CSS gesteuert werden. Einige Einstellungen stammen aus der JavaScript-Konfiguration, einschließlich:

Zurück nach oben