1 files changed, 88 insertions, 0 deletions
diff --git a/doc/src/qtquick/qtquick-states.qdoc b/doc/src/qtquick/qtquick-states.qdoc
new file mode 100644
index 00000000000..80316aaa4fe
--- /dev/null
+++ b/doc/src/qtquick/qtquick-states.qdoc
@@ -0,0 +1,88 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Creator documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \contentspage {Qt Creator Manual}
+    \previouspage quick-connections-backend.html
+    \page quick-states.html
+    \nextpage quick-components.html
+
+    \title Adding States
+
+    User interfaces are designed to present different interface configurations
+    in different scenarios, or to modify their appearances in response to user
+    interaction. Often, there are a set of changes that are made concurrently,
+    such that the interface could be seen to be internally changing from one
+    \e state to another.
+
+    This applies generally to interfaces regardless of their complexity. A photo
+    viewer may initially present images in a grid, and when an image is clicked,
+    change to a detailed state where the individual image is expanded and the
+    interface is changed to present new options for image editing. At the other
+    end of the scale, when a button is pressed, it may change to a
+    \e pressed state in which its color and position are modified so that it
+    appears to be pressed down.
+
+    In QML, any item can change between different states to apply sets of
+    changes that modify the properties of relevant items. Each state can
+    present a different configuration that can, for example:
+
+    \list
+        \li Show some UI items and hide others.
+        \li Present different available actions to the user.
+        \li Start, stop or pause animations.
+        \li Execute some script required in the new state.
+        \li Change a property value for a particular item.
+        \li Show a different view or screen.
+    \endlist
+
+    The \uicontrol State pane displays the different \l{State}{states}
+    of the component in the Design mode. The \uicontrol State pane is
+    collapsed by default to save space. Select \uicontrol Expand in
+    the context menu to view the whole pane.
+
+    \image qmldesigner-transitions.png "State pane"
+
+    To add states, click the \inlineimage plus.png
+    button. Then modify the new state in the editor. For example, to change the
+    appearance of a button, you can hide the button image and show another image
+    in its place. Or, to add movement to the screen, you can change the position
+    of an object on the canvas and then add animation to the change between the
+    states.
+
+    To determine when the state should be applied, select
+    \uicontrol {Set when Condition} in the menu and specify a
+    \l [QtQuick]{State::when}{when} property for the state.
+
+    You can preview the states in the \uicontrol State pane and click them to
+    switch between states on the canvas.
+
+    For more information about using states, see \l{Creating Screens}.
+
+    If you add animation to the states, you can run the application to test the
+    animation.
+
+    For more information about adding animation, see \l{Animating Screens}.
+*/