Ubuntu.Components.Labs SplitView

A view component with a flexible layout configuration setup.

Import Statement: import Ubuntu.Components.Labs .

Properties

Attached Properties

Detailed Description

The component arranges the declared child elements horizontally based on an active column configuration layout. Child elements are considered to be views, and each view is identified with a column index, specified by the SplitView .column attached property. Views should not have width declared, because the width of each view is specified by the active layout’s configuration (ViewColumn) and will overwrite the value specified by the view. On the other hand they should have a height specified, or they can be anchored to the top and bottom of the view. SplitView being a positioner, remember not to anchor horizontal anchor lines or anchor fill the columns.

In order for a SplitView to show some content it must have at least one active layout present. Views which are not configured by the active layout will be hidden. Hidden views may be resized, therefore if the content is size sensitive (i.e. the amount shown differs depending on the space available), make sure the content of your view does take this into account.

import QtQuick 2.4
import Ubuntu.Components 1.3
import Ubuntu.Components.Labs 1.0
MainView {
    id: main
    width: units.gu(300)
    height: units.gu(80)
    SplitView {
        anchors.fill: parent
        layouts: [
            SplitViewLayout {
                when: main.width < units.gu(80)
                ViewColumn {
                    fillWidth: true
                }
            },
            SplitViewLayout {
                when: main.width >= units.gu(80)
                ViewColumn {
                    minimumWidth: units.gu(30)
                    maximumWidth: units.gu(100)
                    preferredWidth: units.gu(40)
                }
                ViewColumn {
                    minimumWidth: units.gu(40)
                    fillWidth: true
                }
            }
        ]
    }
    Page {
        id: column1
        height: parent.height
    }
    Page {
        id: column2
        height: parent.height
    }
}

The SplitView can be used with a Repeater in case the content of the view columns doesn’t need to be preserved between layout changes. The example above with a Repeater would look as follows:

import QtQuick 2.4
import Ubuntu.Components 1.3
import Ubuntu.Components.Labs 1.0
MainView {
    id: main
    width: units.gu(300)
    height: units.gu(80)
    SplitView {
        id: view
        anchors.fill: parent
        layouts: [
            SplitViewLayout {
                when: main.width < units.gu(80)
                ViewColumn {
                    fillWidth: true
                }
            },
            SplitViewLayout {
                when: main.width >= units.gu(80)
                ViewColumn {
                    minimumWidth: units.gu(30)
                    maximumWidth: units.gu(100)
                    preferredWidth: units.gu(40)
                }
                ViewColumn {
                    minimumWidth: units.gu(40)
                    fillWidth: true
                }
            }
        ]
    }
    Repeater {
        model: view.activeLayout.columns
        Page {
            height: parent.height
        }
    }
}

Resizing

SplitView provides the ability to resize view columns. Each column has an attached handle which provides the ability to resize the columns using a mouse or touch. Columns can be resized if the spacing property is set and the column configurations allow that (see spacing property).

Attached properties

SplitView provides a set of attached properties to each column view. Views can in this way have access to various values of the SplitView and configurations.

Property Documentation

[read-only] activeLayout : SplitViewLayout

The property holds the active SplitViewLayout instance, or null is no layout is active.

handleDelegate : Component

The property holds the delegate to be shown for the column resizing handle. The delegate is for pure visual, mouse and touch handling is provided by the SplitView component itself. The component provides a context property called handle which embeds the visuals. This can be used to anchor the visuals to the resize handle. The thickness of the handle is driven by the spacing property.

import QtQuick 2.4
import Ubuntu.Components 1.3
import Ubuntu.Components.Labs 1.0
MainView {
    id: main
    width: units.gu(300)
    height: units.gu(80)
    SplitView {
        anchors.fill: parent
        handleDelegate: Rectangle {
            anchors {
                fill: parent
                leftMargin: units.dp(2)
                rightMargin: units.dp(2)
                topMargin: handle.height / 2 - units.gu(3)
                bottomMargin: handle.height / 2 - units.gu(3)
            }
            color: UbuntuColors.graphite
            scale: handle.containsMouse || handle.pressed ? 1.6 : 1.0
            Behavior on scale { UbuntuNumberAnimation {} }
        }
        layouts: [
            SplitViewLayout {
                when: main.width < units.gu(80)
                ViewColumn {
                    fillWidth: true
                }
            },
            SplitViewLayout {
                when: main.width >= units.gu(80)
                ViewColumn {
                    minimumWidth: units.gu(30)
                    maximumWidth: units.gu(100)
                    preferredWidth: units.gu(40)
                }
                ViewColumn {
                    minimumWidth: units.gu(40)
                    fillWidth: true
                }
            }
        ]
    }
    Page {
        id: column1
        height: parent.height
    }
    Page {
        id: column2
        height: parent.height
    }
}
layouts : list<SplitViewLayout>

The property holds the layout configurations declared for the given SplitView .

See also SplitViewLayout.

spacing : real

Spacing between view columns. A value bigger than 0 enables resizing of columns with a minimumWidth lower than maximumWidth. If spacing is 0 the columns cannot be resized. Defaults to 4 device pixels.

Attached Property Documentation

SplitView.column : int

The property holds the column index the view is configured to.

SplitView.columnConfig : ViewColumn

The attached property holds the active layout’s column configuration data. The value is null if there is no active configuration value provided for the column.

SplitView.view : SplitView

Contains the SplitView instance of the column.