从 9.0 版本开始,Gantt 皮肤采用了 CSS 变量,使您可以轻松地自定义和美化组件的样式。
Related sample: Change skin dynamically
主要 CSS 变量:
: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);
/* tasks */
--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);
}
所有这些变量都位于包内的 codebase/sources/less/src/themes/variables.less 文件中。
最简单的更改 Gantt 外观的方法是在您的样式表中覆盖 CSS 变量。例如:
<style>:root {
/* scales */
--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;
/* tasks */
--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
通过这种方式设置变量,默认样式将被您的自定义样式替换,Gantt 组件将采用您偏好的外观。
为了确保整个主题变量的正确继承,请在 :root 元素上定义变量。
在 :root 层级定义这些样式,可以确保它们在整个组件中被正确继承。这样,如果更改了某个被其他变量依赖的变量,所有相关样式都会自动更新。
例如,变量 --dhx-gantt-scale-color
继承自主文本颜色变量 --dhx-gantt-container-color
。
--dhx-gantt-container-color
时,--dhx-gantt-scale-color
也会自动反映此更改。<style>:root {
/* --dhx-gantt-scale-color 及其他
继承自 --dhx-gantt-container-color 的变量
都会受到影响
*/
--dhx-gantt-container-color: #222;
}
</style>
--dhx-gantt-container-color
,则不会影响 --dhx-gantt-scale-color
。<style>.gantt_container {
/* 只有直接使用 --dhx-gantt-container-color 的元素会受到影响 */
--dhx-gantt-container-color: #222;
}
</style>
dhtmlxGantt 提供了多种格式的样式文件:
如果您希望深度自定义现有皮肤或从零创建新皮肤,可以使用 less 文件。
您可以将 codebase/sources/less 视为一个 NPM 包。该目录包含两类文件:
在 codebase/sources/less/ 目录下运行:
> npm install
安装完成后,可通过以下命令重新构建 CSS 文件:
> npm run build
或者,监听文件变更并自动重建:
> npm run watch
这些脚本会从源码编译 CSS 文件,并将其放入 Gantt 包的 codebase 文件夹,覆盖原有文件。
以下是 9.0 版本 less 文件夹的目录结构(未来版本可能会有变动):
默认变量在 terrace
皮肤中设置,其他皮肤通过覆盖这些变量并添加样式实现自定义。
要创建新皮肤,可以从 sources/less/src/themes 复制并重命名一个现有皮肤。步骤如下:
1) 复制并重命名现有文件,例如:
-> 复制:
codebase/sources/less/src/themes/material.less
-> 重命名为:
codebase/sources/less/src/themes/custom.less
2) 在 sources/less/src/themes/index.less 中导入您的新文件:
@import "./custom";
然后添加如下内容:
:root[data-gantt-theme='custom'] {
--dhx-gantt-theme: custom;
--dhx-gantt-font-family: Roboto, Helvetica, Arial, sans-serif;
--dhx-gantt-base-colors-primary: #0288D1;
}
请注意,皮肤变量应在带有 data-gantt-theme
属性选择器的 :root
下定义。
每个新主题必须包含 --dhx-gantt-theme 变量,并指定主题名称。
3) 重新构建皮肤,运行:
npm run build
请注意,Gantt 可能会根据所用皮肤对日历应用一些预设配置。如果您通过复制现有皮肤创建新皮肤,可能需要在 Gantt 中手动调整这些设置。
Gantt 的某些样式方面是通过 JavaScript 配置控制的,而不是 CSS。例如:
Back to top