diff options
Diffstat (limited to 'src/controls')
17 files changed, 249 insertions, 87 deletions
diff --git a/src/controls/doc/images/qtquickcontrols2-busyindicator-background.png b/src/controls/doc/images/qtquickcontrols2-busyindicator-background.png Binary files differnew file mode 100644 index 00000000..84cd2ed9 --- /dev/null +++ b/src/controls/doc/images/qtquickcontrols2-busyindicator-background.png diff --git a/src/controls/doc/images/qtquickcontrols2-busyindicator-indicator.png b/src/controls/doc/images/qtquickcontrols2-busyindicator-indicator.png Binary files differnew file mode 100644 index 00000000..87db05a1 --- /dev/null +++ b/src/controls/doc/images/qtquickcontrols2-busyindicator-indicator.png diff --git a/src/controls/doc/images/qtquickcontrols2-frame-background.png b/src/controls/doc/images/qtquickcontrols2-frame-background.png Binary files differnew file mode 100644 index 00000000..e09960fc --- /dev/null +++ b/src/controls/doc/images/qtquickcontrols2-frame-background.png diff --git a/src/controls/doc/images/qtquickcontrols2-frame-frame.png b/src/controls/doc/images/qtquickcontrols2-frame-frame.png Binary files differnew file mode 100644 index 00000000..bfdf9c1b --- /dev/null +++ b/src/controls/doc/images/qtquickcontrols2-frame-frame.png diff --git a/src/controls/doc/images/qtquickcontrols2-groupbox-background.png b/src/controls/doc/images/qtquickcontrols2-groupbox-background.png Binary files differnew file mode 100644 index 00000000..36e9aa0f --- /dev/null +++ b/src/controls/doc/images/qtquickcontrols2-groupbox-background.png diff --git a/src/controls/doc/images/qtquickcontrols2-groupbox-frame.png b/src/controls/doc/images/qtquickcontrols2-groupbox-frame.png Binary files differnew file mode 100644 index 00000000..11b075d7 --- /dev/null +++ b/src/controls/doc/images/qtquickcontrols2-groupbox-frame.png diff --git a/src/controls/doc/images/qtquickcontrols2-groupbox-label.png b/src/controls/doc/images/qtquickcontrols2-groupbox-label.png Binary files differnew file mode 100644 index 00000000..67ccb4c1 --- /dev/null +++ b/src/controls/doc/images/qtquickcontrols2-groupbox-label.png diff --git a/src/controls/doc/images/qtquickcontrols2-progressbar-background.png b/src/controls/doc/images/qtquickcontrols2-progressbar-background.png Binary files differindex 82070b8c..0fd77835 100644 --- a/src/controls/doc/images/qtquickcontrols2-progressbar-background.png +++ b/src/controls/doc/images/qtquickcontrols2-progressbar-background.png diff --git a/src/controls/doc/images/qtquickcontrols2-scrollbar-background.png b/src/controls/doc/images/qtquickcontrols2-scrollbar-background.png Binary files differnew file mode 100644 index 00000000..770f546c --- /dev/null +++ b/src/controls/doc/images/qtquickcontrols2-scrollbar-background.png diff --git a/src/controls/doc/images/qtquickcontrols2-scrollbar-handle.png b/src/controls/doc/images/qtquickcontrols2-scrollbar-handle.png Binary files differnew file mode 100644 index 00000000..aafa90a7 --- /dev/null +++ b/src/controls/doc/images/qtquickcontrols2-scrollbar-handle.png diff --git a/src/controls/doc/images/qtquickcontrols2-scrollindicator-background.png b/src/controls/doc/images/qtquickcontrols2-scrollindicator-background.png Binary files differnew file mode 100644 index 00000000..e8947aa0 --- /dev/null +++ b/src/controls/doc/images/qtquickcontrols2-scrollindicator-background.png diff --git a/src/controls/doc/images/qtquickcontrols2-scrollindicator-indicator.png b/src/controls/doc/images/qtquickcontrols2-scrollindicator-indicator.png Binary files differnew file mode 100644 index 00000000..9d969f16 --- /dev/null +++ b/src/controls/doc/images/qtquickcontrols2-scrollindicator-indicator.png diff --git a/src/controls/doc/images/qtquickcontrols2-toolbar-background.png b/src/controls/doc/images/qtquickcontrols2-toolbar-background.png Binary files differnew file mode 100644 index 00000000..28d4fd98 --- /dev/null +++ b/src/controls/doc/images/qtquickcontrols2-toolbar-background.png diff --git a/src/controls/doc/images/qtquickcontrols2-toolbar-frame.png b/src/controls/doc/images/qtquickcontrols2-toolbar-frame.png Binary files differnew file mode 100644 index 00000000..28d4fd98 --- /dev/null +++ b/src/controls/doc/images/qtquickcontrols2-toolbar-frame.png diff --git a/src/controls/doc/images/qtquickcontrols2-toolbutton-background.png b/src/controls/doc/images/qtquickcontrols2-toolbutton-background.png Binary files differnew file mode 100644 index 00000000..fd105fee --- /dev/null +++ b/src/controls/doc/images/qtquickcontrols2-toolbutton-background.png diff --git a/src/controls/doc/images/qtquickcontrols2-toolbutton-label.png b/src/controls/doc/images/qtquickcontrols2-toolbutton-label.png Binary files differnew file mode 100644 index 00000000..7aae8dc8 --- /dev/null +++ b/src/controls/doc/images/qtquickcontrols2-toolbutton-label.png 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 */ |
