iT邦幫忙

2021 iThome 鐵人賽

DAY 30
0
Modern Web

ZK 30天速成系列 第 30

客製化元件外觀

ZK 元件的配色與設計都有經過設計師制定,但我想你仍有你自己特定的需要,當有需要改變元件外觀時,有幾種做法:

Style

每個元件都支援這個屬性,直接把 CSS rule 寫上來覆蓋預設屬性,用來客制某個特定元件。

<button style="font-size: 20px" label="大字體"/>

Sclass

每個元件都支援這個屬性,可讓你外加 css class 到元件上。例如我可以引入 bootstrap css 並套用它提供的 button css,就可以產生同樣的效果:

https://ithelp.ithome.com.tw/upload/images/20211015/20050621zJ4MqruFaE.jpg

這主要是用來套用既有設計的 CSS class,並小幅修改元件既有外觀:

<button sclass="btn-primary" label="primary"/>
<button sclass="btn-success" label="success"/>
<button sclass="btn-warning" label="warning"/>

Zclass

這個屬性除了讓你加上你額外的 CSS class 外,同時把元件內建的 class 移除,等於是完全套用你自訂的外觀,如果你想要完全自訂外觀不想被元件內建樣式影響,就要使用這個屬性。

https://ithelp.ithome.com.tw/upload/images/20211015/20050621ikYqtdi6uu.jpg

<button zclass="btn btn-outline-danger btn-block" label="danger"/>

如果你打開 developer tool 觀察,比較兩個有畫線的 class 內容

https://ithelp.ithome.com.tw/upload/images/20211015/20050621AZKNeaCjq8.jpg

你就會發現最下面那個按鈕的 class 中,z-button 已被移除。

但對於結構比較複雜的元件,你需要提供多個相關 CSS class,因為元件每個部位都有獨立的 css class 來決定外觀。例如一個 <window> 預設的 DOM 結構如下:

<div id="a4DT6" class="z-window z-window-embedded">
    <div id="a4DT6-cap" class="z-window-header">my window
        <div id="a4DT6-icons" class="z-window-icons"></div>
    </div>
    <div id="a4DT6-cave" class="z-window-content"></div>
</div>

你可以注意到這個元件由數個 <div> 組成,每個都有其 css class,都以 z-window 為前綴。

如果我指定 zclassdialog

<window title="my custom window" zclass="dialog" border="normal">
</window>

dialog 就變成元件 css 的前綴取代內建的 z-window,而產生的 DOM 就變成:

<div id="a4DT7" class="dialog dialog-embedded">
    <div id="a4DT7-cap" class="dialog-header">my custom window
        <div id="a4DT7-icons" class="dialog-icons"></div>
    </div>
    <div id="a4DT7-cave" class="dialog-content"></div>
</div>

因此你會需要提供 dialog, dialog-embedded, dialog-header, dialog-icons, dialog-content這些 class。

覆寫所有元件

如果要一次調整所有同類型的元件,則可以覆寫元件內建 CSS class。

例如我想要把 <groupbox> 內的所有 <checkbox> 文字都調大、變色:

https://ithelp.ithome.com.tw/upload/images/20211015/20050621BMCTU9vtaq.jpg

內建元件的 css 可從 developer tool > Elements 頁,並檢視 DOM element 來得知:

https://ithelp.ithome.com.tw/upload/images/20211015/20050621nEv4MC3oSs.jpg

在了解其結構後,就可以覆寫內建 class:

<style>
    .z-groupbox .z-checkbox-content{
        font-size: 30px;
        color: skyblue;
    }
</style>
<groupbox title="絕地武士">
    <checkbox label="天行者路克"/>
    <checkbox label="歐比王"/>
    <checkbox label="尤達"/>
</groupbox>

完整說明請看 ZK Style Customization Guide

客製化整套佈景主題

ZK 元件並不是個別設計外觀,而是整體符合一套佈景主題(theme)來設計,有一致的顏色、字型、留白等。如果你要改變整體設計,一個一個覆寫未免也太麻煩,因此 ZK 提供一個範本專案,讓你基於預設佈景主題來建構一個客製化佈景主題。你會需要先學 LESS 語法。

這個範本專案在 Github 公開儲存庫 zkThemeTemplate

用法簡述

  1. fork 該儲存庫
  2. 執行初始化指令(請看 readme.md)
    需要為 theme取名,如 jedi
  3. 新建一個檔名以“_”開頭的 less 檔
    _custom.less
  4. 在該新檔中覆寫預設的變數或 css rule
  5. 將新檔匯入 _header.less
    順序要在最後才能覆寫前面的預設內容
  6. 建構 jar 檔
    mvn clean package
    會將 less 編譯成 *.css.dsp 並包裝成一個 jar,如 jedi.jar
  7. 將產生的 jar 放入你程式的 classpath 中
  8. zk.xml 中指定使用該 theme

建議用新檔放客製化內容而不是直接修改 ZK 內建 less 的原因是:易於升級維護。用 git 的好處就是可以透過 git 比較檔案的差異與合併,如果你直接改在內建 less,未來若是 zkThemeTemplate 修 bug或升級,你就可以輕易合併修改的內容到你的 forked repository而不會產生編輯衝突。

preview程式

zkThemeTemplate 內含一個小網頁程式,讓你便於預覽你客製化的成果,而不須每次都安裝到你目標專案上。它也會自動偵測 less 變更並重載,因此你可以邊改邊看。

詳細的細節與指令就都請看 zkThemeTemplate/readme.md

未來學習方向

有些主題受限於時間、篇幅無法放在這30 篇中,但我想也是多數人會有興趣,我就列在下面,讀者可自行取用,未來若是有機會再寫:

後記

30天每天發一篇還真不是件容易的事,幾乎用去我所有空閒時間,但能為自己的職業生涯留下一個小小的里程碑,甚感欣喜。感謝上帝保守這過程,感謝妻子的支持、鼓勵、提醒,感謝同事們提供的範例與主管的支持,也謝謝各位所有看到最後的讀者們。


上一篇
響應式設計
系列文
ZK 30天速成30

尚未有邦友留言

立即登入留言