Qlik Community

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Employee
Employee

What is Leonardo UI?

Leonardo UI was introduced with Qlik Sense 3.0.  Here's a description from the documentation‌ -

Leonardo UI is a UI component framework, designed to be used as a complement to other frameworks. It is non-obtrusive in the sense that it contains no global styling but will use your page defaults. You can also use it standalone with a CSS reset to get consistent styling of your components.


How can I use Leonardo UI?

Leonardo UI is available to use in Qlik Sense mashups, extensions, and widgets as of Qlik Sense 3.0, and you do not have to do anything extra to begin using it in those contexts.

The documentation for it is here - Leonardo UI‌, and I've added to that by providing examples of the currently available components and listing all available icons here - Leonardo UI Examples and Icons

6 Comments
Partner
Partner

So meaning all CSS or styling is already embedded in Sense 3.0 and no need to reference outside libraries?

0 Likes
186 Views
Employee
Employee

Hi Phaneendra,

There's no need to reference any outside libraries to use Leonardo UI, but you can reference outside libraries if you'd like, in addition to using Leonardo UI.

0 Likes
186 Views
Partner
Partner

Ok Thanks.

0 Likes
186 Views
Employee
Employee

Some clarification regarding Leonardo UI:

  • As of Qlik Sense 3.0 Leonardo UI has mainly be developed to be used within the product when developing Qlik Sense.
  • As part of Qlik Sense 3.0 it is also supported to use Leonardo UI in Widgets (therefore the documentation you were mentioning above)

As we have announced at Qonnections 2016 we are planning to open source Leonardo UI in the near future, then with examples, a much more detailed documentation. As soon this happens you can also easily use Leonardo UI outside the Qlik Sense client, so e.g. in Mashups or other custom solutions.

Hope this helps.

186 Views
Partner
Partner

Can someone help me understand how to use Leonardo? Where in the code section should I implement it?

0 Likes
186 Views
Employee
Employee

Hello Arjun, here are some more information

https://qlik-oss.github.io/leonardo-ui/get-started.html

`npm install --save leonardo-ui`

and in your html

`<link rel="stylesheet" href="node_modules/leonardo-ui/dist/leonardo-ui.css" type="text/css"/>`

`<script src="node_modules/leonardo-ui/dist/leonardo-ui.js" type="text/javascript"></script>`

Then you can start adding the individual components like

`<button class="lui-button lui-button--gradient">Toolbar</button>`

Yianni

0 Likes
186 Views