/usr/share/qt5/doc/qtquick/qml-qtquick-flipable.html is in qtdeclarative5-doc-html 5.9.5-0ubuntu1.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 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 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 | <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qquickflipable.cpp -->
<title>Flipable QML Type | Qt Quick 5.9</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.9</td><td ><a href="qtquick-index.html">Qt Quick</a></td><td ><a href="qtquick-qmlmodule.html">QML Types</a></td><td >Flipable QML Type</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right">Qt 5.9.5 Reference Documentation</td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#properties">Properties</a></li>
<li class="level1"><a href="#details">Detailed Description</a></li>
<li class="level2"><a href="#example-usage">Example Usage</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Flipable QML Type</h1>
<span class="subtitle"></span>
<!-- $$$Flipable-brief -->
<p>Provides a surface that can be flipped <a href="#details">More...</a></p>
<!-- @@@Flipable -->
<div class="table"><table class="alignedsummary">
<tr><td class="memItemLeft rightAlign topAlign"> Import Statement:</td><td class="memItemRight bottomAlign"> import QtQuick 2.7</td></tr><tr><td class="memItemLeft rightAlign topAlign"> Inherits:</td><td class="memItemRight bottomAlign"> <p><a href="qml-qtquick-item.html">Item</a></p>
</td></tr></table></div><ul>
<li><a href="qml-qtquick-flipable-members.html">List of all members, including inherited members</a></li>
</ul>
<a name="properties"></a>
<h2 id="properties">Properties</h2>
<ul>
<li class="fn"><b><b><a href="qml-qtquick-flipable.html#back-prop">back</a></b></b> : Item</li>
<li class="fn"><b><b><a href="qml-qtquick-flipable.html#front-prop">front</a></b></b> : Item</li>
<li class="fn"><b><b><a href="qml-qtquick-flipable.html#side-prop">side</a></b></b> : enumeration</li>
</ul>
<!-- $$$Flipable-description -->
<a name="details"></a>
<h2 id="details">Detailed Description</h2>
<p>Flipable is an item that can be visibly "flipped" between its front and back sides, like a card. It may used together with <a href="qml-qtquick-rotation.html">Rotation</a>, <a href="qml-qtquick-state.html">State</a> and <a href="qmlexampletoggleswitch.html#transition">Transition</a> types to produce a flipping effect.</p>
<p>The <a href="qml-qtquick-flipable.html#front-prop">front</a> and <a href="qml-qtquick-flipable.html#back-prop">back</a> properties are used to hold the items that are shown respectively on the front and back sides of the flipable item.</p>
<a name="example-usage"></a>
<h2 id="example-usage">Example Usage</h2>
<p>The following example shows a Flipable item that flips whenever it is clicked, rotating about the y-axis.</p>
<p>This flipable item has a <code>flipped</code> boolean property that is toggled whenever the <a href="qml-qtquick-mousearea.html">MouseArea</a> within the flipable is clicked. When <code>flipped</code> is true, the item changes to the "back" state; in this state, the <code>angle</code> of the <a href="qml-qtquick-rotation.html">Rotation</a> item is changed to 180 degrees to produce the flipping effect. When <code>flipped</code> is false, the item reverts to the default state, in which the <code>angle</code> value is 0.</p>
<pre class="qml">
import QtQuick 2.0
<span class="type"><a href="qml-qtquick-flipable.html">Flipable</a></span> {
<span class="name">id</span>: <span class="name">flipable</span>
<span class="name">width</span>: <span class="number">240</span>
<span class="name">height</span>: <span class="number">240</span>
property <span class="type">bool</span> <span class="name">flipped</span>: <span class="number">false</span>
<span class="name">front</span>: <span class="name">Image</span> { <span class="name">source</span>: <span class="string">"front.png"</span>; <span class="name">anchors</span>.centerIn: <span class="name">parent</span> }
<span class="name">back</span>: <span class="name">Image</span> { <span class="name">source</span>: <span class="string">"back.png"</span>; <span class="name">anchors</span>.centerIn: <span class="name">parent</span> }
<span class="name">transform</span>: <span class="name">Rotation</span> {
<span class="name">id</span>: <span class="name">rotation</span>
<span class="name">origin</span>.x: <span class="name">flipable</span>.<span class="name">width</span><span class="operator">/</span><span class="number">2</span>
<span class="name">origin</span>.y: <span class="name">flipable</span>.<span class="name">height</span><span class="operator">/</span><span class="number">2</span>
<span class="name">axis</span>.x: <span class="number">0</span>; <span class="name">axis</span>.y: <span class="number">1</span>; <span class="name">axis</span>.z: <span class="number">0</span> <span class="comment">// set axis.y to 1 to rotate around y-axis</span>
<span class="name">angle</span>: <span class="number">0</span> <span class="comment">// the default angle</span>
}
<span class="name">states</span>: <span class="name">State</span> {
<span class="name">name</span>: <span class="string">"back"</span>
<span class="type"><a href="qml-qtquick-propertychanges.html">PropertyChanges</a></span> { <span class="name">target</span>: <span class="name">rotation</span>; <span class="name">angle</span>: <span class="number">180</span> }
<span class="name">when</span>: <span class="name">flipable</span>.<span class="name">flipped</span>
}
<span class="name">transitions</span>: <span class="name">Transition</span> {
<span class="type"><a href="qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">target</span>: <span class="name">rotation</span>; <span class="name">property</span>: <span class="string">"angle"</span>; <span class="name">duration</span>: <span class="number">4000</span> }
}
<span class="type"><a href="qml-qtquick-mousearea.html">MouseArea</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">onClicked</span>: <span class="name">flipable</span>.<span class="name">flipped</span> <span class="operator">=</span> !<span class="name">flipable</span>.<span class="name">flipped</span>
}
}
</pre>
<p class="centerAlign"><img src="images/flipable.gif" alt="" /></p><p>The <a href="qmlexampletoggleswitch.html#transition">Transition</a> creates the animation that changes the angle over four seconds. When the item changes between its "back" and default states, the <a href="qml-qtquick-numberanimation.html">NumberAnimation</a> animates the angle between its old and new values.</p>
<p>See <a href="qtquick-statesanimations-states.html">Qt Quick States</a> for details on state changes and the default state, and <a href="qtquick-statesanimations-animations.html">Animation and Transitions in Qt Quick</a> for more information on how animations work within transitions.</p>
<p><b>See also </b><a href="qtquick-customitems-flipable-example.html">UI Components: Flipable Example</a>.</p>
<!-- @@@Flipable -->
<h2>Property Documentation</h2>
<!-- $$$back -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="back-prop">
<td class="tblQmlPropNode"><p>
<a name="back-prop"></a><span class="name">back</span> : <span class="type"><a href="qml-qtquick-item.html">Item</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>The front and back sides of the flipable.</p>
</div></div><!-- @@@back -->
<br/>
<!-- $$$front -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="front-prop">
<td class="tblQmlPropNode"><p>
<a name="front-prop"></a><span class="name">front</span> : <span class="type"><a href="qml-qtquick-item.html">Item</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>The front and back sides of the flipable.</p>
</div></div><!-- @@@front -->
<br/>
<!-- $$$side -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="side-prop">
<td class="tblQmlPropNode"><p>
<a name="side-prop"></a><span class="name">side</span> : <span class="type">enumeration</span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>The side of the Flipable currently visible. Possible values are <code>Flipable.Front</code> and <code>Flipable.Back</code>.</p>
</div></div><!-- @@@side -->
<br/>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2017 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
|