如何在Qlik Sense中使用CSS？

---

無(wú)論您是在Qlik Sense中構(gòu)建擴(kuò)展，還是在mashup中包含Qlik Sense對(duì)象，您都很有可能需要一些CSS。 甚至有些事情您只能使用CSS來(lái)完成。并且由于Qlik發(fā)布了主題支持，因此還可以將您自己的樣式表添加到Qlik Sense客戶端，并且可以不進(jìn)行更改。

點(diǎn)擊下載Qlik

但是樣式表與javascript不同，它們具有帶有方法，參數(shù)和返回值的已定義API。CSS具有自己的邏輯，帶有CSS選擇器，特異性和相互依賴性。 發(fā)生問(wèn)題時(shí)，您不會(huì)收到錯(cuò)誤消息，但看起來(lái)是出現(xiàn)問(wèn)題了的，你無(wú)法停止工作，因?yàn)樗鼈儧](méi)有記錄。

qv對(duì)象規(guī)則

構(gòu)建擴(kuò)展時(shí)，可以包含CSS規(guī)則。為了使您可以添加僅影響擴(kuò)展名的規(guī)則，Qlik Sense會(huì)在呈現(xiàn)擴(kuò)展名的HTML元素中添加格式為“ qv-object- [extension]”的CSS類。因此，如果擴(kuò)展名qext filename為 xxxx.qext，它將添加CSS類'qv-object-xxxx'。 這個(gè)想法是，您應(yīng)該為所有CSS規(guī)則加上qv-object-xxx前綴，如下所示：

.qv-object-xxx .qv-object-content {
  overflow: auto;
}

.qv-object-xxxx ul {
  list-style: none;
}

.qv-object-xxxx .important {
  color: red;
}

如果不這樣做，則樣式可能會(huì)影響頁(yè)面中的其他內(nèi)容。 有時(shí)這就是您想要的，但是對(duì)于常規(guī)擴(kuò)展，您不應(yīng)該這樣做。 您可能會(huì)破壞頁(yè)面中的其他內(nèi)容，并創(chuàng)建難以發(fā)現(xiàn)的錯(cuò)誤。

擴(kuò)展HTML結(jié)構(gòu)

您的擴(kuò)展程序呈現(xiàn)的結(jié)構(gòu)如下所示（這是一個(gè)簡(jiǎn)化的結(jié)構(gòu)）：

<article class="qv-object qv-object-xxx">
  <div class="qv-inner-object">
    <header class="qv-object-header">
      <h1 class="qv-object-title">
        <h2 class="qv-object-subtitle"></h2>
      </h1>
    </header>
  </div>
  <div class="qv-object-content-container">
    <div class="qv-object-content">
      Your extension renders here
    </div>
  </div>
</article>

這意味著：

• a.qv-object-xxxx規(guī)則將影響擴(kuò)展在其中呈現(xiàn)的整個(gè)框，包括標(biāo)題
• a.qv-object-xxxx .qv-object-content規(guī)則只會(huì)影響擴(kuò)展名，而不會(huì)影響標(biāo)題等
• a.qv-object-xxxx .qv-object-title將影響標(biāo)題，可能還會(huì)影響字幕
• 懸停按鈕在qv-object-xxxx元素之外，無(wú)法根據(jù)qv-object-xxxx類設(shè)置樣式

 請(qǐng)注意，這種結(jié)構(gòu)尚未公開(kāi)。 到目前為止，它已經(jīng)相當(dāng)穩(wěn)定，但是將來(lái)可能會(huì)改變。內(nèi)置和擴(kuò)展使用相同的結(jié)構(gòu)，如果您要構(gòu)建混搭，可能比較適合。

加載CSS

為了使CSS規(guī)則起作用，您需要將它們加載到瀏覽器中。即使您的擴(kuò)展程序在同一頁(yè)面/頁(yè)面中多次使用，它們也應(yīng)該加載一次。最好的方法是在代碼的開(kāi)頭，在define調(diào)用的回調(diào)函數(shù)的開(kāi)頭。有兩種加載CSS的方式。首先，您可以將指向CSS文件的鏈接添加到HTML頁(yè)面。一種簡(jiǎn)單的方法是使用requirejs CSS插件，如下所示：

define( [ "css!./style.css"], function () {
/* requirejs will add a link to the document, nothing more is needed */

您也可以自己執(zhí)行此操作，但是您需要小心并處理所有情況，例如虛擬代理以及擴(kuò)展程序在Qlik Sense不能提供的混搭中使用時(shí)。

另一種可能性是將樣式表的內(nèi)容添加到文檔標(biāo)題中的樣式元素。 這需要更多代碼：

define( ['jquery', 'text!./style.css'], function ($, cssContent ) {
    $( '

---

推薦閱讀：

Qlik產(chǎn)品更新連載>>

Qlik使用教程連載>>

除了以上教程資源，我們還有以Qlik為核心的各類解決方案，可幫助結(jié)局設(shè)備故障、產(chǎn)品質(zhì)量、營(yíng)銷管理等各方面的企業(yè)問(wèn)題，點(diǎn)擊咨詢獲取案例。