DHTMLX UI 組件庫允許您更快地構建跨平臺、跨瀏覽器 Web 和移動應用程序。它包括一組豐富的即用式 HTML5 組件，這些組件可以輕松組合到單個應用程序界面中。DHTMLX JS UI 組件可用于任何服務器端技術：PHP、Java、ASP.NET、Ruby、Grails、ColdFusion、Python 等。此外，您可以輕松地將它們集成到基于Angular、React和 Vue.js 的 Web 應用中。

DHTMLX Suite 最新版下載

“有吸引力的東西效果更好”——著名可用性專家唐·諾曼的這句話當然適用于現代網絡開發。如今，開發團隊必須像關注網絡項目的功能一樣關注其視覺吸引力。CSS 樣式在滿足關鍵設計要求方面起著至關重要的作用，確保網絡應用程序不僅美觀，而且用戶友好且引人入勝。

在本文中，我們將探討 CSS 樣式在網頁設計中的重要性、其在現代網絡應用中日益增長的重要性，以及 DHTMLX UI 組件如何幫助開發人員實現各種樣式目標。此外，我們還將分享一些實用技巧，以增強開發人員使用 DHTMLX 進行樣式設計的體驗。

CSS 樣式是 Web 應用程序設計的核心

Web 應用程序設計是創建 Web 應用程序的視覺和交互方面的過程，而 CSS 樣式是此過程中不可或缺的一部分。CSS 樣式有助于將原始 HTML 轉換為具有視覺吸引力且易于導航的 UI。Web 開發人員使用 CSS 來實現以下目標：

• 加強視覺一致性
• 使設計與品牌形象保持一致
• 提高可讀性和可訪問性
• 增強響應能力

簡而言之，Web 應用程序設計定義了 Web 項目設計的藍圖，而 CSS 樣式則作為將設計理念變為現實的工具集。

為什么靈活的 CSS 樣式在現代 Web 開發中如此重要

多年來，DHTMLX 一直關注影響 Web 開發的所有重大變化，以確保我們的JavaScript UI 組件符合最新要求。這是一個不斷變化的環境，今天的一些流行事物明天可能會消失并被遺忘。然而，無論技術如何發展，CSS 樣式等一些基本的東西在 Web 開發中仍然是必不可少的。

考慮到近年來的 Web 開發趨勢以及我們在該行業的長期經驗，我們可以肯定地說，企業和開發團隊現在比以往任何時候都更加關心 Web 應用程序的視覺設計。

在探索現代 Web 開發趨勢時，您可能會遇到諸如暗模式、動畫、現代布局技術等流行概念。對視覺設計的日益關注很大程度上歸因于 CSS 領域的快速發展。近年來，CSS 生態系統已經豐富了各種出色的功能，例如 Subgrid、:has()、變量、容器查詢等，使開發團隊能夠解決以前需要 JavaScript 解決方法的問題。最新的 CSS 狀態調查的受訪者列出了他們最喜歡的新 CSS 功能：

來源：

調查還表明，一些備受期待的功能（如條件邏輯、混合和砌體布局）即將推出。

現代 Web 應用程序對視覺部分的要求很高，這迫使開發團隊尋找工具來確保靈活的樣式。我們還看到 DHTMLX 用戶對強大樣式功能的需求很高，并盡最大努力滿足這一要求。去年，我們最熱門的 JavaScript UI 組件（甘特圖、調度程序、網格、圖表）在這方面獲得了顯著提升。讓我們深入探討這個話題。

探索 DHTMLX CSS 樣式功能

當選擇流行的 DHTMLX 庫為 Web 項目添加高級功能時，Web 開發人員可以確保我們的 JavaScript 組件有足夠的手段來滿足他們的樣式需求。為了避免毫無根據，讓我們來看看 DHTMLX 庫中提供的主要樣式選項。

可定制的內置主題

預定義主題允許 Web 開發者指定一組可應用于整個項目的樣式和設計規則。借助主題，可以輕松使所有 UI 元素遵循統一的樣式、適應品牌樣式指南并幫助滿足可訪問性標準。DHTMLX 庫附帶多個內置主題，包括 Material、Light、Dark 和高對比度選項。

有一個實時示例，您可以在DHTMLX Gantt中切換明暗主題：

DHTMLX 主題基于 CSS 變量，可用于進一步的樣式修改。

CSS 變量

如果預定義的主題選項不足以滿足特定用例場景，則可以使用 CSS 變量來：

• 更改所有主題的配色方案，
• 覆蓋特定主題的顏色值，
• 通過覆蓋內部 CSS 變量的值來創建自定義主題。

這是一個，包括使用 DHTMLX Diagram 中的 CSS 變量創建的自定義主題。

這些主題選項適用于我們的大多數產品，并遵循相同的技術原則。所需組件的文檔提供了更多詳細信息。

CSS 變量通過定義可重復使用的樣式屬性簡化了 DHTMLX 組件中特定 UI 元素的樣式設置。例如，下面是一個修改了刻度、任務和鏈接顏色的甘特圖示例：

: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;
}

通過定義全局 CSS 變量，還可以在同一組件的不同實例之間保持統一的設計。

UI 元素模板

DHTMLX UI 組件支持模板，允許更靈活地自定義 UI 中元素的外觀。模板通常用于根據特定條件動態地將 CSS 樣式和自定義內容應用于 UI 元素，例如：

• 使用DHTMLX Scheduler構建的 JS Scheduling 日歷中的事件的空白/填充描述

...
scheduler.templates.event_class=function(start,end,event){
    if (event.text) //if event have description
        return "past_event"; //then set special css class for it
};
...

• 基于

...
template: (value, { balance }) => balance > 0
    ? `<div style='color:green'>? ${value}</div>`
    : `<div style='color:red'>? ${value}</div>`,
...

除此之外，CSS 模板還可以幫助創建視覺上獨特且組織良好的布局，提高可讀性和可用性，如以下示例所示：

自定義 CSS 類

CSS 類是 DHTMLX 庫靈活高效樣式設置的重要機制。它允許根據類屬性將樣式規則分配給一個或多個 HTML 元素，從而實現一致且可重復使用的樣式設置。

讓我們考慮通過使用 DHTMLX Grid 的 CSS 類的幾種樣式場景：

• 數據表中的樣式選擇

以下是針對此場景創建自定義 CSS 類的方法：

.custom {
    --dhx-color-primary: #ff5252;
    --dhx-s-grid-selection-background: rgba(255, 198, 198, 1);
}

創建的 CSS 類的名稱被指定為Grid 配置中的css屬性的值：

const grid = new dhx.Grid("grid", {
    ...
    selection: true,
    css: "custom"
});

• 樣式行

以下是針對此場景創建自定義 CSS 類的方法：

.my_custom_row {
    background: coral;
}

rowCss屬性作為一個函數，以行的 id 作為參數并返回一個帶有自定義 CSS 類名稱的字符串。

const grid = new dhx.Grid("grid", {
    columns: [
    // columns config
    ],
    rowCss: row => (row.custom ? "my_custom_row" : ""),
    data: dataset,
    adjust: true
});

• 用顏色標記細胞

以下是針對此場景創建自定義 CSS 類的方法：

.my_custom_mark {
    background: lightcoral;
}
.total_col {
    background: #f2f2f2;
}

要標記網格表的特定單元格，請使用列配置中的相應屬性。您可以將mark屬性的值設置為一個函數，該函數返回帶有標記的自定義 CSS 類的字符串。

var grid = new dhx.Grid("grid", {
    columns: [
       ...
            id: "population", header: [{ text: "Population" }],
            mark: function (cell, data, row, col) { return cell > 100000000 ? "my_custom_mark" : "" }
        },
 
        {
            id: "density", header: [{ text: "Density (P/Km2)" }],
            mark: function (cell, data) { return "total_col"; }
        },
      ...
});

使用 DHTMLX 進行 CSS 樣式設計的實用技巧

DHTMLX 為開發人員提供了一套多功能的樣式選項，但必須有效地使用這些工具才能實現精致且可維護的設計。以下是使用 DHTMLX 組件優化 CSS 樣式的一些關鍵技巧。

• 充分利用可用的 CSS 樣式選項

DHTMLX 組件具有結構良好的默認 CSS，但如果項目設計需要進行一些特定調整，我們的 JS 庫 API 可以實現這些目標。無需手動覆蓋核心樣式，在完整文檔化的 API 中很可能可以找到快速有效的解決方案。

• 導出為 PDF/PNG 時請記住 CSS 設置

DHTMLX 組件（如 Gantt、Grid、Scheduler 和 Diagram）支持導出為各種文件格式。但是，默認情況下，導出的文件中不包含自定義樣式（例如修改的顏色、字體或布局調整）。為了確保自定義 CSS 樣式反映在導出的文件中，需要指定導出后顯示自定義 CSS 的配置。

例如，在 DHTMLX Diagram 組件中，您應該定義一組要導出的樣式，通過將所需樣式的絕對路徑設置到exportStyles數組中，就像本中這樣。

• 使用 CSS 特異性控制樣式

在設置 DHTMLX 組件（或任何 Web 元素）的樣式時，您不應忘記正確應用樣式所需的。覆蓋 DHTMLX 樣式時，務必確保您的 CSS 規則具有比默認樣式更高的特異性（優先級）。

• 使用瀏覽器的元素檢查器來調試和微調樣式

現代瀏覽器提供內置的開發者工具，旨在協助編程的各個方面。元素檢查器特別有助于檢查 UI 元素、實時調整 CSS 樣式以及識別潛在的樣式沖突。

總結

DHTMLX 組件為開發人員提供了一組強大的選項，可滿足任何復雜程度的樣式要求。無論是應用主題、優化單個 UI 元素的外觀，還是動態修改樣式，DHTMLX 都能簡化流程。通過正確的方法，DHTMLX JavaScript 庫為開發團隊提供了將高級功能與視覺創意相結合的絕佳機會。

關于慧都科技：

慧都科技是專注軟件工程、智能制造、石油工程三大行業的數字化解決方案服務商。在軟件工程領域，我們提供開發控件、研發管理、代碼開發、部署運維等軟件開發全鏈路所需的產品，提供正版授權采購、技術選型、個性化維保等服務，幫助客戶實現技術合規、降本增效與風險可控。慧都科技DHTMLX在中國的官方授權代理商，提供DHTMLX系列產品免費試用，咨詢，正版銷售等于一體的專業化服務。DHTMLX專注于JavaScript和HTML5 UI小部件和庫，以幫助開發人員更快地構建功能豐富的、交互式的Web界面。 遵循現代網絡開發的標準和做法，DHTMLX提供針對桌面和移動設備定制的優秀Web應用程序框架。

下載|體驗更多DHTMLX，請咨詢，或撥打產品熱線：023-68661681