如何在Qlik Sense中使用CSS？

---

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

點(diǎn)擊下載Qlik

但是樣式表與javascript不同，它們具有帶有方法，參數(shù)和返回值的已定義API。CSS具有自己的邏輯，帶有CSS選擇器，特異性和相互依賴性。 發(fā)生問題時，您不會收到錯誤消息，但看起來是出現(xiàn)問題了的，你無法停止工作，因為它們沒有記錄。

qv對象規(guī)則

構(gòu)建擴(kuò)展時，可以包含CSS規(guī)則。為了使您可以添加僅影響擴(kuò)展名的規(guī)則，Qlik Sense會在呈現(xiàn)擴(kuò)展名的HTML元素中添加格式為“ qv-object- [extension]”的CSS類。因此，如果擴(kuò)展名qext filename為 xxxx.qext，它將添加CSS類'qv-object-xxxx'。 這個想法是，您應(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;
}

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

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

您的擴(kuò)展程序呈現(xiàn)的結(jié)構(gòu)如下所示（這是一個簡化的結(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)的整個框，包括標(biāo)題
• a.qv-object-xxxx .qv-object-content規(guī)則只會影響擴(kuò)展名，而不會影響標(biāo)題等
• a.qv-object-xxxx .qv-object-title將影響標(biāo)題，可能還會影響字幕
• 懸停按鈕在qv-object-xxxx元素之外，無法根據(jù)qv-object-xxxx類設(shè)置樣式

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

加載CSS

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

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

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

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

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

---

推薦閱讀：

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

Qlik使用教程連載>>

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