控件皮膚定制(自定義)

Dorado允許你對單個頁面的單個控件進行個性化的皮膚調整和定制。 下面以Pane為例說明控件皮膚的調整辦法：

找到修改對應的classname

如下的頁面，我們希望修改Panel的標題 首先我們利用瀏覽器提供的調試工具(Chrome下F12打開元素審查),如下圖: 打開元素審查工具后，單擊下圖紅圈中的定位按鈕： 之后再選擇我們希望修改的Panel的標題： 這時候我們可以看到標題區(qū)背景高亮著色，并且在元素審查工作區(qū)中DOM元素會自動定位到對應的DIV元素上，以及在右下側可以看到對應起作用的CSS的設定： 由于本例我們希望修改標題的字體大小，我們期望將字體調的更大，以滿足部分用戶的需求，通過上面的步驟我們發(fā)現(xiàn)覺得標題字體大小的classname為"caption"。 由于字體的調整在某些情況下我們可能還會引起容器高度的變化，本例我們需要先調整標題欄的高度，則在左下側區(qū)域，我們將當前的DOM節(jié)點切換到<div class="caption">員工基礎信息<div>的父節(jié)點:<div class="i-caption-bar c-caption-bar" id="d__uid_116">節(jié)點上： ![] 此時上圖中瀏覽器中標題欄的背景色高亮顯示，并且，右側css編輯器也自適應的顯示對應的css.通過觀察css我們發(fā)現(xiàn)決定標題欄高度的classname為"i-caption-bar"，默認高度為24px。 這樣我們如愿的找到與標題相關的兩個className，我們先利用審查工具做如下的模擬測試：

第一步：修改i-caption-bar的css設定

我們嘗試著將它調整為140px，如下圖： 這時候在頁面上我們看到標題欄的高度被拉高了。

第二步：修改caption的css設定

然后我們再選擇希望設置的標題對應的DOM節(jié)點上:<div class="caption">員工基礎信息<div>,如下圖： 觀察其css設定，可以知道標題信息決定其高度和字體大小設定的classname是"caption",則我們修改其line-height與height與font-size的設定如下圖： 修改好之后，馬上在網(wǎng)頁中就能看到字體變大的效果。 當然在css編輯器中，我們也可以根據(jù)需要添加新的css風格，如我們希望修改字體的顏色，則可以在font-size的最后，單擊： 單擊后，可以在對應的calssname下方增加一行，在內部填寫對應的css設置，如本例設置color為blue，效果如下圖： ?

修改控件的css設定

通過以上的步驟我們已經(jīng)知道，如果我們希望修改標題欄字體的大小，關聯(lián)的classname有："i-caption-bar"和"caption",并且也做了模擬測試，我們已經(jīng)知道了如何根據(jù)我們的需要調整字體的大小。下面你要根據(jù)自己的實際需求選用下面的一種方式真正解決實際問題。 特別注意事項

在進行下一步操作之前，請確保理解下面的內容：dorado的classname設計中，包含兩種風格的classname命名約定"i-xxx-xxx"和"d-xxx-xxx",按照默認約定dorado不推薦你修改"i-xxx-xxx"類型的classname，如果有必要修改，則建議調整為對應的"d-xxx-xxx"，在其內部添加對應的css設定。 ?

當前頁面CSS修改

并在本View同一路徑下添加同名文件，擴展名為.css，例如： 照抄全局css中的i-caption-bar和i-caption-bar .caption的配置，如: .d-caption-bar { ????``height``: ``140px``; } ? .d-caption-bar .``caption``{ ????``font-size``: ``12px``; } 并修改其中的屬性配置，如本例我們可以修改為： .d-caption-bar { ????``overflow``: ``"hidden"``;?? ????``height``: ``140px``; ????``padding``: ``1px``; } ? .d-caption-bar .``caption``{ ????``padding-left``: ``6px``; ????``line-height``: ``122px``; ????``height``: ``124px``;? ????``font-size``: ``62px``; ????``color``: ``blue``;??? }

全局CSS修改

如果你希望將整個系統(tǒng)所有Panel的標題的字體大小做調整，則你需要修改系統(tǒng)的皮膚文件(參考：定制自己的系統(tǒng)皮膚)，找到對應皮膚文件夾： 找到其中的base-widget.css和base-widget.min.css文件，并修改文件中的"d-caption-bar"

注意用的是"d"打頭的"d-caption-bar"，為什么沒有去修改"i-caption-bar"請參考上面的"特別說明" .d-caption-bar{ ????``height``: ``140px``; ????``background``: ``#F8F8F8 url``(base/caption-bar-bg.gif) ``bottom repeat-x``; } 并且添加.d-caption-bar .caption配置 .d-caption-bar .``caption``{ ????``line-height``: ``122px``; ????``height``: ``124px``; ????``font-size``: ``62px``; ????``color``: ``blue``; } ?

exClassName

在部分情況下我們只想單獨改變某一個控件的部分css特性，它繼承和保留默認的一些特性，則可以通過控件的exClassName解決這個問題。例如本例我們設置Panel控件的exClassName屬性為： 添加好之后我們刷新頁面，注意觀察d-h-caption-bar在DOM結構樹中所處的位置： 根據(jù)以上位置結合css技術，可以很快的寫出如下的代碼： .d-h-caption-bar .d-caption-bar{ ????``height``: ``140px``; } ? .d-h-caption-bar .``caption``{ ????``line-height``: ``122px``; ????``height``: ``124px``; ????``font-size``: ``62px``; ????``color``: ``blue``; } 之后我們在相關的css文件中添加上面的代碼就可以?？丶つw定制(自定義)控件皮膚定制(自定義)