如何在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为核心的各类解决方案，可帮助结局设备故障、产品质量、营销管理等各方面的企业问题，点击咨询获取案例。