Skip to main content Skip to complementary content
Qlik Resources

Angular leonardo-ui components

Warning noteThis feature is delivered as EXPERIMENTAL in this release.

This section describes the Angular leonardo-ui components that are delivered with this version of Qlik Sense.

Overview

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.

Most components are exposing a single element directive (like the checkbox which exposes <lui-checkbox ...>) but may also expose services and/or sub-directives like the dialog.

Limitations

These limitations apply both for the example page and inside the client:

  • Variant will not update on most components
  • x-change events fires before x-model has changed its value (this is because of isolate scope)

Dialog component

Use the lui-dialog component to create custom dialogs.

lui-dialog options
Name Type Description Parameters
luiDialog Service

Modal dialog service.
  • template
  • controller
  • variant
  • closeOnEscape
  • input
lui-dialog Element directive

Dialog content.

Use any of the header, body and footer directives as content or none to control the appearance manually.
  • x-variant
lui-dialog-header Element directive

Dialog header.

 -
lui-dialog-body Element directive

Dialog body with default scroll behavior.

 -
lui-dialog-footer Element directive

Dialog footer.

 -
lui-dialog-trigger Attribute directive

Helper directive that shows a dialog when clicking on the element with this directive.

Restores focus to the opening element after the dialog has been closed.
  • template
  • controller
  • variant
  • closeOnEscape

Examples

<div>
	<div>
		<button class="lui-button" lui-dialog-trigger x-template="$ctrl.dialogTemplate">
			Open dialog (trigger)
		</button>
	</div>
	<div>
		<button class="lui-button" lui-dialog-trigger x-template="$ctrl.dialogTemplate" x-variant="inverse">
			Open dialog (trigger, inverse)
		</button>
	</div>
	<div>
		<button class="lui-button" ng-click="$ctrl.openDialog()">Open dialog (service)</button>
	</div>
	<div>
		<button class="lui-button" ng-click="$ctrl.openDialog('inverse')">Open dialog (service, inverse)</button>
	</div>
</div>

Popover component

Use the lui-popover component to create custom popovers.

An image of an interface item called "Open popover (trigger)" activated. As a result of the activation, there is a pop-up box titled "Popover title" with lorum ipsum text as the body text of the pop up.

lui-popover options
Name Type Description Parameters
luiPopover.show Service

Popover service - show function.
  • template
  • controller
  • input
  • alignTo
  • dock
  • variant
  • closeOnEscape
luiPopover.showToPosition Service

Popover service - showToPosition function.
  • template
  • controller
  • input
  • x
  • y
  • dock
  • variant
  • closeOnEscape
luiPopover.showCustom Service

Popover service - showCustom function.
  • template
  • controller
  • input
  • position (function)
  • variant
  • closeOnEscape
lui-popover Element directive

Popover content.

Use any of the header, body and footer directives as content or none to control the appearance manually.
  • x-variant
lui-popover-header Element directive

Popover header.

 -
lui-popover-body Element directive

Popover body with default scroll behavior.

 -
lui-popover-footer Element directive Popover footer. -
lui-popover-trigger Attribute directive

Helper directive that shows a popover when clicking on the element with this directive.

Restores focus to the opening element after the popover has been closed.
  • template
  • controller
  • variant
  • dock
  • closeOnEscape

Examples

<div>
	<div>
		<button class="lui-button" lui-popover-trigger x-dock="right" x-template="$ctrl.popoverTemplate">Open popover (trigger)</button>
	</div>
	<div>
		<button class="lui-button" lui-popover-trigger x-dock="right" x-template="$ctrl.popoverTemplate" x-variant="inverse">Open popover (trigger, inverse)</button>
	</div>
	<div>
		<button class="lui-button" ng-click="$ctrl.openPopover($event)">Open popover (service)</button>
	</div>
	<div>
		<button class="lui-button" ng-click="$ctrl.openPopover($event, 'inverse')">Open popover (service, inverse)</button>
	</div>
	<div>
		<button class="lui-button" ng-click="$ctrl.openToPosition($event)">Open popover (service, position to coordinate)</button>
	</div>
	<div>
		<button class="lui-button" ng-click="$ctrl.openCustom($event)">Open popover (service, custom positioning)</button>
	</div>
</div>

Tooltip component

Use the lui-tooltip component to create custom tooltips.

Two lines of text, both called "Tooltip title". The first "Tooltip title" has a tooltip popup that says "Some tooltip text".

lui-tooltip options
Name Type Description Parameters
luiTooltip.show Service Tooltip service - show function.
  • template
  • controller
  • input
  • alignTo
  • dock
luiTooltip.showToPosition Service Tooltip service - showToPosition function.
  • template
  • controller
  • input
  • x
  • y
  • dock
luiTooltip.showCustom Service Tooltip service - showCustom function.
  • template
  • controller
  • input
  • position (function)
  • dock
lui-tooltip Element directive Tooltip content.
  • x-variant
lui-tooltip-trigger Attribute directive Helper directive that shows a tooltip when hovering on the element with this directive.
  • template
  • controller
  • dock
lui-title-tooltip Attribute directive Helper directive that shows a tooltip when hovering on the element with this directive, using the value of its title attribute as tooltip content.
  • template
  • controller
  • dock

Examples

<div>
	<div>
		<span title="S" lui-title-tooltip>Tooltip title</span>
	</div>
	<div>
		<span title="Some tooltip text" lui-title-tooltip>Tooltip title</span>
	</div>
	<div>
		<span title="Some tooltip text" lui-title-tooltip>Tooltip title</span>
	</div>
	<div>
		<span title="Some tooltip text" lui-title-tooltip>Tooltip title</span>
	</div>
	<div>
		<span title="Some tooltip text" lui-title-tooltip>Tooltip title</span>
	</div>
	<div>
		<span title="Some <b>tooltip</b> text" lui-title-tooltip>Tooltip title (injection test)</span>
	</div>
	<div>
		<span title="Some tooltip text" lui-title-tooltip x-dock="top">Tooltip title - top</span>
	</div>
	<div>
		<span title="Some tooltip text" lui-title-tooltip x-dock="right">Tooltip title - right</span>
	</div>
	<div>
		<span title="Some tooltip text" lui-title-tooltip x-dock="bottom">Tooltip title - bottom</span>
	</div>
	<div>
		<span title="Some tooltip text" lui-title-tooltip x-dock="left">Tooltip title - left</span>
	</div>
	<div>
		<span lui-tooltip-trigger x-dock="left" x-template="$ctrl.tooltipTemplate">Tooltip (trigger)</span>
	</div>
	<div>
		<span ng-mouseenter="$ctrl.openTooltip($event)" ng-mouseleave="$ctrl.closeTooltip()">Tooltip (service)</span>
	</div>
	<div>
		<span ng-mouseenter="$ctrl.openToPosition($event)" ng-mouseleave="$ctrl.closeTooltip()">Tooltip (service, position to coordinate)</span>
	</div>
	<div>
		<span ng-mouseenter="$ctrl.openCustom($event)" ng-mouseleave="$ctrl.closeTooltip()">Tooltip (service, custom positioning)</span>
	</div>
</div>

Tab-view component

Use the lui-tab-view component to create custom tabs or tab-sets.

Three tabs called "Tab1", "Tab2", and "Tab3". "Tab1" is selected, and the text "Tab1 content" is below the three tabs.

lui-tab-view options
Name Type Description Parameters
lui-tab-view Element directive Root directive for lui-tabset and lui-tab-content directives. -
lui-tabset Element directive

Container directive for tabs.

Requires lui-tab-view as parent directive.
  • fill
  • active-tab
lui-tab Element directive

A single tab element.

Requires lui-tabset as parent directive.

Setting the attribute ref will automatically toggle any lui-tab-content element with an equal ref attribute upon activation.
  • variant
  • disabled
  • ref
  • on-tab-selected
  • on-tab-deselected
  • on-tab-added
  • on-tab-removed
lui-tab-content Element directive

Content of a tab.

Requires lui-tab-view as parent directive.

Set attribute ref for automatic toggling of content when a tab with same ref attribute is activated.
  • ref
lui-tab-aside Element directive

Tab aside element.

A click-able element for adding additional custom functionality to each tab.
  • icon
  • on-activated

Examples

Basic tab-view

<lui-tab-view>
	<lui-tabset>
		<lui-tab ref="tab1">Tab1</lui-tab>
		<lui-tab ref="tab2">Tab2</lui-tab>
		<lui-tab ref="tab3" disabled="true">Tab3</lui-tab>
	</lui-tabset>
	<lui-tab-content ref="tab1">Tab1 content</lui-tab-content>
	<lui-tab-content ref="tab2">Tab2 content</lui-tab-content>
	<lui-tab-content ref="tab3">Tab3 content</lui-tab-content>
</lui-tab-view>

Inverse tab-view

<lui-tab-view>
	<lui-tabset>
		<lui-tab variant="inverse" ref="tab1">Tab1</lui-tab>
		<lui-tab variant="inverse" ref="tab2">Tab2</lui-tab>
		<lui-tab variant="inverse" ref="tab3" disabled="true">Tab3</lui-tab>
	</lui-tabset>
	<lui-tab-content ref="tab1">Tab1 content</lui-tab-content>
	<lui-tab-content ref="tab2">Tab2 content</lui-tab-content>
	<lui-tab-content ref="tab3">Tab3 content</lui-tab-content>
</lui-tab-view>

Filled tab-view

<lui-tab-view>
	<lui-tabset fill="true">
		<lui-tab ref="tab1">Tab1</lui-tab>
		<lui-tab ref="tab2">Tab2</lui-tab>
		<lui-tab ref="tab3" disabled="true">Tab3</lui-tab>
	</lui-tabset>
	<lui-tab-content ref="tab1">Tab1 content</lui-tab-content>
	<lui-tab-content ref="tab2">Tab2 content</lui-tab-content>
	<lui-tab-content ref="tab3">Tab3 content</lui-tab-content>
</lui-tab-view>

Inverse filled tab-view

<lui-tab-view>
	<lui-tabset fill="true">
		<lui-tab variant="inverse" ref="tab1">Tab1</lui-tab>
		<lui-tab variant="inverse" ref="tab2">Tab2</lui-tab>
		<lui-tab variant="inverse" ref="tab3" disabled="true">Tab3</lui-tab>
	</lui-tabset>
	<lui-tab-content ref="tab1">Tab1 content</lui-tab-content>
	<lui-tab-content ref="tab2">Tab2 content</lui-tab-content>
	<lui-tab-content ref="tab3">Tab3 content</lui-tab-content>
</lui-tab-view>

Dynamic tab-view

tabviews.js

/**
 * Leonardo UI examples. This is how the client uses the leonardo UI library and contains all config and overrides
 * provided by the client. Note that maintenance on this module might be lagging behind.
 */
import angular from "angular";

import template from "./tabviews.ng.html";

const module = angular.module( "docs.tabview-examples", [] );

module.component( "tabviewExamples", {
	template: template,
	controller: ["$scope", function ( $scope ) {

		$scope.tabview = {
			tabs: [{name: "Add Tabs", content: "Add more tabs", disabled: false, aside: false},
				{name: "Tab1", content: "Tab 1 content", disabled: false, aside: true},
				{name: "Tab2", content: "Tab 2 content", disabled: false, aside: true},
				{name: "Tab3", content: "Tab 3 content", disabled: false, aside: true}
			],
			activeTab: "Add Tabs"
		};

		$scope.asideActivated = function ( index ) {
			$scope.tabview.tabs.splice( index, 1 );
		};

		$scope.addTab = function ( index ) {
			$scope.tabview.tabs.push( {
				name: "Tab" + index,
				content: "Tab " + index + " content",
				disabled: false,
				aside: true
			} );
		};
	}],
	bindings: {
		variant: "="
	}
} );

tabviews.ng.html

<div>
	<!-- Example 1, Dynamic tabs -->
	<lui-tab-view>
		<lui-tabset active-tab="tabview.activeTab">
			<lui-tab ng-repeat="tab in tabview.tabs" x-ref="{{tab.name}}" x-disabled="tab.disabled">
				<span class="lui-tab__text">{{tab.name}}</span>
				<lui-tab-aside ng-if="tab.aside" x-icon="close" on-activated="asideActivated($index)"></lui-tab-aside>
			</lui-tab>
		</lui-tabset>
		<lui-tab-content style="margin-top: 20px;margin-bottom:10px;" ng-repeat="tab in tabview.tabs" x-ref="{{tab.name}}">{{tab.content}}</lui-tab-content>
		<lui-tab-content x-ref="Add Tabs" ng-init="tabIndex = 4"><lui-button x-variant="success" ng-click="addTab(tabIndex); tabIndex = tabIndex +1">Add a tab</lui-button></lui-tab-content>
	</lui-tab-view>
</div>

Button component

Use the lui-button component to create custom buttons.

Several button called "Default", "Toolbar", "Info", "Danger", "Warning", and "Success"

lui-button options
Name Type Description Parameters
lui-button Element directive Button content.
  • x-variant
  • active
  • full-width

Examples

Standard buttons

<lui-button>Default</lui-button>
<lui-button x-variant="toolbar">Toolbar</lui-button>
<lui-button x-variant="info">Info</lui-button>
<lui-button x-variant="danger">Danger</lui-button>
<lui-button x-variant="warning">Warning</lui-button>
<lui-button x-variant="success">Success</lui-button>

Inverse buttons

<lui-button x-variant="inverse">Inverse</lui-button>
<lui-button x-variant="toolbar-inverse">Toolbar inverse</lui-button>
<lui-button x-variant="info">Info</lui-button>
<lui-button x-variant="danger">Danger</lui-button>
<lui-button x-variant="warning">Warning</lui-button>
<lui-button x-variant="success">Success</lui-button>

More buttons

<lui-button active="true">Active</lui-button>
<lui-button full-width="true">Full width</lui-button>

Select component

Use the lui-select component to create custom drop-down lists.

A drop-down list containing "First", "Second", "Third" options.

lui-select options
Name Type Description Parameters
lui-select Element directive Select content.
  • x-model
  • x-variant

Examples

Select

<lui-select x-model="value">
	<option value="1">First</option>
	<option value="2">Second</option>
	<option value="3">Third</option>
</lui-select>

Inverse select

<lui-select x-variant="toolbar" x-model="value">
	<option value="1">First</option>
	<option value="2">Second</option>
	<option value="3">Third</option>
</lui-select>

Select toolbar style

<lui-select x-variant="inverse" x-model="value">
	<option value="1">First</option>
	<option value="2">Second</option>
	<option value="3">Third</option>
</lui-select>

Select inverse toolbar style

<lui-select x-variant="toolbar-inverse" x-model="value">
	<option value="1">First</option>
	<option value="2">Second</option>
	<option value="3">Third</option>
</lui-select>

Search component

Use the lui-search component to add custom search dialogs.

A search box with a magnifying glass on the left, and replaceable text reading "my search string"

lui-search options
Name Type Description Parameters
lui-search Element directive Search content.
  • x-query
  • x-variant

Examples

Basic search

<lui-search x-query="search"></lui-search>

Inverse search

<lui-search x-query="search" x-variant="inverse"></lui-search>

Checkbox component

Use the lui-checkbox component to add custom check-boxes.

Two checkboxes called "Label". The top checkbox is orange and checked, and the bottom checkbox is greyed out and checked. They both have the text "Label"

lui-checkbox options
Name Type Description Parameters
lui-checkbox Element directive Checkbox content.
  • x-model
  • x-variant
  • x-disabled

Examples

Basic check-box

<lui-checkbox x-model="checkbox">Label</lui-checkbox>
<lui-checkbox x-model="checkbox" x-disabled="true" "="">Label</lui-checkbox>

Inverse check-box

<lui-checkbox x-model="checkbox" x-variant="inverse">Label</lui-checkbox>
<lui-checkbox x-model="checkbox" x-variant="inverse" x-disabled="true">Label</lui-checkbox>

Switch component

Use the lui-switch component to add switches.

Two slider switches. One has a white background and the other has a grey background.

lui-switch options
Name Type Description Parameters
lui-switch Element directive Switch content.
  • x-model
  • x-variant
  • x-disabled

Examples

Basic switch

<lui-switch x-model="switch"></lui-switch>
<lui-switch x-model="switch" x-disabled="true"></lui-switch>

Inverse switch

<lui-switch x-variant="inverse" x-model="switch"></lui-switch>
<lui-switch x-variant="inverse" x-model="switch" x-disabled="true"></lui-switch>

Radiobutton component

Use the lui-radiobutton component to add radio-buttons.

Two radio buttons called "A" and "B". "A" is orange and "B" is grey.

lui-radiobutton options
Name Type Description Parameters
lui-radiobutton Element directive Radiobutton content.
  • x-model
  • x-variant
  • x-disabled

Examples

Basic radiobutton

<lui-radiobutton x-model="radio1">A</lui-radiobutton>
<lui-radiobutton x-model="radio1" x-disabled="true">B</lui-radiobutton>

Inverse radiobutton

<lui-radiobutton x-variant="inverse" x-model="radio2">A</lui-radiobutton>
<lui-radiobutton x-variant="inverse" x-model="radio2" x-disabled="true">B</lui-radiobutton>

 

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!

Leave your feedback here