无论您是在Qlik Sense中构建扩展，还是在mashup中包含Qlik Sense对象，您都很有可能需要一些CSS。 甚至有些事情您只能使用CSS来完成。本文将会告诉你如何在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为核心的各类解决方案，可帮助结局设备故障、产品质量、营销管理等各方面的企业问题，点击咨询在线客服>>获取案例。
标签：
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！