diff options
Diffstat (limited to 'src/quickcontrols/doc/src/qtquickcontrols-buttons.qdoc')
| -rw-r--r-- | src/quickcontrols/doc/src/qtquickcontrols-buttons.qdoc | 167 |
1 files changed, 167 insertions, 0 deletions
diff --git a/src/quickcontrols/doc/src/qtquickcontrols-buttons.qdoc b/src/quickcontrols/doc/src/qtquickcontrols-buttons.qdoc new file mode 100644 index 0000000000..fac1e7bad5 --- /dev/null +++ b/src/quickcontrols/doc/src/qtquickcontrols-buttons.qdoc @@ -0,0 +1,167 @@ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +/*! + \page qtquickcontrols-buttons.html + \title Button Controls + \ingroup qtquickcontrols-guidelines + \brief Guidelines for button controls + + Qt Quick Controls offers a selection of button-like controls. + + \annotatedlist qtquickcontrols-buttons + + Each type of button has its own specific use case. The following + sections offer guidelines for choosing the appropriate type of button, + depending on the use case. + + \section1 Button Control + + \l Button is a clickable control that starts an action, or opens or + closes a popup. A button usually has a text label but it can also + contain an icon. + + Button is a very suitable control when a popup or dialog needs + to perform an action. The most common examples are Apply, Cancel, + Save, Close and Help. + + \image qtquickcontrols-button.gif + + Recommendations: + + \list + \li The button's text should be a verb describing the action, or a noun matching + the title of the popup that will be opened. + \li Don't use a button to set state. \l Switch is more suitable for that. + \li Use the default font unless you have UI guidelines specifying otherwise. + \li If the text is localized, consider the influence of a longer text on the layout. + \endlist + + \b {See also} \l Button and \l AbstractButton + + \section1 CheckBox Control + + \image qtquickcontrols-checkbox.gif + + \l CheckBox is used to build multi-selection option lists. Any number of + options can be selected, including none, but the options should + not be mutually exclusive. + + Use a single CheckBox for a yes/no choice, such as when you have + to accept the terms of service agreement in a form. + + For a single yes/no choice, it is also possible to use a switch. If the choice + concerns an option, it is best to use a CheckBox. If it concerns action to + be taken, a switch is recommended. + + When options can be grouped, you can use a partially checked CheckBox to + represent the whole group. Use the checkbox's + \l {CheckBox::checkState}{partially checked state} when a user selects + some, but not all, sub-items in the group. + + The three availables check states are: checked, partially checked and + unchecked. + + The checkable options are often listed vertically. + + Recommendations: + \list + \li The checkbox label should be a statement that the check mark makes true, + and that the absence of a check mark makes false. + \li The checkbox label should not contain a negative statement. + \li Use the default font, unless you have UI guidelines specifying otherwise. + \li If the text is localized, consider the influence of a longer text on the layout. + \endlist + + \b {See also} \l CheckBox + + \section1 DelayButton Control + + \l DelayButton is a button that incorporates a delay before triggering an action. + This delay prevents accidental presses. + + \image qtquickcontrols-delaybutton.gif + + Recommendations: + \list + \li Use in touch user interfaces. + \li Use for actions that must be triggered with care. + \endlist + + \b {See also} \l Button and \l AbstractButton + + \section1 RadioButton Control + + \image qtquickcontrols-radiobutton.gif + + \l RadioButton is used to select only one option from a set of options. + Selecting one option automatically deselects the one selected before. + + If there are only two mutually exclusive options, combine them into a + single checkbox or a switch. + + Recommendations: + + \list + \li Limit the label text to one line. + \li Ensure that a sensible default option is checked. + \li List RadioButton options vertically. + \li If the text is localized, consider the influence of a longer text on the layout. + \li Use the default font, unless you have UI guidelines that specify otherwise. + \li Just like with CheckBox, do not make the list too large. + \li In order to avoid confusion, do not put two groups of radio buttons next to each + other. + \endlist + + \b {See also} \l RadioButton + + \section1 RoundButton Control + + \l RoundButton is a clickable control that starts an action, or opens or + closes a popup. A round button with a square image icon or one-letter font + icon is circular. A circular RoundButton takes less space than a normal + \l Button, and can also be used as a floating action button. + + \image qtquickcontrols-roundbutton.png + + Recommendations: + + \list + \li Keep labels short and concise. + \li If the text is localized, consider the influence of a longer text on the layout. + \endlist + + \b {See also} \l RoundButton + + \section1 Switch Control + + \image qtquickcontrols-switch.png + + \l Switch represents a physical switch that allows users to choose between an "on" + or "off" state. + Use a switch for binary operations that take effect immediately after it has been + switched on. For example, a switch to turn WIFI on or off. + + Recommendations: + + \list + \li Keep labels short and concise. + \li If the text is localized, consider the influence of a longer text on the layout. + \endlist + + \b {See also} \l Switch + + \section1 ToolButton Control + + \image qtquickcontrols-toolbutton.png + + \l ToolButton is nearly identical to \l Button, but it has a graphical + appearance that makes it more suitable for insertion into a \l ToolBar. + + \b {See also} \l ToolButton + + \section1 Related Information + \list + \li \l {Qt Quick Controls Guidelines} + \endlist +*/ |