From a7a5cf66eeee8754e9a8e156396d1540fc2c2c85 Mon Sep 17 00:00:00 2001 From: J-P Nurmi Date: Tue, 23 Jun 2015 13:21:14 +0200 Subject: Docs: Customizing Qt Quick Controls 2 Change-Id: I6fa85e9fa9a2f7c98ec751786271a60c6c050db5 Reviewed-by: J-P Nurmi --- .../qtquickcontrols2-busyindicator-background.png | Bin 0 -> 3919 bytes .../qtquickcontrols2-busyindicator-indicator.png | Bin 0 -> 3810 bytes .../images/qtquickcontrols2-frame-background.png | Bin 0 -> 505 bytes .../doc/images/qtquickcontrols2-frame-frame.png | Bin 0 -> 410 bytes .../qtquickcontrols2-groupbox-background.png | Bin 0 -> 2683 bytes .../doc/images/qtquickcontrols2-groupbox-frame.png | Bin 0 -> 2582 bytes .../doc/images/qtquickcontrols2-groupbox-label.png | Bin 0 -> 2637 bytes .../qtquickcontrols2-progressbar-background.png | Bin 116 -> 244 bytes .../qtquickcontrols2-scrollbar-background.png | Bin 0 -> 268 bytes .../images/qtquickcontrols2-scrollbar-handle.png | Bin 0 -> 247 bytes ...qtquickcontrols2-scrollindicator-background.png | Bin 0 -> 149 bytes .../qtquickcontrols2-scrollindicator-indicator.png | Bin 0 -> 121 bytes .../images/qtquickcontrols2-toolbar-background.png | Bin 0 -> 185 bytes .../doc/images/qtquickcontrols2-toolbar-frame.png | Bin 0 -> 185 bytes .../qtquickcontrols2-toolbutton-background.png | Bin 0 -> 2171 bytes .../images/qtquickcontrols2-toolbutton-label.png | Bin 0 -> 2156 bytes .../doc/src/qtquickcontrols2-customize.qdoc | 336 +++++++++++++++------ src/imports/calendar/CalendarView.qml | 2 + src/imports/calendar/DayOfWeekRow.qml | 2 + src/imports/calendar/WeekNumberColumn.qml | 2 + src/imports/controls/BusyIndicator.qml | 2 + src/imports/controls/Frame.qml | 4 + src/imports/controls/GroupBox.qml | 6 + src/imports/controls/PageIndicator.qml | 2 + src/imports/controls/ScrollBar.qml | 2 + src/imports/controls/ScrollIndicator.qml | 2 + src/imports/controls/StackView.qml | 8 + src/imports/controls/TabBar.qml | 4 + src/imports/controls/TabButton.qml | 4 + src/imports/controls/TextArea.qml | 2 + src/imports/controls/ToolBar.qml | 4 + src/imports/controls/ToolButton.qml | 4 + src/imports/extras/Drawer.qml | 2 + src/imports/extras/SwipeView.qml | 2 + 34 files changed, 303 insertions(+), 87 deletions(-) create mode 100644 src/controls/doc/images/qtquickcontrols2-busyindicator-background.png create mode 100644 src/controls/doc/images/qtquickcontrols2-busyindicator-indicator.png create mode 100644 src/controls/doc/images/qtquickcontrols2-frame-background.png create mode 100644 src/controls/doc/images/qtquickcontrols2-frame-frame.png create mode 100644 src/controls/doc/images/qtquickcontrols2-groupbox-background.png create mode 100644 src/controls/doc/images/qtquickcontrols2-groupbox-frame.png create mode 100644 src/controls/doc/images/qtquickcontrols2-groupbox-label.png create mode 100644 src/controls/doc/images/qtquickcontrols2-scrollbar-background.png create mode 100644 src/controls/doc/images/qtquickcontrols2-scrollbar-handle.png create mode 100644 src/controls/doc/images/qtquickcontrols2-scrollindicator-background.png create mode 100644 src/controls/doc/images/qtquickcontrols2-scrollindicator-indicator.png create mode 100644 src/controls/doc/images/qtquickcontrols2-toolbar-background.png create mode 100644 src/controls/doc/images/qtquickcontrols2-toolbar-frame.png create mode 100644 src/controls/doc/images/qtquickcontrols2-toolbutton-background.png create mode 100644 src/controls/doc/images/qtquickcontrols2-toolbutton-label.png diff --git a/src/controls/doc/images/qtquickcontrols2-busyindicator-background.png b/src/controls/doc/images/qtquickcontrols2-busyindicator-background.png new file mode 100644 index 00000000..84cd2ed9 Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-busyindicator-background.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-busyindicator-indicator.png b/src/controls/doc/images/qtquickcontrols2-busyindicator-indicator.png new file mode 100644 index 00000000..87db05a1 Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-busyindicator-indicator.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-frame-background.png b/src/controls/doc/images/qtquickcontrols2-frame-background.png new file mode 100644 index 00000000..e09960fc Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-frame-background.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-frame-frame.png b/src/controls/doc/images/qtquickcontrols2-frame-frame.png new file mode 100644 index 00000000..bfdf9c1b Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-frame-frame.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-groupbox-background.png b/src/controls/doc/images/qtquickcontrols2-groupbox-background.png new file mode 100644 index 00000000..36e9aa0f Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-groupbox-background.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-groupbox-frame.png b/src/controls/doc/images/qtquickcontrols2-groupbox-frame.png new file mode 100644 index 00000000..11b075d7 Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-groupbox-frame.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-groupbox-label.png b/src/controls/doc/images/qtquickcontrols2-groupbox-label.png new file mode 100644 index 00000000..67ccb4c1 Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-groupbox-label.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-progressbar-background.png b/src/controls/doc/images/qtquickcontrols2-progressbar-background.png index 82070b8c..0fd77835 100644 Binary files a/src/controls/doc/images/qtquickcontrols2-progressbar-background.png and b/src/controls/doc/images/qtquickcontrols2-progressbar-background.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-scrollbar-background.png b/src/controls/doc/images/qtquickcontrols2-scrollbar-background.png new file mode 100644 index 00000000..770f546c Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-scrollbar-background.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-scrollbar-handle.png b/src/controls/doc/images/qtquickcontrols2-scrollbar-handle.png new file mode 100644 index 00000000..aafa90a7 Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-scrollbar-handle.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-scrollindicator-background.png b/src/controls/doc/images/qtquickcontrols2-scrollindicator-background.png new file mode 100644 index 00000000..e8947aa0 Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-scrollindicator-background.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-scrollindicator-indicator.png b/src/controls/doc/images/qtquickcontrols2-scrollindicator-indicator.png new file mode 100644 index 00000000..9d969f16 Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-scrollindicator-indicator.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-toolbar-background.png b/src/controls/doc/images/qtquickcontrols2-toolbar-background.png new file mode 100644 index 00000000..28d4fd98 Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-toolbar-background.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-toolbar-frame.png b/src/controls/doc/images/qtquickcontrols2-toolbar-frame.png new file mode 100644 index 00000000..28d4fd98 Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-toolbar-frame.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-toolbutton-background.png b/src/controls/doc/images/qtquickcontrols2-toolbutton-background.png new file mode 100644 index 00000000..fd105fee Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-toolbutton-background.png differ diff --git a/src/controls/doc/images/qtquickcontrols2-toolbutton-label.png b/src/controls/doc/images/qtquickcontrols2-toolbutton-label.png new file mode 100644 index 00000000..7aae8dc8 Binary files /dev/null and b/src/controls/doc/images/qtquickcontrols2-toolbutton-label.png differ diff --git a/src/controls/doc/src/qtquickcontrols2-customize.qdoc b/src/controls/doc/src/qtquickcontrols2-customize.qdoc index be6fc368..0500a085 100644 --- a/src/controls/doc/src/qtquickcontrols2-customize.qdoc +++ b/src/controls/doc/src/qtquickcontrols2-customize.qdoc @@ -36,177 +36,339 @@ implementations of various items. These can be used as a starting point to implement custom look'n'feel. + + \section1 Customizing BusyIndicator + + BusyIndicator consists of two visual items: \l {Control::background}{background} + and \l {BusyIndicator::indicator}{indicator}. + + \section3 Background + + \image qtquickcontrols2-busyindicator-background.png + + BusyIndicator has no background item by default. + + \section3 Indicator + + \image qtquickcontrols2-busyindicator-indicator.png + + \snippet BusyIndicator.qml indicator + + \section1 Customizing Button - Button consists of two parts: \l {Control::background}{background} and - \l {Button::label}{label}. Their implicit sizes are used to calculate - the implicit size of the control. + Button consists of two visual items: \l {Control::background}{background} + and \l {Button::label}{label}. + + \section3 Background - \section3 Background + \image qtquickcontrols2-button-background.png - \image qtquickcontrols2-button-background.png + \snippet Button.qml background - \snippet Button.qml background + \section3 Label - \section3 Label + \image qtquickcontrols2-button-label.png - \image qtquickcontrols2-button-label.png + \snippet Button.qml label - \snippet Button.qml label \section1 Customizing CheckBox - CheckBox consists of three parts: \l {Control::background}{background}, - \l {Button::label}{label} and \l {Checkable::indicator}{indicator}. Their - implicit sizes are used to calculate the implicit size of the control. + CheckBox consists of three visual items: \l {Control::background}{background}, + \l {Button::label}{label} and \l {Checkable::indicator}{indicator}. + + \section3 Background + + \image qtquickcontrols2-checkbox-background.png + + CheckBox has no background item by default. + + \section3 Label + + \image qtquickcontrols2-checkbox-label.png + + \snippet CheckBox.qml label + + \section3 Indicator + + \image qtquickcontrols2-checkbox-indicator.png + + \snippet CheckBox.qml indicator + + + \section1 Customizing Frame + + Frame consists of two visual items: \l {Control::background}{background} + and \l {Frame::frame}{frame}. - \section3 Background + \section3 Background - \image qtquickcontrols2-checkbox-background.png + \image qtquickcontrols2-frame-background.png - CheckBox has no background item by default. + Frame has no background item by default. - \section3 Label + \section3 Frame - \image qtquickcontrols2-checkbox-label.png + \image qtquickcontrols2-frame-frame.png - \snippet CheckBox.qml label + \snippet Frame.qml frame - \section3 Indicator - \image qtquickcontrols2-checkbox-indicator.png + \section1 Customizing GroupBox + + GroupBox consists of three visual items: \l {Control::background}{background}, + \l {Frame::frame}{frame} and \l {GroupBox::label}{label}. + + \section3 Background + + \image qtquickcontrols2-groupbox-background.png + + GroupBox has no background item by default. + + \section3 Frame + + \image qtquickcontrols2-groupbox-frame.png + + \snippet GroupBox.qml frame + + \section3 Label + + \image qtquickcontrols2-groupbox-label.png + + \snippet GroupBox.qml label + + + \section1 Customizing Label + + TODO + + + \section1 Customizing PageIndicator + + TODO - \snippet CheckBox.qml indicator \section1 Customizing ProgressBar - ProgressBar consists of two parts: \l {Control::background}{background} - and \l {ProgressBar::indicator}{indicator}. Their implicit sizes are used - to calculate the implicit size of the control. + ProgressBar consists of two visual items: \l {Control::background}{background} + and \l {ProgressBar::indicator}{indicator}. + + \section3 Background - \section3 Background + \image qtquickcontrols2-progressbar-background.png - \image qtquickcontrols2-progressbar-background.png + \snippet ProgressBar.qml background - \snippet ProgressBar.qml background + \section3 Indicator - \section3 Indicator + \image qtquickcontrols2-progressbar-indicator.png - \image qtquickcontrols2-progressbar-indicator.png + \snippet ProgressBar.qml indicator - \snippet ProgressBar.qml indicator \section1 Customizing RadioButton - RadioButton consists of three parts: \l {Control::background}{background}, - \l {Button::label}{label} and \l {Checkable::indicator}{indicator}. Their - implicit sizes are used to calculate the implicit size of the control. + RadioButton consists of three visual items: \l {Control::background}{background}, + \l {Button::label}{label} and \l {Checkable::indicator}{indicator}. + + \section3 Background + + \image qtquickcontrols2-radiobutton-background.png + + RadioButton has no background item by default. + + \section3 Label + + \image qtquickcontrols2-radiobutton-label.png + + \snippet RadioButton.qml label - \section3 Background + \section3 Indicator - \image qtquickcontrols2-radiobutton-background.png + \image qtquickcontrols2-radiobutton-indicator.png - RadioButton has no background item by default. + \snippet RadioButton.qml indicator - \section3 Label - \image qtquickcontrols2-radiobutton-label.png + \section1 Customizing ScrollBar - \snippet RadioButton.qml label + ScrollBar consists of two visual items: \l {Control::background}{background} + and \l {ScrollBar::handle}{handle}. - \section3 Indicator + \section3 Background - \image qtquickcontrols2-radiobutton-indicator.png + \image qtquickcontrols2-scrollbar-background.png + + ScrollBar has no background item by default. + + \section3 Handle + + \image qtquickcontrols2-scrollbar-handle.png + + \snippet ScrollBar.qml handle + + + \section1 Customizing ScrollIndicator + + ScrollIndicator consists of two visual items: \l {Control::background}{background} + and \l {ScrollIndicator::indicator}{indicator}. + + \section3 Background + + \image qtquickcontrols2-scrollindicator-background.png + + ScrollIndicator has no background item by default. + + \section3 Indicator + + \image qtquickcontrols2-scrollindicator-indicator.png + + \snippet ScrollIndicator.qml indicator - \snippet RadioButton.qml indicator \section1 Customizing Slider - Slider consists of three parts: \l {Control::background}{background}, - \l {Slider::track}{track} and \l {Slider::handle}{handle}. Their - implicit sizes are used to calculate the implicit size of the control. + Slider consists of three visual items: \l {Control::background}{background}, + \l {Slider::track}{track} and \l {Slider::handle}{handle}. + + \section3 Background + + \image qtquickcontrols2-slider-background.png - \section3 Background + Slider has no background item by default. - \image qtquickcontrols2-slider-background.png + \section3 Track - Slider has no background item by default. + \image qtquickcontrols2-slider-track.png - \section3 Track + \snippet Slider.qml track - \image qtquickcontrols2-slider-track.png + \section3 Handle - \snippet Slider.qml track + \image qtquickcontrols2-slider-handle.png - \section3 Handle + \snippet Slider.qml handle - \image qtquickcontrols2-slider-handle.png - \snippet Slider.qml handle + \section1 Customizing StackView + + TODO + \section1 Customizing Switch - Switch consists of three parts: \l {Control::background}{background}, - \l {Button::label}{label} and \l {Checkable::indicator}{indicator}. Their - implicit sizes are used to calculate the implicit size of the control. + Switch consists of three visual items: \l {Control::background}{background}, + \l {Button::label}{label} and \l {Checkable::indicator}{indicator}. + + \section3 Background + + \image qtquickcontrols2-switch-background.png + + Switch has no background item by default. + + \section3 Label + + \image qtquickcontrols2-switch-label.png + + \snippet Switch.qml label - \section3 Background + \section3 Indicator - \image qtquickcontrols2-switch-background.png + \image qtquickcontrols2-switch-indicator.png - Switch has no background item by default. + \snippet Switch.qml indicator - \section3 Label - \image qtquickcontrols2-switch-label.png + \section1 Customizing TabBar - \snippet Switch.qml label + TODO - \section3 Indicator - \image qtquickcontrols2-switch-indicator.png + \section1 Customizing TabButton + + TODO + + + \section1 Customizing TextArea + + TODO - \snippet Switch.qml indicator \section1 Customizing TextField - TextField consists of two parts: \l {TextField::background}{background} - and \l {TextField::placeholder}{placeholder}. Their implicit sizes are - used to calculate the implicit size of the control. + TextField consists of two visual items: \l {TextField::background}{background} + and \l {TextField::placeholder}{placeholder}. + + \section3 Background - \section3 Background + \image qtquickcontrols2-textfield-background.png - \image qtquickcontrols2-textfield-background.png + \snippet TextField.qml background - \snippet TextField.qml background + \section3 Placeholder - \section3 Placeholder + \image qtquickcontrols2-textfield-placeholder.png - \image qtquickcontrols2-textfield-placeholder.png + \snippet TextField.qml placeholder - \snippet TextField.qml placeholder \section1 Customizing ToggleButton - ToggleButton consists of three parts: \l {Control::background}{background}, - \l {Button::label}{label} and \l {Checkable::indicator}{indicator}. Their - implicit sizes are used to calculate the implicit size of the control. + ToggleButton consists of three visual items: \l {Control::background}{background}, + \l {Button::label}{label} and \l {Checkable::indicator}{indicator}. + + \section3 Background + + \image qtquickcontrols2-togglebutton-background.png + + ToggleButton has no background item by default. + + \section3 Label + + \image qtquickcontrols2-togglebutton-label.png + + \snippet ToggleButton.qml label + + \section3 Indicator + + \image qtquickcontrols2-togglebutton-indicator.png + + \snippet ToggleButton.qml indicator + + + \section1 Customizing ToolBar + + ToolBar consists of two visual items: \l {Control::background}{background} and + \l {Frame::frame}{frame}. + + \section3 Background + + \image qtquickcontrols2-toolbar-background.png + + \snippet ToolBar.qml background + + \section3 Frame + + \image qtquickcontrols2-toolbar-frame.png + + ToggleButton has no frame item by default. - \section3 Background - \image qtquickcontrols2-togglebutton-background.png + \section1 Customizing ToolButton - ToggleButton has no background item by default. + ToolButton consists of two visual items: \l {Control::background}{background} + and \l {ToolButton::label}{label}. - \section3 Label + \section3 Background - \image qtquickcontrols2-togglebutton-label.png + \image qtquickcontrols2-toolbutton-background.png - \snippet ToggleButton.qml label + \snippet ToolButton.qml background - \section3 Indicator + \section3 Label - \image qtquickcontrols2-togglebutton-indicator.png + \image qtquickcontrols2-toolbutton-label.png - \snippet ToggleButton.qml indicator + \snippet ToolButton.qml label */ diff --git a/src/imports/calendar/CalendarView.qml b/src/imports/calendar/CalendarView.qml index b13c1b52..aac2ec9c 100644 --- a/src/imports/calendar/CalendarView.qml +++ b/src/imports/calendar/CalendarView.qml @@ -57,6 +57,7 @@ AbstractCalendarView { Accessible.name: title + //! [contentItem] contentItem: Grid { id: grid @@ -69,4 +70,5 @@ AbstractCalendarView { delegate: control.delegate } } + //! [contentItem] } diff --git a/src/imports/calendar/DayOfWeekRow.qml b/src/imports/calendar/DayOfWeekRow.qml index c351dd97..e4cb2b91 100644 --- a/src/imports/calendar/DayOfWeekRow.qml +++ b/src/imports/calendar/DayOfWeekRow.qml @@ -59,6 +59,7 @@ AbstractDayOfWeekRow { topPadding: Theme.padding bottomPadding: Theme.padding + //! [contentItem] contentItem: Row { id: row @@ -67,4 +68,5 @@ AbstractDayOfWeekRow { delegate: control.delegate } } + //! [contentItem] } diff --git a/src/imports/calendar/WeekNumberColumn.qml b/src/imports/calendar/WeekNumberColumn.qml index a396d645..0e2dd505 100644 --- a/src/imports/calendar/WeekNumberColumn.qml +++ b/src/imports/calendar/WeekNumberColumn.qml @@ -59,6 +59,7 @@ AbstractWeekNumberColumn { leftPadding: Theme.padding rightPadding: Theme.padding + //! [contentItem] contentItem: Column { id: column @@ -67,4 +68,5 @@ AbstractWeekNumberColumn { delegate: control.delegate } } + //! [contentItem] } diff --git a/src/imports/controls/BusyIndicator.qml b/src/imports/controls/BusyIndicator.qml index cf92809f..3c37a27f 100644 --- a/src/imports/controls/BusyIndicator.qml +++ b/src/imports/controls/BusyIndicator.qml @@ -47,6 +47,7 @@ AbstractBusyIndicator { padding: Theme.padding + //! [indicator] indicator: Item { id: delegate implicitWidth: 48 @@ -77,4 +78,5 @@ AbstractBusyIndicator { } } } + //! [indicator] } diff --git a/src/imports/controls/Frame.qml b/src/imports/controls/Frame.qml index 7580fb06..f721f974 100644 --- a/src/imports/controls/Frame.qml +++ b/src/imports/controls/Frame.qml @@ -48,8 +48,11 @@ AbstractFrame { padding: Theme.padding + //! [contentItem] contentItem: Item { } + //! [contentItem] + //! [frame] frame: Rectangle { width: parent.width height: parent.height @@ -58,4 +61,5 @@ AbstractFrame { radius: control.Theme.roundness border.color: control.Theme.frameColor } + //! [frame] } diff --git a/src/imports/controls/GroupBox.qml b/src/imports/controls/GroupBox.qml index c52af3ae..d9a8ea6a 100644 --- a/src/imports/controls/GroupBox.qml +++ b/src/imports/controls/GroupBox.qml @@ -49,8 +49,11 @@ AbstractGroupBox { padding: Theme.padding topPadding: Theme.padding + (label && title ? label.implicitHeight + Theme.spacing : 0) + //! [contentItem] contentItem: Item { } + //! [contentItem] + //! [label] label: Text { x: control.leftPadding width: control.availableWidth @@ -61,7 +64,9 @@ AbstractGroupBox { horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter } + //! [label] + //! [frame] frame: Rectangle { y: control.topPadding - control.Theme.padding width: parent.width @@ -71,4 +76,5 @@ AbstractGroupBox { radius: control.Theme.roundness border.color: control.Theme.frameColor } + //! [frame] } diff --git a/src/imports/controls/PageIndicator.qml b/src/imports/controls/PageIndicator.qml index 4cc90487..bb6d59e2 100644 --- a/src/imports/controls/PageIndicator.qml +++ b/src/imports/controls/PageIndicator.qml @@ -62,6 +62,7 @@ AbstractPageIndicator { padding: Theme.padding + //! [contentItem] contentItem: Row { id: row @@ -72,4 +73,5 @@ AbstractPageIndicator { delegate: control.delegate } } + //! [contentItem] } diff --git a/src/imports/controls/ScrollBar.qml b/src/imports/controls/ScrollBar.qml index 8f928d0c..51d74c7c 100644 --- a/src/imports/controls/ScrollBar.qml +++ b/src/imports/controls/ScrollBar.qml @@ -50,6 +50,7 @@ AbstractScrollBar { padding: 2 + //! [handle] handle: Rectangle { id: handle @@ -81,4 +82,5 @@ AbstractScrollBar { } } } + //! [handle] } diff --git a/src/imports/controls/ScrollIndicator.qml b/src/imports/controls/ScrollIndicator.qml index 71a50ebd..4ad989f6 100644 --- a/src/imports/controls/ScrollIndicator.qml +++ b/src/imports/controls/ScrollIndicator.qml @@ -49,6 +49,7 @@ AbstractScrollIndicator { padding: 2 + //! [indicator] indicator: Rectangle { id: indicator @@ -81,4 +82,5 @@ AbstractScrollIndicator { } ] } + //! [indicator] } diff --git a/src/imports/controls/StackView.qml b/src/imports/controls/StackView.qml index 396778b7..91df6420 100644 --- a/src/imports/controls/StackView.qml +++ b/src/imports/controls/StackView.qml @@ -40,19 +40,27 @@ import QtQuick.Controls 2.0 AbstractStackView { id: root + //! [popEnter] popEnter: Transition { NumberAnimation { property: "x"; from: -root.width; to: 0; duration: 400; easing.type: Easing.OutCubic } } + //! [popEnter] + //! [popExit] popExit: Transition { NumberAnimation { property: "x"; from: 0; to: root.width; duration: 400; easing.type: Easing.OutCubic } } + //! [popExit] + //! [pushEnter] pushEnter: Transition { NumberAnimation { property: "x"; from: root.width; to: 0; duration: 400; easing.type: Easing.OutCubic } } + //! [pushEnter] + //! [pushExit] pushExit: Transition { NumberAnimation { property: "x"; from: 0; to: -root.width; duration: 400; easing.type: Easing.OutCubic } } + //! [pushExit] } diff --git a/src/imports/controls/TabBar.qml b/src/imports/controls/TabBar.qml index 3b0f7bfd..02363935 100644 --- a/src/imports/controls/TabBar.qml +++ b/src/imports/controls/TabBar.qml @@ -49,6 +49,7 @@ AbstractTabBar { Accessible.role: Accessible.PageTabList + //! [contentItem] contentItem: ListView { id: listView @@ -73,7 +74,9 @@ AbstractTabBar { } } } + //! [contentItem] + //! [background] background: Rectangle { implicitWidth: 26 implicitHeight: 26 @@ -89,4 +92,5 @@ AbstractTabBar { color: control.Theme.frameColor } } + //! [background] } diff --git a/src/imports/controls/TabButton.qml b/src/imports/controls/TabButton.qml index 05182a60..2b9658be 100644 --- a/src/imports/controls/TabButton.qml +++ b/src/imports/controls/TabButton.qml @@ -52,6 +52,7 @@ AbstractTabButton { padding: Theme.padding + //! [label] label: Text { x: control.leftPadding y: control.topPadding @@ -65,10 +66,13 @@ AbstractTabButton { horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } + //! [label] + //! [background] background: Rectangle { height: parent.height - 1 implicitHeight: 26 color: control.Theme.backgroundColor } + //! [background] } diff --git a/src/imports/controls/TextArea.qml b/src/imports/controls/TextArea.qml index 1bd14bc0..b9b72559 100644 --- a/src/imports/controls/TextArea.qml +++ b/src/imports/controls/TextArea.qml @@ -50,6 +50,7 @@ AbstractTextArea { selectionColor: Theme.selectionColor selectedTextColor: Theme.selectedTextColor + //! [placeholder] placeholder: Text { x: control.leftPadding y: control.topPadding @@ -60,4 +61,5 @@ AbstractTextArea { opacity: control.Theme.disabledOpacity visible: !control.length } + //! [placeholder] } diff --git a/src/imports/controls/ToolBar.qml b/src/imports/controls/ToolBar.qml index f81ff916..0d5a5a16 100644 --- a/src/imports/controls/ToolBar.qml +++ b/src/imports/controls/ToolBar.qml @@ -48,10 +48,14 @@ AbstractToolBar { Accessible.role: Accessible.ToolBar + //! [contentItem] contentItem: Item { } + //! [contentItem] + //! [background] background: Rectangle { implicitHeight: 26 color: control.Theme.baseColor } + //! [background] } diff --git a/src/imports/controls/ToolButton.qml b/src/imports/controls/ToolButton.qml index 60e1671b..83d3eee2 100644 --- a/src/imports/controls/ToolButton.qml +++ b/src/imports/controls/ToolButton.qml @@ -51,6 +51,7 @@ AbstractButton { padding: Theme.padding + //! [label] label: Text { x: control.leftPadding y: control.topPadding @@ -63,7 +64,9 @@ AbstractButton { horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } + //! [label] + //! [background] background: Rectangle { implicitWidth: 26 implicitHeight: 26 @@ -72,4 +75,5 @@ AbstractButton { color: control.Theme.frameColor visible: control.pressed } + //! [background] } diff --git a/src/imports/extras/Drawer.qml b/src/imports/extras/Drawer.qml index a62a3d14..421cdc93 100644 --- a/src/imports/extras/Drawer.qml +++ b/src/imports/extras/Drawer.qml @@ -44,10 +44,12 @@ AbstractDrawer { width: parent.width // TODO: Window.width height: parent.height // TODO: Window.height + //! [background] background: Rectangle { color: control.Theme.shadowColor opacity: position * control.Theme.disabledOpacity } + //! [background] // TODO: make this a proper transition animation: SmoothedAnimation { diff --git a/src/imports/extras/SwipeView.qml b/src/imports/extras/SwipeView.qml index 6e88bcfc..da358c4e 100644 --- a/src/imports/extras/SwipeView.qml +++ b/src/imports/extras/SwipeView.qml @@ -49,6 +49,7 @@ AbstractSwipeView { Accessible.role: Accessible.PageTabList + //! [contentItem] contentItem: ListView { id: listView @@ -69,4 +70,5 @@ AbstractSwipeView { model: control.model } + //! [contentItem] } -- cgit v1.2.3