1import{_ as o}from"./DocsShell.40850a67.js";import{a,c as s,w as i,o as r,j as t,k as e}from"./entry.0e9eab69.js";import"./topics.964b6b25.js";const c={},l=e("h2",null,"Getting Started",-1),h=e("div",{class:"qux-help-content-paragraph"},[e("h3",null,"Overview"),t(" A prototype consists out of the screens in which you can place widgets. Widgets are the basic building blocks of your design, but in contrast to most other prototyping tools, they are fully functional. This means users can toggle a checkbox or enter data into a text field. Quant-UX canvas has three main views on a prototype. "),e("ol",null,[e("li",null,[t(" The "),e("b",null,"Design"),t(" view allows you to create the visual aspect of your prototype. You can add screens and widgets and change the appearance. ")]),e("li",null,[t(" The "),e("b",null,"Prototype"),t(" view defines the interaction between the screens and elements. In the prototype view, you can see and create the links between the screens. You can also customize certain dynamic properties of input element, e.g. form validation and data binding. ")]),e("li",null,[t(" In the "),e("b",null,"Low Code"),t(" view, you can define properties that are important for turning the prototype into a working application. ")])]),t(" You can define screen transitions that link the screens together. A transition is triggered when the user performs a certain action, for instance, clicks on a button or performs a screen gesture. ")],-1),u=e("div",{class:"qux-help-content-paragraph"},[e("h3",null,"Screens"),t(" To create a screen, press "),e("strong",null,"S"),t(" or click the "),e("span",{class:"mdi mdi-cellphone"}),t(" icon. You can place the screen freely on the canvas. Once you have placed the screen, click on it to select it. On the right property panel, you can now configure the screen name, the background (color or image). You can also set a screen to be an overlay. This means, that the screen will be rendered on top of another screens. This is for instance useful if you want to build modal dialogs. ")],-1),p=e("div",{class:"qux-help-content-paragraph"},[e("h3",null,"Widgets"),t(" Quant-UX comes with a rich selection of functional widgets. You can create a widget by pressing "),e("strong",null,"W"),t(" or selecting "),e("span",{class:"mdi mdi-puzzle-outline"}),t(" icon. To create the most common widgets, you can also use the "),e("strong",null,"R"),t(" (Rectangle), "),e("strong",null,"T"),t(" (Text) or "),e("strong",null,"H"),t(" (Hotspot) shortcuts. To select a widget, simply click on it. The property panel will show up, and you can configure the visual appearance of the widget. In addition, you can configure certain properties, for instance the entries in a dropdown box. ")],-1),d=e("div",{class:"qux-help-content-paragraph"},[e("h3",null,"Links"),t(" To create a screen transition, you have to link a source (widget or screen) to a target screen. Change to the "),e("strong",null,"Prototype"),t(" view and select the widget (or screen) and press the "),e("strong",null,"L"),t(" or click on the "),e("span",{class:"qux-help-button"},"Add Action"),t(" button in the properties panel. Now you can select the target screen. Once you have created a link the Add Action button will disappear in the properties panel, and you can configure certain properties of the link, for instance the animation and the user event that should trigger the screen transition. For screens, you can also create timed transitions to create splash screens. "),e("strong",null,"Hint:"),t(" To clean up the design, you can also place waypoints, by clicking on the canvas. ")],-1);function g(y,f){const n=o;return r(),s(n,null,{default:i(()=>[l,t(" Quant-UX is a prototyping tool to design, test and analyse your visual designs. To learn more, use the navigation on the right side. "),h,u,p,d]),_:1})}const _=a(c,[["render",g]]);export{_ as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.