widget-tutorial
Version:
A comprehensive tutorial + recipes to get started with widgets in Qlik Sense.
43 lines • 863 B
HTML
<style>.wiSimpleTile {
width: 100%;
text-align: center;
}
.header {
text-transform: uppercase;
}
.measure {
font-size: 3em;
font-weight: bold;
margin-bottom: 5px;
}
.bar {
background-color: #ccc;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
font-size: 1.2em;
border: 1px solid #999;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.bar-green {
background-color: #ACCF39;
border: 1px solid #8BAA27;
}
.bar-orange {
background-color: #FE9840;
border: 1px solid #D07426;
}
.bar-red {
background-color: #990000;
border: 1px solid #999;
color: #fff;
}
</style>
<div><div class="wiSimpleTile">
<div class="header">{{settings.kpiTitle}}</div>
<div class="measure">{{settings.kpi}}</div>
<div class="bar bar-{{settings.color}}">{{settings.comparisonKPI}}</div>
</div>
</div>