KDE Visual Design Group/HIG/draft-list

Jump to: navigation, search
Under construction.png
 
Under Construction
This is a new page, currently under construction!


Layout

simple

single line of text with no icon
ListView.png
List view
Kirigami

rich

either multible line and or with icon

PlasmaRichList.qml.png

KirigamiRichList.png
Rich

expanding

RichManipulation1.png
expandable lists

Selection

Single selection

List View

ListView.png
List view

Multiple selection

List View

ListView.png
List view
List View selections in combination with the Shift key or Control key

  • use only if the widget is not part of a form, but the central widget to your app, like in Dolphin
  • does not work for mobile/touch devices

DualList

TwoLists.png
Its recommended to use a picker or a checkbox list instead.

DualList

Picker Dialog

Plasma
PlasmaPicker.qml.png PlasmaPicker2.qml.png
use if items deselection is not a primary action use if items are often deselcted
the deselect item only appears on mouse over
Kirigami

For mouse use Kirigami suppoers the same patterns as Plasma does.

For touch these patterns are supported.

KirigamiPicker.qml.png KirigamiSwipePicker.qml.png
do not use this pattern if any other actions on the items are needed use if other actions on swipe are available

Picker

  • use if there are a lot of items, and only the selected items must be visible
  • use if user can rearrange the list

Check box list

PlasmaCheckboxList.qml.png
Check box list

  • use if all items need to be visible
  • use if only a few items are expected to exist
  • don't use if user can rearrange the list
  • only use with check boxes, not with switches or radio buttons

The changes in the state of the check boxes are not instant-apply. Information Button (i). Use to display additional information in a separate window.

Highlight

Change background color in order to highlight an item.

If in an expandable list only one item can be expanded at a time, there is no need for changing the background color.

Alternating background

Only use alternating background colors to differentiate between items, if you have wide and narrow rows which are hard to differentiate otherwise. Don't use a border and alternating background colors together.


This page was last edited on 17 November 2017, at 13:49. Content is available under Creative Commons License SA 4.0 unless otherwise noted.