org::kde::kirigami::FormLayout Class Reference

Inheritance diagram for org::kde::kirigami::FormLayout:

Properties
list< Item >	twinFormLayouts
bool	wideMode

Additional Inherited Members
Public Member Functions inherited from QtQuick.Item
	childAt (x, real y)
bool	contains (point)
	forceActiveFocus ()
	forceActiveFocus (reason)
bool	grabToImage (callback, targetSize)
object	mapFromGlobal (x, real y)
object	mapFromItem (item, point p)
object	mapFromItem (item, real x, real y)
object	mapFromItem (item, real x, real y, real width, real height)
object	mapFromItem (item, rect r)
object	mapToGlobal (x, real y)
object	mapToItem (item, point p)
object	mapToItem (item, real x, real y)
object	mapToItem (item, real x, real y, real width, real height)
object	mapToItem (item, rect r)
	nextItemInFocusChain (forward)

Detailed Description

This is the base class for Form layouts conforming to the Kirigami Human Interface Guidelines.

The layout consists of two columns: the left column contains only right-aligned labels provided by a kirigami::FormData attached property, the right column contains left-aligned child types.

Child types can be sectioned using an QtQuick.Item or kirigami::Separator with a kirigami::FormData attached property, see FormLayoutAttached::isSection for details.

Example usage:

import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15 as QQC2
import org.kde.kirigami 2.20 as Kirigami
 
Kirigami.FormLayout {
    QQC2.TextField {
        Kirigami.FormData.label: "Label:"
    }
    Kirigami.Separator {
        Kirigami.FormData.label: "Section Title"
        Kirigami.FormData.isSection: true
    }
    QQC2.TextField {
        Kirigami.FormData.label: "Label:"
    }
    QQC2.TextField {
    }
    QQC2.Button {
        text: "button"
        Layout.fillWidth: true
        Kirigami.FormData.label: "Button label: "
    }
}

See also

FormLayoutAttached

Form Layouts in Kirigami

KDE Human Interface Guidelines on Forms

Since

org.kde.kirigami 2.3

Definition at line 32 of file FormLayout.qml.

Property Documentation

twinFormLayouts

list<Item> org::kde::kirigami::FormLayout::twinFormLayouts

read

If for some implementation reason multiple FormLayouts have to appear on the same page, they can have each other in twinFormLayouts, so they will vertically align with each other perfectly.

Since

KDE Frameworks 5.53

Definition at line 56 of file FormLayout.qml.

wideMode

bool org::kde::kirigami::FormLayout::wideMode

read

This property specifies whether the form layout is in wide mode.

If true, the layout will be optimized for a wide screen, such as a desktop machine (the labels will be on a left column, the fields on a right column beside it), if false (such as on a phone) everything is laid out in a single column.

By default, this property automatically adjusts the layout if there is enough screen space.

Set this to true for a convergent design, set this to false for a mobile-only design.

Definition at line 48 of file FormLayout.qml.

---

The documentation for this class was generated from the following file:

• FormLayout.qml