Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
Francis_Kabinoff
Former Employee
Former 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
phaneendra_kunc
Partner - Specialist III
Partner - Specialist III

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

0 Likes
469 Views
Francis_Kabinoff
Former Employee
Former 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
469 Views
phaneendra_kunc
Partner - Specialist III
Partner - Specialist III

Ok Thanks.

0 Likes
469 Views
Stefan_Walther
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.

469 Views
_armoco_
Partner - Creator II
Partner - Creator II

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

0 Likes
469 Views
Yianni_Ververis
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
469 Views