Loading
0

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