Element Reference
This document describes the various elements that Union knows about and their properties. Note that this page is based upon what the QtQuick output provides, as that is at time of writing the most complete output.
Element Overview
Things that can be styled by Union are generally referred to as elements. Each element consists of a number of properties that allow style rules to target elements matching those properties. The matching style rules result in a set of properties that should be applied to the matching elements.
An element can have children and each child can have its own children. Indirect children are referred to as descendants. Certain elements have specific children that are considered part of the element, even though they have their own properties. These are referred to as sub-elements.
Each element can have the following properties:
Type
A string indicating the type of element.
ID
A string used as a unique identifier for a single element.
States
States represent different states the element can be in. Many of these are related to input. The following states are currently supported:
Hovered
Set whenever the element is hovered by a mouse or similar input device.
ActiveFocus
Set whenever the element will receive keyboard input when input.
VisualFocus
Set if ActiveFocus is set and the element should visualize that focus.
Pressed
Set whenever the element is being tapped or clicked.
Checked
Set whenever the element is considered to be "on".
Highlighted
Set whenever the element should receive extra visual highlighting.
Hints
Hints are used as extra boolean flags that indicate something is different about the element.
Attributes
Attributes are key-value pairs that indicate something is different about the element, which is more complex than a simple binary state.
Button-like Elements
Button
A Button.
| Type | Button | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Checked | ||
| Enabled | ||
| Highlighted | ||
| Hints | with-icon | Set whenever the button has an icon set. |
| flat | Set whenever the button should use a flat appearance. | |
| with-menu | Set whenever the button has a menu attached to it. | |
| changed | Set whenever the button should visualize a changed state. | |
| Attributes | display | A hint indicating what sub-controls should be visible. Possible values:
|
Sub-Elements
Icon
The icon displayed by the button. Style it using the icon related properties.
Text
The text displayed by the button. Style it using the text related properties.
Indicator
An extra icon that indicates something about the button. By default used to add a down-arrow icon when with-menu is set.
| Type | Indicator | |
ToolButton
A button with a less prominent visual appearance for use in toolbars and similar locations.
| Type | ToolButton | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Checked | ||
| Enabled | ||
| Highlighted | ||
| Hints | raised | Set whenever the button should use a raised appearance. |
| with-menu | Set whenever the button has a menu attached to it. | |
| changed | Set whenever the button should visualize a changed state. | |
| Attributes | display | A hint indicating what sub-controls should be visible. Possible values:
|
Sub-Elements
Icon
The icon displayed by the button. Style it using the icon related properties.
Text
The text displayed by the button. Style it using the text related properties.
Indicator
An extra icon that indicates something about the button. By default used to add a down-arrow icon when with-menu is set.
| Type | Indicator | |
ComboBox
A button with a dropdown that allows selecting one of several options.
| Type | ComboBox | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Enabled | ||
| Highlighted | ||
| Hints | flat | Set whenever the combobox should use a flat appearance. |
| editable | Set whenever the combobox is user-editable and should display that. | |
| changed | Set whenever the combobox should visualize a changed state. | |
Sub-Elements
Icon
The icon displayed by the button. Style it using the icon related properties.
Text
The text displayed by the button. Style it using the text related properties.
Indicator
An icon used to indicate that this is a combobox. Should use a down arrow icon or similar.
| Type | Indicator | |
Popup
The dropdown displayed by the combobox.
Note: This subelement is not a descendant of the combobox, so you cannot target it with child or descrendant selectors. Instead, use the type and "combobox" hint to target the popup.
| Type | Popup | |
| Hints | combobox | Used to indicate that this is a combobox popup. |
Delegate
The combobox has a delegate that is used by the dropdown. By default this delegate will be an ItemDelegate but it may be overridden by applications.
RoundButton
A button that is usually displayed in a circular manner.
| Type | RoundButton | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Checked | ||
| Enabled | ||
| Highlighted | ||
| Hints | flat | Set whenever the button should use a flat appearance. |
| changed | Set whenever the button should visualize a changed state. | |
| Attributes | display | A hint indicating what sub-controls should be visible. Possible values:
|
Sub-Elements
Icon
The icon displayed by the button. Style it using the icon related properties.
Text
The text displayed by the button. Style it using the text related properties.
DelayButton
A button with progress that will set the checked state after holding it down for a certain amount of time.
| Type | DelayButton | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Checked | ||
| Enabled | ||
| Hints | with-icon | Set whenever the button has an icon set. |
| with-menu | Set whenever the button has a menu attached to it. | |
| changed | Set whenever the button should visualize a changed state. | |
| Attributes | display | A hint indicating what sub-controls should be visible. Possible values:
|
Sub-Elements
Icon
The icon displayed by the button. Style it using the icon related properties.
Text
The text displayed by the button. Style it using the text related properties.
Indicator
An extra icon that indicates something about the button. By default used to add a down-arrow icon when with-menu is set.
| Type | Indicator | |
Fill
A rectangle that indicates how far the DelayButton has progressed.
| Type | Fill | |
Text Elements
Label
A simple text label.
| Type | Label | |
| States | Enabled | |
TextField
A single-line input field for text.
| Type | TextField | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
| Hints | changed | Set whenever the element should visualize a changed state. |
Sub-Elements
Text
The text displayed by the element. Style it using the text related properties.
Placeholder
The text displayed when there is no input. It serves as a hint for what kind of input is accepted. Generally displayed in a muted style.
| Hints | placeholder | Indicates this is the element's placeholder text. |
TextField
A single-line input field for text.
| Type | TextField | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
| Hints | changed | Set whenever the element should visualize a changed state. |
Sub-Elements
Text
The text displayed by the element. Style it using the text related properties.
Placeholder
The text displayed when there is no input. It serves as a hint for what kind of input is accepted. Generally displayed in a muted style.
| Hints | placeholder | Indicates this is the element's placeholder text. |
TextArea
A multi-line input field for text.
| Type | TextArea | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
| Hints | changed | Set whenever the element should visualize a changed state. |
Sub-Elements
Text
The text displayed by the element. Style it using the text related properties.
Placeholder
The text displayed when there is no input. It serves as a hint for what kind of input is accepted. Generally displayed in a muted style.
| Hints | placeholder | Indicates this is the element's placeholder text. |
SearchField
A single-line input field with a dropdown for searching things.
| Type | SearchField | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
Sub-Elements
Text
The text displayed by the element. Style it using the text related properties.
Placeholder
The text displayed when there is no input. It serves as a hint for what kind of input is accepted. Generally displayed in a muted style.
| Hints | placeholder | Indicates this is the element's placeholder text. |
SearchIndicator
An icon that indicates the element is a search field.
| Type | SearchIndicator | |
ClearIndicator
An icon that, when clicked, will clear the element's text.
| Type | ClearIndicator | |
Popup
A popup that displays search results for the element.
Note: The popup is not a descendant of the SearchField, so cannot be targeted with descendant selectors. Instead use the type and hint to target the SearchField popup.
| Type | Popup | |
| Hints | SearchField | Indicates that this is a search field popup. |
SpinBox
A text field displaying a numerical value along with increase and decrease buttons.
| Type | SpinBox | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
| Hints | editable | Set when the spinbox allows direct input by the user. |
| constrained | Set when the spinbox does not have enough space to display the text and buttons with the main layout. This can be used to switch to a more compact layout. | |
| changed | Set whenever the element should visualize a changed state. | |
Sub-Elements
Text
The text displayed by the element. Style it using the text related properties.
Up/Increase Indicator
The button used to increase the value of the spinbox. It consists of a rectangle with an icon centered in it.
| Type | Indicator | |
| States | Hovered | |
| Pressed | ||
| Enabled | ||
| Hints | increase | Used to indicate this is the up/increase indicator. |
Down/Decrease Indicator
The button used to decrease the value of the spinbox. It consists of a rectangle with an icon centered in it.
| Type | Indicator | |
| States | Hovered | |
| Pressed | ||
| Enabled | ||
| Hints | decrease | Used to indicate this is the down/decrease indicator. |
DoubleSpinBox
A SpinBox meant for editing floating-point values. Note that this element is exactly the same as SpinBox, except with one added hint.
| Hints | doublespinbox | Used to indicate this is a DoubleSpinBox. |
Checkable Elements
CheckBox
A checkable box with a label.
| Type | CheckBox | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Checked | ||
| Enabled | ||
| Hints | with-icon | Set whenever the element has an icon set. |
| changed | Set whenever the element should visualize a changed state. | |
| Attributes | display | A hint indicating what sub-controls should be visible. Possible values:
|
Sub-Elements
Icon
The icon displayed by the element. Style it using the icon related properties.
Text
The text displayed by the element. Style it using the text related properties.
Indicator
A rectangle used to render the checkmark. This should show a checkmark image if the delegate's state is checked.
| Type | Indicator | |
RadioButton
A checkable element that is one of several options.
| Type | RadioButton | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Checked | ||
| Enabled | ||
| Hints | with-icon | Set whenever the element has an icon set. |
| changed | Set whenever the element should visualize a changed state. | |
| Attributes | display | A hint indicating what sub-controls should be visible. Possible values:
|
Sub-Elements
Icon
The icon displayed by the element. Style it using the icon related properties.
Text
The text displayed by the element. Style it using the text related properties.
Indicator
A rectangle used to render the radio indicator. This should show a radio image if the delegate's state is checked.
| Type | Indicator | |
Switch
A toggle switch with a distinct "on" and "off" state.
| Type | Switch | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Checked | ||
| Enabled | ||
Sub-Elements
Icon
The icon displayed by the element. Style it using the icon related properties.
Text
The text displayed by the element. Style it using the text related properties.
Indicator
A rectangle used as background for the handle.
| Type | Indicator | |
Sub-Elements
Handle
A rectangle used as moving part of the switch indicator. This will be moved to the appropriate position based on switch state.
| Type | Handle | |
Delegate Elements
ItemDelegate
A standard delegate for lists and other views.
| Type | ItemDelegate | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Checked | ||
| Enabled | ||
| Highlighted | ||
| Hints | with-icon | Set whenever the delegate has an icon set. |
| hover-enabled | Set when the delegate is supposed to show hover effects. | |
| inside-list | Set when the delegate is used inside a list view. | |
| inside-table | Set when the delegate is used inside a table view. | |
| alternating-colors | Set when the delegate should be using alternating row colors. | |
| Attributes | display | A hint indicating what sub-controls should be visible. Possible values:
|
Sub-Elements
Icon
The icon displayed by the button. Style it using the icon related properties.
Text
The text displayed by the button. Style it using the text related properties.
CheckDelegate
A standard delegate with a checkmark.
| Type | CheckDelegate | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Checked | ||
| Enabled | ||
| Highlighted | ||
| Hints | with-icon | Set whenever the delegate has an icon set. |
| hover-enabled | Set when the delegate is supposed to show hover effects. | |
| inside-list | Set when the delegate is used inside a list view. | |
| inside-table | Set when the delegate is used inside a table view. | |
| alternating-colors | Set when the delegate should be using alternating row colors. | |
| changed | Set whenever the element should visualize a changed state. | |
| Attributes | display | A hint indicating what sub-controls should be visible. Possible values:
|
Sub-Elements
Icon
The icon displayed by the button. Style it using the icon related properties.
Text
The text displayed by the button. Style it using the text related properties.
Indicator
A rectangle used to render the checkmark. This should show a checkmark image if the delegate's state is checked.
| Type | Indicator | |
RadioDelegate
A standard delegate with a radio button.
| Type | RadioDelegate | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Checked | ||
| Enabled | ||
| Highlighted | ||
| Hints | with-icon | Set whenever the delegate has an icon set. |
| hover-enabled | Set when the delegate is supposed to show hover effects. | |
| inside-list | Set when the delegate is used inside a list view. | |
| inside-table | Set when the delegate is used inside a table view. | |
| alternating-colors | Set when the delegate should be using alternating row colors. | |
| changed | Set whenever the element should visualize a changed state. | |
| Attributes | display | A hint indicating what sub-controls should be visible. Possible values:
|
Sub-Elements
Icon
The icon displayed by the button. Style it using the icon related properties.
Text
The text displayed by the button. Style it using the text related properties.
Indicator
A rectangle used to render the radio indicator. This should show a radio indicator image if the delegate's state is checked.
| Type | Indicator | |
SwitchDelegate
A standard delegate with a switch.
| Type | SwitchDelegate | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Checked | ||
| Enabled | ||
| Highlighted | ||
| Hints | with-icon | Set whenever the delegate has an icon set. |
| hover-enabled | Set when the delegate is supposed to show hover effects. | |
| inside-list | Set when the delegate is used inside a list view. | |
| inside-table | Set when the delegate is used inside a table view. | |
| alternating-colors | Set when the delegate should be using alternating row colors. | |
| Attributes | display | A hint indicating what sub-controls should be visible. Possible values:
|
Sub-Elements
Icon
The icon displayed by the button. Style it using the icon related properties.
Text
The text displayed by the button. Style it using the text related properties.
Indicator
A rectangle used as background for the switch handle.
| Type | Indicator | |
Sub-Elements
Handle
A rectangle used as handle of the switch indicator.
| Type | Handle | |
SwipeDelegate
A delegate that can be swiped to the side to reveal content underneath.
| Type | SwipeDelegate | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Checked | ||
| Enabled | ||
| Highlighted | ||
| Hints | with-icon | Set whenever the delegate has an icon set. |
| hover-enabled | Set when the delegate is supposed to show hover effects. | |
| inside-list | Set when the delegate is used inside a list view. | |
| inside-table | Set when the delegate is used inside a table view. | |
| alternating-colors | Set when the delegate should be using alternating row colors. | |
| Attributes | display | A hint indicating what sub-controls should be visible. Possible values:
|
Sub-Elements
Icon
The icon displayed by the button. Style it using the icon related properties.
Text
The text displayed by the button. Style it using the text related properties.
Progress Indicators and Sliders
BusyIndicator
An element that indicates something is busy.
| Type | BusyIndicator | |
Sub-Elements
Icon
The icon displayed by the indicator. Style it using the icon related properties. The indicator will spin the icon around.
ProgressBar
A bar indicating how far along a process is.
| Type | ProgressBar | |
| States | Enabled | |
| Hints | indeterminate | Set when the progress bar is in an indeterminate (i.e. no progress range is known) state. |
Sub-Elements
Track
A rectangle displaying the progress.
| Type | Track | |
Slider
A button that slides along a track to allow choosing a value.
| Type | Slider | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Enabled | ||
| Hints | horizontal | Set when the slider is oriented horizontally. |
| vertical | Set when the slider is oriented vertically. | |
| changed | Set when the element should display a changed state. | |
Sub-Elements
Handle
A rectangle that can be dragged to choose the slider value.
| Type | Handle | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Enabled | ||
Fill
A rectangle displaying the filled part of the slider.
| Type | Fill | |
Tick Marks
A slider can have tickmarks to show distinct values. Each tick mark is its own element.
| Type | TickMark | |
| Hints | active | Set when the slider value is greater than the value the tick mark represents. |
RangeSlider
A slider with two handles that allows selecting a range of values.
| Type | RangeSlider | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
| Hints | horizontal | Set when the slider is oriented horizontally. |
| vertical | Set when the slider is oriented vertically | |
Sub-Elements
First Handle
A rectangle that can be dragged to choose the minimum value for the range.
| Type | Handle | |
| States | Hovered | |
| ActiveFocus | ||
| Pressed | ||
| Enabled | ||
| Hints | first | Used to indicate this is the first handle. |
Second Handle
A rectangle that can be dragged to choose the maximum value for the range.
| Type | Handle | |
| States | Hovered | |
| ActiveFocus | ||
| Pressed | ||
| Enabled | ||
| Hints | second | Used to indicate this is the first handle. |
Fill
A rectangle displaying the filled part of the slider.
| Type | Fill | |
Dial
A circular slider for choosing a value.
| Type | Dial | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Enabled | ||
Sub-Elements
Handle
A rectangle that can be dragged to choose the dial's value.
| Type | Handle | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Enabled | ||
Application Structure
ApplicationWindow
A window element used as the base for applications.
| Type | ApplicationWindow | |
| Hints | inactive | Set when the window does not currently have focus. |
Drawer
A pane that slides in from a window edge.
| Type | Drawer | |
| Hints | modal | Set when the drawer prevents interaction with the rest of the application when it is shown. |
| Attributes | edge | Which edge of the window the drawer is attached to. Possible values:
|
Frame
A frame that can be used to visually group elements together.
| Type | Frame | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
GroupBox
A box with a title that can be used to visually group elements together.
| Type | GroupBox | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
Sub-Elements
Header
A text element with a background that shows the title.
| Type | Header | |
Page
A content area with header and footer.
| Type | Page | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
Pane
An area with a background that can be used to visually group elements together.
| Type | Pane | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
ScrollView
An area with a scrollbar for displaying lists and similar scrollable content.
| Type | ScrollView | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
| Hints | horizontal-scroll | Set when the scrollview can scroll horizontally. |
| vertical-scroll | Set when the scrollview can scroll vertically. | |
| framed-background | Set when the scrollview should display a frame around itself. | |
Sub-Elements
Horizontal Scrollbar
The scrollbar used for scrolling horizontally. See the ScrollBar type for details.
Vertical Scrollbar
The scrollbar used for scrolling vertically. See the ScrollBar type for details.
ScrollBar
A bar that indicates the size and position of a scrollable area.
| Type | ScrollBar | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Enabled | ||
| Hints | horizontal | Set when the scrollbar orientation is horizontal. |
| vertical | Set when the scrollbar orientation is vertical. | |
| noninteractive | Set when the scrollbar is used only to display scroll position and cannot be dragged to set the scroll position. | |
Sub-Elements
Handle
A rectangle used for the draggable part of the scrollbar.
| Type | Handle | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Enabled | ||
ScrollIndicator
An indicator that indicates the scroll position of an area. This is generally used to indicate a non-interactive scroll position.
| Type | ScrollIndicator | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Enabled | ||
| Attributes | orientation | Used to indicate which orientation the scroll indicator has. Possible values:
|
Sub-Elements
Handle
A rectangle used for the positioned part of the indicator.
| Type | Handle | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Enabled | ||
SplitView
An area with a draggable split in the middle that can be used to display two sets of content side by side.
| Type | SplitView | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Enabled | ||
| Hints | horizontal | Set when the split view is split horizontally. |
| vertical | Set when the split view is split vertically. | |
Sub-Elements
Handle
The draggable area between two splits.
| Type | Handle | |
StackView
A stack of pages with the top-most page visible.
| Type | StackView | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
SwipeView
A view of multiple elements that allows swiping between those elements.
| Type | SwipeView | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
| Hints | horizontal | Set when the view is oriented horizontally. |
| vertical | Set when the view is oriented vertically. | |
PageIndicator
An element showing the number of pages and the current page.
| Type | PageIndicator | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
Sub-Elements
Delegate
A rectangle used for a single page.
| Type | PageIndicatorDelegate | |
| Hints | current | Set when the delegate displays the current page. |
ToolBar
An area used for elements that interact with the rest of the application.
| Type | ToolBar | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
| Hints | header | Set when the toolbar is located in the header of an application window or page. |
| footer | Set when the toolbar is located in the footer of an application window or page. | |
ToolSeparator
A line used to separate groups of elements inside a tool bar.
| Type | ToolSeparator | |
| States | Enabled | |
| Hints | horizontal | Set when the separator is oriented horizontally. |
| vertical | Set when the separator is oriented vertically. | |
TabBar
A row of tab-like buttons that allows switching content.
| Type | TabBar | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
| Attributes | tab-position | The position of tabs relative to the content. Possible values:
|
Sub-Elements
Highlight
A highlight for the current active tab.
| Type | TabBarHighlight | |
| States | Enabled | |
| Highlighted | ||
| Hints | itemview-highlight | Used to indicate this is a highlight. |
| Attributes | tab-position | The position of the tab relative to content. Possible values:
|
TabButton
A single button to active a tab.
| Type | TabButton | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Checked | ||
| Enabled | ||
| Hints | with-icon | Set whenever the button has an icon set. |
| itemview-highlight | Set when the tabbar requests highlighting the tab. | |
| Attributes | display | A hint indicating what sub-controls should be visible. Possible values:
|
| direction | The position of the tab relative to content. Possible values:
| |
Sub-Elements
Icon
The icon displayed by the button. Style it using the icon related properties.
Text
The text displayed by the button. Style it using the text related properties.
Popups and Menus
Popup
A generic popup that can overlay content over the main application content.
| Type | Popup | |
| States | ActiveFocus | |
| Enabled | ||
Overlay
The overlay underneath popups.
| Type | Overlay | |
| Hints | modal | Used to indicate the overlay is for modal popups. |
| modeless | Used to indicate the overlay is for modeless popups. | |
Dialog
A popup with a title, content and action buttons.
| Type | Dialog | |
Sub-Elements
Header
The label used for the title in the dialog's header.
| Type | Label | |
| Hints | header | Used to indicate this label is used as a header. |
DialogButtonBox
A container for dialog action buttons.
| Type | DialogButtonBox | |
| Attributes | position | The position of the dialog button box. Possible values:
|
Sub-Elements
Delegate
A button that is used to represent each dialog action.
| Type | Button | |
| Attributes | role | The dialog button box role associated with this button. Possible values:
|
Menu
A popup containing a list of interactive elements.
| Type | Menu | |
| States | ActiveFocus | |
| Enabled | ||
Sub-Elements
Delegate
The default element for menu items is MenuItem. See there for details.
MenuItem
A single entry in a menu.
| Type | MenuItem | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Checked | ||
| Enabled | ||
| Highlighted | ||
| Hints | exclusive | Set when the menu item is checkable and only a single entry between multiple menu items can be checked. Generally used to change the indicator into a radio button style. |
| with-submenu | Set when the menu item will show a submenu on hover or click. | |
Sub-Elements
Icon
The icon displayed by the element. Style it using the icon related properties.
Text
The text displayed by the element. Style it using the text related properties.
ShortcutText
A text that shows what shortcut is assigned to the menu item.
| Type | ShortcutText | |
Indicator
A rectangle used to display the checkmark for checkable items.
| Type | Indicator | |
Arrow
An icon used to display an arrow icon when the menu item will show a sub menu.
| Type | Arrow | |
MenuSeparator
A separator between different menu items.
| Type | MenuSeparator | |
| States | Enabled | |
MenuBar
A bar containing items that will show menus.
| Type | MenuBar | |
Sub-Elements
Delegate
The default item used for entries of a menu bar is MenuBarItem.
MenuBarItem
An item inside a menu bar that will show a menu when clicked.
| Type | MenuBarItem | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Checked | ||
| Enabled | ||
| Highlighted | ||
ToolTip
A popup that shows more descriptive text for an element.
| Type | ToolTip | |
| States | ActiveFocus | |
| Enabled | ||
Table and Tree View
TableViewDelegate
A standard delegate for table views.
| Type | TableViewDelegate | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Enabled | ||
| Highlighted | ||
| Hints | alternating-colors | Set when the delegate should be using alternating row colors. |
| editing | Set when the user is currently editing the table cell. | |
| current | Set when the table cell is the currently selected cell. | |
| selected | Set when the table cell is in the selected set of cells. | |
Sub-Elements
Text
The text displayed by the button. Style it using the text related properties.
EditDelegate
A text field that is used when the user is editing the table cell.
TreeViewDelegate
A standard delegate for tree views.
| Type | TreeViewDelegate | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Enabled | ||
| Highlighted | ||
| Hints | alternating-colors | Set when the delegate should be using alternating row colors. |
| expanded | Set when the children of the tree node are visible. | |
| editing | Set when the user is currently editing the table cell. | |
| current | Set when the tree cell is the currently selected cell. | |
| selected | Set when the tree cell is in the selected set of cells. | |
Sub-Elements
Icon
The icon displayed by the element. Style it using the icon related properties.
Text
The text displayed by the button. Style it using the text related properties.
Indentation
A transparent item used to reserve space for tree indentation. This should be placed at the start of the delegate.
| Type | Indentation | |
Indicator
An icon used to indicate the tree node has children. Usually styled as an arrow.
| Type | Indicator | |
EditDelegate
A text field that is used when the user is editing the tree cell.
Table and Tree Views
Header View
A horizontal or vertical view of table headers.
| Type | HeaderView | |
| States | ActiveFocus | |
| Enabled | ||
| Hints | horizontal | Set when the header view is oriented horizontally. |
| vertical | Set when the header view is oriented vertically. | |
Sub-Elements
Delegate
An element used to show a single entry of the view.
| Type | HeaderViewDelegate | |
| States | ActiveFocus | |
| Enabled | ||
| Hints | horizontal | Set when the delegate is used for a horizontally oriented header view. |
| vertical | Set when the delegate is used for a vertically oriented header view. | |
| sort-ascending | Set when the delegate should indicate ascending sorting is active for the associated table or tree column. | |
| sort-descending | Set when the delegate should indicate descending sorting is active for the associated table or tree column. | |
Sub-Elements
Icon
An icon that can be used to display sorting state.
Text
A text element that shows the row or column's title.
HeaderViewDelegate
A standard delegate that can be used in a header view.
Note: This is separate from the HeaderView delegate because of Qt versioning reasons.
| Type | HeaderViewDelegate | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Enabled | ||
| Highlighted | ||
| Hints | horizontal | Set when the delegate is intended for a horizontal header. |
| vertical | Set when the delegate is intended for a vertical header. | |
Sub-Elements
Text
The text that should be displayed.
SelectionRectangle
A rectangle that is used to indicate which cells of a table or tree view are selected.
| Type | SelectionRectangle | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
Sub-Elements
Handle
A handle that can be dragged to change the selection.
Note: This is not a descendant of SelectionRectangle so you cannot target it with descendant selectors.
| Type | SelectionRectangleHandle | |
| States | Enabled | |
| VisualFocus | ||
Calendar
MonthGrid
A grid displaying days of a month.
| Type | MonthGrid | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
Sub-Elements
Day
A label showing a specific day.
| Type | Label | |
| States | ActiveFocus | |
| Enabled | ||
| Hints | current-month | Set when the label shows a day of the currently selected month. |
| today | Set when the label show the current day. | |
DayOfWeekRow
A row displaying the names of days of the week.
| Type | DayOfWeekRow | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
Sub-Elements
Label
A label showing a single day name.
WeekNumberColumn
A column displaying the number of a week.
| Type | WeekNumberColumn | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
Sub-Elements
Label
A label showing a single week number.
Kirigami
Application Header
Base type for Kirigami's application headers.
| Type | ApplicationHeader | |
| Hints | with-separator | Set when the header should show a separator below it. |
Card
An element grouping together information in a view.
| Type | Card | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Checked | ||
| Enabled | ||
| Highlighted | ||
Chip
A small element used to show tags or similar information.
| Type | Chip | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Checked | ||
| Enabled | ||
| Hints | closable | Set when the chip should show a button to remove it. |
| interactive | Set when the chip can be interacted with. | |
| Attributes | display | A hint indicating what sub-controls should be visible. Possible values:
|
Sub-Elements
Icon
The icon displayed by the chip. Style it using the icon related properties.
Text
The text displayed by the chip. Style it using the text related properties.
Indicator
A toolbutton used for removing or other actions on the chip.
| Type | ToolButton | |
| Hints | indicator | Used to indicate this is an indicator toolbutton. |
Heading
A text element that is used as a title for a different section of content.
| Type | Heading | |
| Hints | level-{1-6} | The level of the heading. Lower levels mean bigger headings. |
| primary | Set when the heading should be shown emphasized as a primary heading. | |
| secondary | Set when the heading should be shown deemphasized as a secondary heading. | |
InlineMessage
A text with a distinct background used to display messages to the user.
| Type | InlineMessage | |
| Attributes | type | The type of message. Possible values:
|
| position | Where the message is located relative to content. Possible values:
| |
NavigationTabBar
A tab bar used for navigating between different pages of an application.
| Type | NavigationTabBar | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Enabled | ||
| Hints | header | Set when the tab bar is located in the header of the application. |
| footer | Set when the tab bar is located in the footer of the application. | |
NavigationTabButton
A button for use in a NavigationTabBar.
| Type | NavigationTabButton | |
| States | Hovered | |
| ActiveFocus | ||
| VisualFocus | ||
| Pressed | ||
| Checked | ||
| Enabled | ||
| Attributes | direction | Where the tab button is located relative to the content. Possible values:
|
| display | A hint indicating what sub-controls should be visible. Possible values:
| |
Sub-Elements
Icon
The icon displayed by the button. Style it using the icon related properties.
Text
The text displayed by the button. Style it using the text related properties.
Indicator
An extra icon that indicates something about the button.
| Type | Indicator | |
OverlayDrawer
A drawer used as base for several Kirigami drawers.
| Type | OverlayDrawer | |
| Hints | modal | Set when the drawer should block interaction with the application when visible. |
| Attributes | edge | Which edge of the window the drawer is attached to. Possible values:
|