SelectionControlsGallery.qml 6.12 KB
Newer Older
Marco Martin's avatar
Marco Martin committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*
 *   Copyright 2015 Marco Martin <mart@kde.org>
 *
 *   This program is free software; you can redistribute it and/or modify
 *   it under the terms of the GNU Library General Public License as
 *   published by the Free Software Foundation; either version 2 or
 *   (at your option) any later version.
 *
 *   This program is distributed in the hope that it will be useful,
 *   but WITHOUT ANY WARRANTY; without even the implied warranty of
 *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *   GNU Library General Public License for more details
 *
 *   You should have received a copy of the GNU Library General Public
 *   License along with this program; if not, write to the
 *   Free Software Foundation, Inc.,
 *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */

import QtQuick 2.0
21
import QtQuick.Controls 2.2 as Controls
Marco Martin's avatar
Marco Martin committed
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.4 as Kirigami

import "components"

Kirigami.ScrollablePage {
    id: page
    actions.main: Kirigami.Action {
        iconName: "documentinfo"
        text: qsTr("Info")
        checkable: true
        onCheckedChanged: sheet.sheetOpen = checked;
        shortcut: "Alt+I"
    }

    Layout.fillWidth: true
    title: qsTr("Selection Controls")

Marco Martin's avatar
Marco Martin committed
40
41
42
43
44
45
46
47
    //Close the drawer with the back button
    onBackRequested: {
        if (sheet.sheetOpen) {
            event.accepted = true;
            sheet.close();
        }
    }

Marco Martin's avatar
Marco Martin committed
48
49
    InfoSheet {
        id: sheet
Marco Martin's avatar
Marco Martin committed
50
        page: page
Marco Martin's avatar
Marco Martin committed
51
52
53
        title: qsTr("Selection Controls")
        higUrl: "https://hig.kde.org/components/index.html#selection"
        sourceUrl: "https://cgit.kde.org/kirigami.git/tree/examples/gallerydata/contents/ui/gallery/SelectionControlsGallery.qml"
Yuri Chornoivan's avatar
Yuri Chornoivan committed
54
        text: qsTr("<p>Selection controls allow users to complete tasks that involve a choice or a selection.</p> <p>Depending on the kind of choice that has to be made, the best control to use may be a Checkbox, a RadioButton, or a Switch.</p> <ul><li>Use checkboxes for non-exclusive options that have clear alternatives. Mutually exclusive options should use a set of radio buttons or a combo box.</li> <li>Use radio buttons for a few mutually exclusive options. If there are more than five options (or if there is not enough space to arrange four or five options), use a combo box or list instead.</li> <li>Use switches on Mobile, when immediately activating or deactivating something (ok/Apply buttons not needed).</li></ul>")
Marco Martin's avatar
Marco Martin committed
55
56
    }

57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
    Controls.Dialog {
        id: checkListDialog
        modal: true
        focus: true
        x: (page.width - width) / 2
        y: page.height / 2 - height
        width: Math.min(page.width - Kirigami.Units.gridUnit * 4, Kirigami.Units.gridUnit * 20)
        height: Kirigami.Units.gridUnit * 20
        standardButtons: Controls.Dialog.Close
        title: qsTr("Checkable List Items")

        contentItem: Controls.ScrollView {
            ListView {
                model: 20
                delegate: Controls.CheckDelegate {
                    width: parent.width
                    text: qsTr("Delegate") + " " + (modelData+1)
                }
            }
            Component.onCompleted: background.visible = true
        }
    }

    Controls.Dialog {
        id: radioListDialog
        modal: true
        focus: true
        x: (page.width - width) / 2
        y: page.height / 2 - height
        width: Math.min(page.width - Kirigami.Units.gridUnit * 4, Kirigami.Units.gridUnit * 20)
        height: Kirigami.Units.gridUnit * 20
        standardButtons: Controls.Dialog.Close
        title: qsTr("Radio List Items")

        contentItem: Controls.ScrollView {
            ListView {
                model: 20
                delegate: Controls.RadioDelegate {
                    width: parent.width
                    text: qsTr("Delegate") + " " + (modelData+1)
                }
            }
            Component.onCompleted: background.visible = true
        }
    }

    Controls.Dialog {
        id: switchListDialog
        modal: true
        focus: true
        x: (page.width - width) / 2
        y: page.height / 2 - height
        width: Math.min(page.width - Kirigami.Units.gridUnit * 4, Kirigami.Units.gridUnit * 20)
        height: Kirigami.Units.gridUnit * 20
        standardButtons: Controls.Dialog.Close
        title: qsTr("Radio List Items")

        contentItem: Controls.ScrollView {
            ListView {
                model: 20
                delegate: Controls.SwitchDelegate {
                    width: parent.width
                    text: qsTr("Delegate") + " " + (modelData+1)
                }
            }
            Component.onCompleted: background.visible = true
        }
    }

Marco Martin's avatar
Marco Martin committed
126
127
128
129
130
131
132
133
134
135
136
137
138
    Kirigami.FormLayout {
        Item {
            Kirigami.FormData.label: qsTr("Checkboxes")
            Kirigami.FormData.isSection: true
        }
        Controls.CheckBox {
            text: qsTr("Item selected")
            checked: true
        }
        Controls.CheckBox {
            text: qsTr("Item not selected")
            checked: false
        }
139
140
141
142
        Controls.Button {
            text: qsTr("Checkable List View")
            onClicked: checkListDialog.open()
        }
Marco Martin's avatar
Marco Martin committed
143
144
145
146
147

        Kirigami.Separator {
            Kirigami.FormData.isSection: true
            Kirigami.FormData.label: qsTr("Radio buttons")
        }
Marco Martin's avatar
Marco Martin committed
148
149
150
151
152
153
154
155
156
        ColumnLayout {
            Controls.RadioButton {
                text: qsTr("Item selected")
                checked: true
            }
            Controls.RadioButton {
                text: qsTr("Item not selected")
                checked: false
            }
Marco Martin's avatar
Marco Martin committed
157
        }
158
159
160
161
        Controls.Button {
            text: qsTr("Radio List View")
            onClicked: radioListDialog.open()
        }
Marco Martin's avatar
Marco Martin committed
162
163
164
165
166
167
168
169
170
171
172
173
174

        Kirigami.Separator {
            Kirigami.FormData.isSection: true
            Kirigami.FormData.label: qsTr("Switches")
        }
        Controls.Switch {
            text: qsTr("Item selected")
            checked: true
        }
        Controls.Switch {
            text: qsTr("Item not selected")
            checked: false
        }
175
176
177
178
        Controls.Button {
            text: qsTr("Switch List View")
            onClicked: switchListDialog.open()
        }
Marco Martin's avatar
Marco Martin committed
179
180
    }
}