Ubuntu User Interface Toolkit

General Topics
  • Layouts describes a flexible layouting engine to ease the development of responsive user interfaces.
  • Resolution Independence describes the facilities that should be used when setting the size of UI elements (widgets, fonts, etc.) in order for them to behave well on a variety of devices.
  • Automatic State Saving provides automatic property saving for components.
Basic QML Types

Available through:

import Ubuntu.Components 1.1

Button

Standard Ubuntu button.

UbuntuColors

Singleton defining the Ubuntu color palette.

AbstractButton

The AbstractButton class defines the behavior of the button.

ActionItem

A visual representation of an Action. The API of ActionItem is a copy of the API of Action, with additional properties to define visual aspects of the ActionItem.

ActionList

List of Action items

ActivityIndicator

The ActivityIndicator component visually indicates that a task of unknown duration is in progress, e.g. busy indication, connection in progress indication, etc.

CheckBox

CheckBox is a component with two states, checked or unchecked. It can be used to set boolean options. The behavior is the same as Switch, the only difference is the graphical style.

ComboButton

Ubuntu button providing a drop-down panel visualizing custom options.

CrossFadeImage

An Image like component which smoothly fades when its source is updated.

Icon

The Icon component displays an icon from the icon theme.

Label

Text with Ubuntu styling.

MainView

MainView is the root Item that should be used for all applications. It automatically adds a header and toolbar for its contents and can rotate its content based on the device orientation.

OrientationHelper

The OrientationHelper automatically rotates its children following the orientation of the device.

Page

A page is the basic Item that must be used inside the MainView, PageStack and Tabs. Anchors and height of a Page are automatically determined to align with the header of the MainView, but can be overridden.

PageHeadConfiguration

Page.head is used to configure the header for a Page.

PageHeadSections

PageHeadSections is used to configure the sections for a Page.

PageHeadState

PageHeadState is a helper component to make it easier to configure the page header when changing states.

PageStack

A stack of Page items that is used for inter-Page navigation. Pages on the stack can be popped, and new Pages can be pushed. The page on top of the stack is the visible one.

Panel

A panel that can be swiped in and out from an edge of the window by the user. For most applications, it is highly recommended to use the MainView instead which includes a toolbar at its bottom that can be swiped in or out.

ProgressBar10

The ProgressBar component visually indicates the progress of a process of determinate or indeterminate duration.

PullToRefresh

Pull-to-refresh component for Flickables to reload a model upon pull.

Scrollbar

The ScrollBar component provides scrolling functionality for scrollable views (i.e. Flickable, ListView).

Slider

Slider is a component to select a value from a continuous range of values.

Switch

Switch is a component with two states, checked or unchecked. It can be used to set boolean options. The behavior is the same as CheckBox, the only difference is the graphical style.

Tab

Component to represent a single tab in a Tabs environment.

TabBar

Tab bar that will be shown in the header when Tabs is active. This component does not need to be instantiated by the developer, it is automatically created by the Tabs.

Tabs

The Tabs class provides an environment where multible Tab children can be added, and the user is presented with a tab bar with tab buttons to select different tab pages.

TextArea

The TextArea item displays a block of editable, scrollable, formatted text.

TextField

The TextField element displays a single line of editable plain text. Input constraints can be set through validator or inputMask. Setting echoMode to an appropriate value enables TextField to be used as password input field.

ToolbarButton

An ActionItem that represents a button in the toolbar. ToolbarButtons should be included in ToolbarItems to define the tools of a Page. The behavior and look of the toolbar button can be specified by setting an Action for the button, or by setting the other properties inherited by the ActionItem.

ToolbarItems

Row of Items to be placed in a toolbar.

UbuntuListView

A ListView with special features tailored for a look and feel fitting the Ubuntu Touch platform. The UbuntuListView works just like a regular ListView, but it adds special features such as expanding/collapsing items (when used together with the Expandable item). It provides features like automatically positioning the expanding item when it expands and collapsing it again when the user taps outside of it.

UbuntuNumberAnimation

UbuntuNumberAnimation is a NumberAnimation that has predefined settings to ensure that Ubuntu applications are consistent in their animations.

i18n

i18n is a context property that provides internationalization support.

InverseMouseArea

The InverseMouseArea captures mouse events happening outside of a given area.

Clipboard

This is a singleton type providing access to the system clipboard.

MimeData

MimeData type provides interface to access and store data to the Clipboard.

UbuntuShape

The UbuntuShape item provides a standard Ubuntu shaped rounded rectangle.

SortFilterModel

SortFilterModel sorts and filters rows from an existing model.

Action

Describe an action that can be re-used and shared between different components.

ActionContext

ActionContext groups actions together and by providing multiple contexts the developer is able to control the visibility of the actions. The ActionManager then exposes the actions from these different contexts.

ActionManager

ActionManager manages actions and action contexts withion an application.

UbuntuApplication

UbuntuApplication is a QML binding for a subset of QCoreApplication.

FontUtils

FontUtils is a context property, which provides utility functions for font manipulations.

Mouse

Attached property filtering mouse events occured inside the owner.

InverseMouse

Attached object filtering mouse events occured outside the owner.

UbuntuAnimation

Singleton defining standard Ubuntu durations and easing for animations that should be used to ensure that Ubuntu applications are consistent in their animations.

UriHandler

Singleton signalling for opened URIs.

List Items

Available through:

import Ubuntu.Components.ListItems 1.0

Base

Parent class of various list item classes that can have an icon and a progression symbol.

Caption

List item that shows a piece of text.

Divider

Divider to break up list items into groups.

Empty

A list item with no contents. The Empty class can be used for generic list items containing other components such as buttons. It is selectable and can take mouse clicks. It will attempt to detect if a thin dividing line at the bottom of the item is suitable, but this behaviour can be overridden (using showDivider). For specific types of list items, see its subclasses.

Expandable

An expandable list item with no contents. The Expandable class can be used for generic list items containing other components such as buttons. It subclasses Empty and thus brings all that functionality, but additionally provides means to expand and collapse the item.

ExpandablesColumn

A column to be used together with the Expandable item. This lays out its content just like a regular Column inside a Flickable but when used together with items of type Expandable it provides additional features like automatically positioning the expanding item when it expands and collapsing it again when the user taps outside of it.

Header

Header for grouping list items together

ItemSelector

ListItem displaying either a single selected value or expanded multiple choice with an optional image and subtext when not expanded, when expanding it opens a listing of all the possible values for selection with an additional option of always being expanded. If multiple choice is selected the list is expanded automatically.

MultiValue

List item displaying multiple values. This component is under heavy development.

SingleControl

A list item containing a single control

SingleValue

A list item displaying a single value

Standard

The standard list item class. It shows a basic list item with a label (text), and optionally an icon, a progression arrow, and it can have an embedded Item (control) that can be used for including Buttons, Switches etc. inside the list item.

Subtitled

List item displaying a second string under the main label. This component is under heavy development.

ThinDivider

Narrow line used as a divider between ListItems.

ValueSelector

List item displaying single selected value when not expanded, where expanding it opens a listing of all the possible values for selection.

Pickers

Available through:

import Ubuntu.Components.Pickers 1.0

DatePicker

DatePicker component provides date and time value picking functionality.

Dialer

Dialer is a phone dialer style picker component.

DialerHand

DialerHand represents a value selector on a Dialer.

Picker

Picker is a slot-machine style value selection component.

PickerDelegate

PickerDelegate component serves as base for Picker delegates.

PickerPanel

Provides a panel for opening a DatePicker in place of the input panel or as Popover, depending on the form factor.

Popovers, Sheets and Dialogs

Available through:

import Ubuntu.Components.Popups 1.0

ActionSelectionPopover

A special popover presenting actions to the user. The popover is closed automatically when the action is chosen.

Dialog

The Dialog caters for cases in which the application requires the user to determine between optional actions. The Dialog will interrupt the user flow and lock the view for further interaction before the user has selected a desired action. It can only be closed by selecting an optional action confirming or cancelling the operation.

Popover

A popover allows an application to present additional content without changing the view. A popover has a fixed width and automatic height, depending on is contents. It can be closed by clicking anywhere outside of the popover area.

PopupBase

The base class for all dialogs, sheets and popovers. Do not use directly.

Layouting

Available through:

import Ubuntu.Layouts 1.0

ConditionalLayout

ConditionalLayout defines the layout of a given form factor.

ItemLayout

ItemLayout defines a new size & position of a single Item, for the purposes of specifying layouts. This is to be used within a ConditionalLayout definition.

Layouts

The Layouts component allows one to specify multiple different layouts for a fixed set of Items, and applies the desired layout to those Items.

Theming Elements

Available through:

import Ubuntu.Components 1.1

StyledItem

The StyledItem class allows items to be styled by the theme.

Theme

The Theme class provides facilities to interact with the current theme.

Style API

The Style API defines the interface components use to style the visuals. Themes must make sure that these interfaces are all implemented. Available through:

import Ubuntu.Components.Styles 1.1

ComboButtonStyle

Style API for ComboButton component.

PageHeadStyle

Style API for page header.

PullToRefreshStyle

Style API for PullToRefresh component.

Resolution Independence Items

Available through:

import Ubuntu.Components 1.1

Units

Units of measurement for sizes, spacing, margin, etc.

Parsing Command-Line Arguments

Available through:

import Ubuntu.Components 1.1

Argument

The Argument class specifies what type a given command line parameter should be.

Arguments

The Arguments class provides a way to declare what command line parameters are expected by the application.

Services

Available through:

import Ubuntu.Components 1.1

Alarm

Alarm component is a representation of an alarm event.

AlarmModel

AlarmModel holds the list of alarms defined.

StateSaver

Attached propertyes to save component property states.

Performance Metrics

Available through:

import Ubuntu.PerformanceMetrics 1.0

PerformanceOverlay

Overlay displaying performance related metrics (rendering time, CPU usage, etc.)

Test extensions

Available through:

import Ubuntu Test 1.0

UbuntuTestCase

The UbuntuTestCase class expands the default TestCase class.

TestExtras

Singleton type providing additional test functions.