Lomiri User Interface Toolkit
General Topics
- What's new in version 1.2?
- Styling components
- 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 Lomiri.Components 1.3
Defines the behavior of the button | |
Describe an action that can be re-used and shared between different components | |
Show a row of buttons that trigger actions. When the number of visible actions specified is larger than numberOfSlots, an overflow button will be shown which triggers an overflow panel that shows the remaining actions | |
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 | |
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 | |
List of Action items An ActionList provies a way of grouping actions together | |
Manages actions and action contexts withion an application | |
Component visually indicates that a task of unknown duration is in progress, e.g. busy indication, connection in progress indication, etc | |
View with multiple columns of Pages | |
A component to handle bottom edge gesture and content | |
Shows the availability of extra features available from the bottom edge of the application | |
Defines an active region within the BottomEdge component | |
Standard Lomiri button | |
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 | |
This is a singleton type providing access to the system clipboard | |
Lomiri button providing a drop-down panel visualizing custom options | |
An Image like component which smoothly fades when its source is updated | |
Way to declare several checkable controls as mutually exclusive | |
Context property, which provides utility functions for font manipulations | |
Bar that can contain the title and controls for the current view | |
Component displays an icon from the icon theme | |
Attached object filtering mouse events occured outside the owner | |
Captures mouse events happening outside of a given area | |
Extended Text item with Lomiri styling | |
Easy way to create list items which follow Lomiri design standards, thus making them visually appealing and consistent with the rest of the platform without effort | |
A live timing source providing peridioc updates | |
Provides global object with different enums | |
Singleton defining standard Lomiri durations and easing for animations that should be used to ensure that Lomiri applications are consistent in their animations | |
QML binding for a subset of QCoreApplication | |
Singleton defining the Lomiri color palette | |
A ListView with special features tailored for a look and feel fitting the Lomiri Touch platform. The LomiriListView 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 | |
NumberAnimation that has predefined settings to ensure that Lomiri applications are consistent in their animations | |
Rounded rectangle containing a source image blended over a background color | |
Extended LomiriShape adding a colored overlay layer | |
The root Item that should be used for all applications | |
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 | |
Defines a context menu or submenu structure of a MenuBar | |
Defines an application menu bar structure | |
Logical list of items for a menu | |
Type provides interface to access and store data to the Clipboard | |
Attached property filtering mouse events occured inside the owner | |
Automatically rotates its children following the orientation of the device | |
A page is the basic Item that represents a single view in an Lomiri application. It is recommended to use the Page inside the MainView or AdaptivePageLayout | |
Component configuring the metrics of a column in AdaptivePageLayout | |
Component configuring a layout in an AdaptivePageLayout component | |
Shows a title with a leading and a trailing ActionBar that add action buttons to the header | |
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 | |
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 | |
A special ActionContext used in Dialogs and Popups | |
Component visually indicates the progress of a process of determinate or indeterminate duration | |
Holds an icon representing the progression symbol | |
Extended LomiriShape mostly used for icons and vignettes | |
Pull-to-refresh component for Flickables to reload a model upon pull | |
Scrollable view that features scrollbars and scrolling via keyboard keys | |
Component provides scrolling functionality for scrollable views (i.e. Flickable, ListView) | |
Display a list of sections that the user can select. By tapping on a section name the selectedIndex will be updated, and the associated Action is triggered | |
Component to select a value from a continuous range of values | |
Sorts and filters rows from an existing model | |
Component holding style specific properties to configure a particular StyledItem's style runtime | |
Allows items to be styled by the theme | |
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 | |
Item displays a block of editable, scrollable, formatted text | |
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 | |
That can be used as an extension for the edit mode header. Example: | |
Singleton signalling for opened URIs | |
Various date utility functions | |
Context property that provides internationalization support | |
Various mathematical utility functions |
Gestures
Available through:
import Lomiri.Components 1.3
An area which detects axis-aligned single-finger drag gestures |
List views, list items
Components with standardized view items, with conditional actions, multiselect and reordering support on scrollable views. Replaces the Lomiri.Components.ListItems module components.
Available through:
import Lomiri.Components 1.3
Container providing captionStyles for a twin-label column that can be used in RowLayout or GridLayout | |
Element provides Lomiri design standards for list or grid views. The ListItem component was designed to be used in a list view. It does not define any specific layout, but while its contents can be freely chosen by the developer, care must be taken to keep the contents light in order to ensure good performance when used in long list views | |
Provides configuration for actions to be added to a ListItem | |
Provides information about a ListItem drag event | |
A set of properties attached to the ListItem's parent item or ListView |
List Items module - deprecated
This module contains the old set of list items.
Available through:
import Lomiri.Components.ListItems 1.3
Parent class of various list item classes that can have an icon and a progression symbol | |
List item that shows a piece of text | |
To break up list items into groups | |
A list item with no contents | |
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 | |
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 | |
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 | |
List item displaying multiple values | |
A list item containing a single control | |
A list item displaying a single value | |
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 | |
List item displaying a second string under the main label | |
Narrow line used as a divider between ListItems | |
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 Lomiri.Components.Pickers 1.3
Component provides date and time value picking functionality | |
Slot-machine style value selection component | |
Component serves as base for Picker delegates | |
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 Lomiri.Components.Popups 1.3
A special popover presenting actions to the user. The popover is closed automatically when the action is chosen | |
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 | |
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 | |
Base class for all dialogs, sheets and popovers. Do not use directly | |
Popover utility functions |
Layouting
Available through:
import Lomiri.Layouts 1.0
Defines the layout of a given form factor | |
Defines a new size & position of a single Item, for the purposes of specifying layouts. This is to be used within a ConditionalLayout definition | |
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 Lomiri.Components 1.3
Of colors from the theme that widgets use to draw themselves | |
Color values used for a given widget state | |
Facilities to interact with the current theme | |
Facilities to define the theme of a StyledItem |
Theme module
Available through:
import Lomiri.Components.Themes 1.3
Provides the palette of colors from the theme that widgets use to draw themselves | |
Color values used for a given widget state |
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 Lomiri.Components.Styles 1.3
Style API for action bar | |
Color properties for buttons | |
Style API for BottomEdge content holder panel | |
Style API for ComboButton component | |
Style API for ListItem component | |
Style API for page header | |
Style API for page header | |
Style API for PullToRefresh component | |
Style API for Sections | |
Style API for toolbar |
Resolution Independence Items
Available through:
import Lomiri.Components 1.3
Of measurement for sizes, spacing, margin, etc |
Parsing Command-Line Arguments
Available through:
import Lomiri.Components 1.3
Specifies what type a given command line parameter should be | |
Way to declare what command line parameters are expected by the application |
Services
Available through:
import Lomiri.Components 1.3
Component is a representation of an alarm event | |
Holds the list of alarms defined | |
Singleton defining the haptics feedback used in components, where execution of the feedback is controlled by the system settings | |
Component enables accessing service properties from QML | |
Attached properties to save component property states |
Performance Metrics
Available through:
import Lomiri.PerformanceMetrics 1.0
Labs
The Labs module contains a set of components which have unstable API. Those should not be used in applications as their interface may change any time. Available through:
import Lomiri.Components.Labs 1.0
A view component with a flexible layout configuration setup | |
Layout configuration for SplitView | |
View column metrics configuration for SplitView |
Test extensions
Available through:
import Lomiri Test 1.3
Expands the default TestCase class | |
LomiriTestCase class expands the default TestCase class | |
Singleton type turning mouse events into single finger touch events | |
Singleton type providing additional test functions |