如何在Qlik Sense中使用CSS？

---

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

點擊下載Qlik

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

qv對象規則

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

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

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

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

如果不這樣做，則樣式可能會影響頁面中的其他內容。 有時這就是您想要的，但是對于常規擴展，您不應該這樣做。 您可能會破壞頁面中的其他內容，并創建難以發現的錯誤。

擴展HTML結構

您的擴展程序呈現的結構如下所示（這是一個簡化的結構）：

<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規則將影響擴展在其中呈現的整個框，包括標題
• a.qv-object-xxxx .qv-object-content規則只會影響擴展名，而不會影響標題等
• a.qv-object-xxxx .qv-object-title將影響標題，可能還會影響字幕
• 懸停按鈕在qv-object-xxxx元素之外，無法根據qv-object-xxxx類設置樣式

請注意，這種結構尚未公開。 到目前為止，它已經相當穩定，但是將來可能會改變。內置和擴展使用相同的結構，如果您要構建混搭，可能比較適合。

加載CSS

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

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

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

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

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

---

推薦閱讀：

Qlik產品更新連載>>

Qlik使用教程連載>>

除了以上教程資源，我們還有以Qlik為核心的各類解決方案，可幫助結局設備故障、產品質量、營銷管理等各方面的企業問題，點擊咨詢獲取案例。