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

DHTMLX Suite 最新版下載

“有吸引力的東西效果更好”——著名可用性專(zhuān)家唐·諾曼的這句話(huà)當(dāng)然適用于現(xiàn)代網(wǎng)絡(luò)開(kāi)發(fā)。如今，開(kāi)發(fā)團(tuán)隊(duì)必須像關(guān)注網(wǎng)絡(luò)項(xiàng)目的功能一樣關(guān)注其視覺(jué)吸引力。CSS 樣式在滿(mǎn)足關(guān)鍵設(shè)計(jì)要求方面起著至關(guān)重要的作用，確保網(wǎng)絡(luò)應(yīng)用程序不僅美觀，而且用戶(hù)友好且引人入勝。

在本文中，我們將探討 CSS 樣式在網(wǎng)頁(yè)設(shè)計(jì)中的重要性、其在現(xiàn)代網(wǎng)絡(luò)應(yīng)用中日益增長(zhǎng)的重要性，以及 DHTMLX UI 組件如何幫助開(kāi)發(fā)人員實(shí)現(xiàn)各種樣式目標(biāo)。此外，我們還將分享一些實(shí)用技巧，以增強(qiáng)開(kāi)發(fā)人員使用 DHTMLX 進(jìn)行樣式設(shè)計(jì)的體驗(yàn)。

CSS 樣式是 Web 應(yīng)用程序設(shè)計(jì)的核心

Web 應(yīng)用程序設(shè)計(jì)是創(chuàng)建 Web 應(yīng)用程序的視覺(jué)和交互方面的過(guò)程，而 CSS 樣式是此過(guò)程中不可或缺的一部分。CSS 樣式有助于將原始 HTML 轉(zhuǎn)換為具有視覺(jué)吸引力且易于導(dǎo)航的 UI。Web 開(kāi)發(fā)人員使用 CSS 來(lái)實(shí)現(xiàn)以下目標(biāo)：

• 加強(qiáng)視覺(jué)一致性
• 使設(shè)計(jì)與品牌形象保持一致
• 提高可讀性和可訪(fǎng)問(wèn)性
• 增強(qiáng)響應(yīng)能力

簡(jiǎn)而言之，Web 應(yīng)用程序設(shè)計(jì)定義了 Web 項(xiàng)目設(shè)計(jì)的藍(lán)圖，而 CSS 樣式則作為將設(shè)計(jì)理念變?yōu)楝F(xiàn)實(shí)的工具集。

為什么靈活的 CSS 樣式在現(xiàn)代 Web 開(kāi)發(fā)中如此重要

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

考慮到近年來(lái)的 Web 開(kāi)發(fā)趨勢(shì)以及我們?cè)谠撔袠I(yè)的長(zhǎng)期經(jīng)驗(yàn)，我們可以肯定地說(shuō)，企業(yè)和開(kāi)發(fā)團(tuán)隊(duì)現(xiàn)在比以往任何時(shí)候都更加關(guān)心 Web 應(yīng)用程序的視覺(jué)設(shè)計(jì)。

在探索現(xiàn)代 Web 開(kāi)發(fā)趨勢(shì)時(shí)，您可能會(huì)遇到諸如暗模式、動(dòng)畫(huà)、現(xiàn)代布局技術(shù)等流行概念。對(duì)視覺(jué)設(shè)計(jì)的日益關(guān)注很大程度上歸因于 CSS 領(lǐng)域的快速發(fā)展。近年來(lái)，CSS 生態(tài)系統(tǒng)已經(jīng)豐富了各種出色的功能，例如 Subgrid、:has()、變量、容器查詢(xún)等，使開(kāi)發(fā)團(tuán)隊(duì)能夠解決以前需要 JavaScript 解決方法的問(wèn)題。最新的 CSS 狀態(tài)調(diào)查的受訪(fǎng)者列出了他們最喜歡的新 CSS 功能：

來(lái)源：

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

現(xiàn)代 Web 應(yīng)用程序?qū)σ曈X(jué)部分的要求很高，這迫使開(kāi)發(fā)團(tuán)隊(duì)尋找工具來(lái)確保靈活的樣式。我們還看到 DHTMLX 用戶(hù)對(duì)強(qiáng)大樣式功能的需求很高，并盡最大努力滿(mǎn)足這一要求。去年，我們最熱門(mén)的 JavaScript UI 組件（甘特圖、調(diào)度程序、網(wǎng)格、圖表）在這方面獲得了顯著提升。讓我們深入探討這個(gè)話(huà)題。

探索 DHTMLX CSS 樣式功能

當(dāng)選擇流行的 DHTMLX 庫(kù)為 Web 項(xiàng)目添加高級(jí)功能時(shí)，Web 開(kāi)發(fā)人員可以確保我們的 JavaScript 組件有足夠的手段來(lái)滿(mǎn)足他們的樣式需求。為了避免毫無(wú)根據(jù)，讓我們來(lái)看看 DHTMLX 庫(kù)中提供的主要樣式選項(xiàng)。

可定制的內(nèi)置主題

預(yù)定義主題允許 Web 開(kāi)發(fā)者指定一組可應(yīng)用于整個(gè)項(xiàng)目的樣式和設(shè)計(jì)規(guī)則。借助主題，可以輕松使所有 UI 元素遵循統(tǒng)一的樣式、適應(yīng)品牌樣式指南并幫助滿(mǎn)足可訪(fǎng)問(wèn)性標(biāo)準(zhǔn)。DHTMLX 庫(kù)附帶多個(gè)內(nèi)置主題，包括 Material、Light、Dark 和高對(duì)比度選項(xiàng)。

有一個(gè)實(shí)時(shí)示例，您可以在DHTMLX Gantt中切換明暗主題：

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

CSS 變量

如果預(yù)定義的主題選項(xiàng)不足以滿(mǎn)足特定用例場(chǎng)景，則可以使用 CSS 變量來(lái)：

• 更改所有主題的配色方案，
• 覆蓋特定主題的顏色值，
• 通過(guò)覆蓋內(nèi)部 CSS 變量的值來(lái)創(chuàng)建自定義主題。

這是一個(gè)，包括使用 DHTMLX Diagram 中的 CSS 變量創(chuàng)建的自定義主題。

這些主題選項(xiàng)適用于我們的大多數(shù)產(chǎn)品，并遵循相同的技術(shù)原則。所需組件的文檔提供了更多詳細(xì)信息。

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

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

通過(guò)定義全局 CSS 變量，還可以在同一組件的不同實(shí)例之間保持統(tǒng)一的設(shè)計(jì)。

UI 元素模板

DHTMLX UI 組件支持模板，允許更靈活地自定義 UI 中元素的外觀。模板通常用于根據(jù)特定條件動(dòng)態(tài)地將 CSS 樣式和自定義內(nèi)容應(yīng)用于 UI 元素，例如：

• 使用DHTMLX Scheduler構(gòu)建的 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 模板還可以幫助創(chuàng)建視覺(jué)上獨(dú)特且組織良好的布局，提高可讀性和可用性，如以下示例所示：

自定義 CSS 類(lèi)

CSS 類(lèi)是 DHTMLX 庫(kù)靈活高效樣式設(shè)置的重要機(jī)制。它允許根據(jù)類(lèi)屬性將樣式規(guī)則分配給一個(gè)或多個(gè) HTML 元素，從而實(shí)現(xiàn)一致且可重復(fù)使用的樣式設(shè)置。

讓我們考慮通過(guò)使用 DHTMLX Grid 的 CSS 類(lèi)的幾種樣式場(chǎng)景：

• 數(shù)據(jù)表中的樣式選擇

以下是針對(duì)此場(chǎng)景創(chuàng)建自定義 CSS 類(lèi)的方法：

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

創(chuàng)建的 CSS 類(lèi)的名稱(chēng)被指定為Grid 配置中的css屬性的值：

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

• 樣式行

以下是針對(duì)此場(chǎng)景創(chuàng)建自定義 CSS 類(lèi)的方法：

.my_custom_row {
    background: coral;
}

rowCss屬性作為一個(gè)函數(shù)，以行的 id 作為參數(shù)并返回一個(gè)帶有自定義 CSS 類(lèi)名稱(chēng)的字符串。

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

• 用顏色標(biāo)記細(xì)胞

以下是針對(duì)此場(chǎng)景創(chuàng)建自定義 CSS 類(lèi)的方法：

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

要標(biāo)記網(wǎng)格表的特定單元格，請(qǐng)使用列配置中的相應(yīng)屬性。您可以將mark屬性的值設(shè)置為一個(gè)函數(shù)，該函數(shù)返回帶有標(biāo)記的自定義 CSS 類(lèi)的字符串。

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 進(jìn)行 CSS 樣式設(shè)計(jì)的實(shí)用技巧

DHTMLX 為開(kāi)發(fā)人員提供了一套多功能的樣式選項(xiàng)，但必須有效地使用這些工具才能實(shí)現(xiàn)精致且可維護(hù)的設(shè)計(jì)。以下是使用 DHTMLX 組件優(yōu)化 CSS 樣式的一些關(guān)鍵技巧。

• 充分利用可用的 CSS 樣式選項(xiàng)

DHTMLX 組件具有結(jié)構(gòu)良好的默認(rèn) CSS，但如果項(xiàng)目設(shè)計(jì)需要進(jìn)行一些特定調(diào)整，我們的 JS 庫(kù) API 可以實(shí)現(xiàn)這些目標(biāo)。無(wú)需手動(dòng)覆蓋核心樣式，在完整文檔化的 API 中很可能可以找到快速有效的解決方案。

• 導(dǎo)出為 PDF/PNG 時(shí)請(qǐng)記住 CSS 設(shè)置

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

例如，在 DHTMLX Diagram 組件中，您應(yīng)該定義一組要導(dǎo)出的樣式，通過(guò)將所需樣式的絕對(duì)路徑設(shè)置到exportStyles數(shù)組中，就像本中這樣。

• 使用 CSS 特異性控制樣式

在設(shè)置 DHTMLX 組件（或任何 Web 元素）的樣式時(shí)，您不應(yīng)忘記正確應(yīng)用樣式所需的。覆蓋 DHTMLX 樣式時(shí)，務(wù)必確保您的 CSS 規(guī)則具有比默認(rèn)樣式更高的特異性（優(yōu)先級(jí)）。

• 使用瀏覽器的元素檢查器來(lái)調(diào)試和微調(diào)樣式

現(xiàn)代瀏覽器提供內(nèi)置的開(kāi)發(fā)者工具，旨在協(xié)助編程的各個(gè)方面。元素檢查器特別有助于檢查 UI 元素、實(shí)時(shí)調(diào)整 CSS 樣式以及識(shí)別潛在的樣式?jīng)_突。

總結(jié)

DHTMLX 組件為開(kāi)發(fā)人員提供了一組強(qiáng)大的選項(xiàng)，可滿(mǎn)足任何復(fù)雜程度的樣式要求。無(wú)論是應(yīng)用主題、優(yōu)化單個(gè) UI 元素的外觀，還是動(dòng)態(tài)修改樣式，DHTMLX 都能簡(jiǎn)化流程。通過(guò)正確的方法，DHTMLX JavaScript 庫(kù)為開(kāi)發(fā)團(tuán)隊(duì)提供了將高級(jí)功能與視覺(jué)創(chuàng)意相結(jié)合的絕佳機(jī)會(huì)。

關(guān)于慧都科技：

慧都科技是專(zhuān)注軟件工程、智能制造、石油工程三大行業(yè)的數(shù)字化解決方案服務(wù)商。在軟件工程領(lǐng)域，我們提供開(kāi)發(fā)控件、研發(fā)管理、代碼開(kāi)發(fā)、部署運(yùn)維等軟件開(kāi)發(fā)全鏈路所需的產(chǎn)品，提供正版授權(quán)采購(gòu)、技術(shù)選型、個(gè)性化維保等服務(wù)，幫助客戶(hù)實(shí)現(xiàn)技術(shù)合規(guī)、降本增效與風(fēng)險(xiǎn)可控。慧都科技DHTMLX在中國(guó)的官方授權(quán)代理商，提供DHTMLX系列產(chǎn)品免費(fèi)試用，咨詢(xún)，正版銷(xiāo)售等于一體的專(zhuān)業(yè)化服務(wù)。DHTMLX專(zhuān)注于JavaScript和HTML5 UI小部件和庫(kù)，以幫助開(kāi)發(fā)人員更快地構(gòu)建功能豐富的、交互式的Web界面。 遵循現(xiàn)代網(wǎng)絡(luò)開(kāi)發(fā)的標(biāo)準(zhǔn)和做法，DHTMLX提供針對(duì)桌面和移動(dòng)設(shè)備定制的優(yōu)秀Web應(yīng)用程序框架。

下載|體驗(yàn)更多DHTMLX，請(qǐng)咨詢(xún)，或撥打產(chǎn)品熱線(xiàn)：023-68661681