evExpress WinForm擁有180+組件和UI庫，能為Windows Forms平臺(tái)創(chuàng)建具有影響力的業(yè)務(wù)解決方案。DevExpress WinForms能完美構(gòu)建流暢、美觀且易于使用的應(yīng)用程序，無論是Office風(fēng)格的界面，還是分析處理大批量的業(yè)務(wù)數(shù)據(jù)，它都能輕松勝任！

復(fù)制下面鏈接獲取DevExpress：https://www.evget.com/product/740/download

在官方發(fā)布的下一個(gè)主要更新（v22.2）中，技術(shù)團(tuán)隊(duì)計(jì)劃添加dx-class標(biāo)簽屬性到HTML & CSS模板中，根據(jù)所選屬性的值，該標(biāo)記將對同一元素應(yīng)用不同的CSS樣式。

這個(gè)標(biāo)簽的常用語法是<div dx-class="{PropertyName: N}">...</div>，其中PropertyName是應(yīng)用所需CSS樣式的屬性的名稱，N表示可供選擇的樣式列表。

為了幫助解釋這個(gè)新特性的強(qiáng)大功能，讓我們看看如何基于屬性類型應(yīng)用語法。

布爾屬性的樣式選擇

如果您的模板可視化具有Boolean屬性的項(xiàng)，可能期望對這些項(xiàng)設(shè)置不同的樣式(基于特定的業(yè)務(wù)需求/可視化需求)。為了將“true”或“false”狀態(tài)以不同的方式可視化，dx-class屬性語法應(yīng)該如下所示:

<div dx-class="{InStock: styleForTrue, styleForFalse}">...</div>

假設(shè)您為顯示來自“Employee”類的記錄的WinForms Data Grid設(shè)計(jì)了一個(gè)模板。

public class Employee {
public string FirstName { get; set; }
public string LastName { get; set; }
public bool OnLeave { get; set; }
// ...
}

該類的標(biāo)記可能如下所示:

HTML

<div class="horz-container">
<div class="name">${FirstName}</div>
<div class="name">${LastName}</div>
<div class="vacation-label">Vacation</div>
</div>

CSS

.vacation-label {
background-color: purple;
color: White;
width: 70px;
height: 20px;
border-radius: 10px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
font-weight: bold;
}

對于這個(gè)特殊的例子，希望在當(dāng)前正在“Vacation”（休假）的員工旁邊顯示一個(gè)徽章:

為了解決這個(gè)特殊的需求，需要?jiǎng)?chuàng)建一個(gè)額外的CSS樣式，設(shè)置“visibility = hidden”參數(shù)…

.hidden-element {
visibility: hidden;
}

...并使用dx-class將這種樣式應(yīng)用于與OnLeave屬性相關(guān)的“false”值。

<div class="vacation-label" dx-class="{OnLeave: , hidden-element}">Vacation</div>

這個(gè)特殊的例子揭示了關(guān)于dx-class屬性的兩個(gè)重要事實(shí)：

• 您可以(也應(yīng)該)同時(shí)使用類和dx-class屬性，standard屬性允許您設(shè)置對所有數(shù)據(jù)記錄無條件應(yīng)用的樣式，而附加的CSS樣式則對符合給定條件的記錄應(yīng)用附加的自定義。
• 如果不需要額外的自定義，可以省略"true"或"false"值的樣式。為此，不要在逗號(hào)分隔符之前或之后指定樣式名：dx-class="{OnLeave: true-only}或dx-class="{OnLeave:， false-only}。

枚舉屬性的樣式選擇

要根據(jù)枚舉類型屬性切換CSS樣式，請?jiān)赿x-class…中指定適當(dāng)屬性的名稱。

<div class="defaultItemStyle" dx-class="{TaskSeverity}">
<!--...-->
</div>

...并創(chuàng)建與枚舉值匹配的樣式，在上面的例子中，負(fù)責(zé)選擇正確的CSS樣式的屬性是“TaskSeverity”枚舉，它包括以下值:“Minor”，“Moderate”，“Critical”，這意味著你需要?jiǎng)?chuàng)建三種CSS樣式(或者更少，如果你不需要特定值的額外樣式)：

.Minor { ... }
.Moderate { ... }
.Critical { ... }

下圖演示了如何在下一個(gè)WinForms項(xiàng)目中利用這種特殊技術(shù)：側(cè)邊條紋根據(jù)任務(wù)嚴(yán)重程度改變顏色。

如果您想使用自定義樣式名，在dx-class屬性中顯式指定它們：

<div class="defaultItemStyle" dx-class="{TaskSeverity: style-A, style-B, style-C}">
<!--...-->
</div>

注意，此語法依賴于枚舉值聲明的順序。因此如果我們的示例“TaskSeverity”枚舉如下…

public enum VehicleType {
Moderate,
Minor,
Critical
}

...模板將以相同的順序應(yīng)用樣式：“style-A”匹配“Moderate”值，“style-B”匹配“Minor”值，“style-C”匹配“Critical”值。

字符串屬性的樣式選擇

字符串屬性的dx-class語法類似于枚舉值：指定目標(biāo)屬性的名稱，并創(chuàng)建與該屬性的可用值匹配的樣式。

<div class="defaultItemStyle" dx-class="{FirstName}">
<!--...-->
</div>

.Christel { ... }
.Lorenza { ... }
.Erin { ... }

基于字符串的選擇器涵蓋了所有不能使用基于布爾或基于枚舉的選擇器解決的情況。例如，下圖演示了一個(gè)基于模板的學(xué)生考試結(jié)果列表。

public class TestResults {
public string StudentName { get; set; }
public int Score { get; set; }
}

要應(yīng)用不同的背景顏色，您可以在數(shù)據(jù)記錄類中聲明一個(gè)新的String屬性，并使用該屬性作為CSS樣式選擇器。

Code behind (C#)

public class TestResults {
public string StudentName { get; set; }
public int Score { get; set; }
public string ScoreRange { get {
if (Score < 40) return "Rank-Low";
if (Score >= 40 && Score < 60) return "Rank-Medium";
return "Rank-High"; }
}
}

HTML

<div class="horz-container" dx-class="{ScoreRange}">
<div class="name">${StudentName}</div>
<div class="name">$Score: {Score}</div>
</div>

CSS

.Rank-Low { background-color: @Critical/0.5 }
.Rank-Medium { background-color: @WarningFill/0.5 }
.Rank-High { background-color: @Success/0.5; }

鏈接樣式

class和dx-class屬性是相互補(bǔ)充的：第一個(gè)屬性設(shè)置全局樣式，第二個(gè)屬性允許指定樣式選擇邏輯。注意，條件CSS樣式不會(huì)取消全局樣式——兩者同時(shí)是激活的，全局樣式應(yīng)用默認(rèn)設(shè)置，而條件樣式作為第二層應(yīng)用到這個(gè)“預(yù)樣式”元素。

您還可以在dx-class屬性本身中為相同的值建立多個(gè)樣式的鏈接，為此使用空格作為分隔符輸入樣式名，下一個(gè)逗號(hào)字符之前的所有樣式將同時(shí)應(yīng)用。

前話

Hello，小伙伴們大家新年好，本篇是今年第一篇，也籌劃許久，本篇主題為美食，系html5網(wǎng)站模板，div加css布局，網(wǎng)頁資源分開存儲(chǔ)以便管理，網(wǎng)頁結(jié)構(gòu)清晰簡單，希望本篇能夠助力各位萌新

主題

《周末の食記》

美食能撫平一切的憂傷

簡介

文件結(jié)構(gòu)包含了css、fonts、images、js和html，運(yùn)用html5技術(shù)，包括nav標(biāo)簽、header標(biāo)簽和footer標(biāo)簽等，采用bootstrap進(jìn)行布局

圖摘

目錄

編碼

<div class="ftco-46-row d-flex flex-column flex-lg-row">
    <div class="ftco-46-text ftco-46-arrow-right">
        <h4 class="ftco-46-subheading">Food</h4>
        <h3 class="ftco-46-heading">揚(yáng)州炒飯</h3>
        <p class="mb-5">一碗不一樣的炒飯，讓你難以拒絕.</p>
        <p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
        </div>
        <div class="ftco-46-image" style="background-image: url(images/img_3.jpg);"></div>
        <div class="ftco-46-text ftco-46-arrow-up">
        <h4 class="ftco-46-subheading">Food</h4>
        <h3 class="ftco-46-heading">藍(lán)莓酸奶冰激凌</h3>
        <p class="mb-5">觸動(dòng)您的心靈，令人甜蜜至極，難以忘懷，心曠神怡的味覺享受，精選一級(jí)的夏威夷果仁，入口絲滑</p>
        <p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
    </div>
</div>

結(jié)語

如果人的一生總的能量是固定的話，那就節(jié)省開支，延長時(shí)間，喜怒哀樂不溢于言表，不困于心智，保持樂觀心態(tài)

tml、css3、javascript 網(wǎng)頁模板源代碼。

世界巖溶迷宮——狼巷迷谷。