forked from eez-open/studio
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSpinbox.html
82 lines (82 loc) · 37.5 KB
/
Spinbox.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spinbox</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<style>
.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation{flex:1;padding:10px;background-color:var(--bs-body-bg);overflow:auto}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .markdown{margin-left:1rem}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_BodySection>div>div.markdown{margin-left:0}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_TitleEnclosure{padding-bottom:10px;border-bottom:1px solid #e0e0e0;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_TitleEnclosure .EezStudio_Component_Documentation_Title{display:flex;align-items:center;font-size:32px;border-radius:8px;padding:5px 15px;width:fit-content}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_TitleEnclosure .EezStudio_Component_Documentation_Title>div:first-child{display:inline-flex}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_TitleEnclosure .EezStudio_Component_Documentation_Title>div:first-child img,.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_TitleEnclosure .EezStudio_Component_Documentation_Title>div:first-child svg{height:36px;object-fit:contain}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_TitleEnclosure .EezStudio_Component_Documentation_Title>div:nth-child(2){padding-left:10px}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_TitleEnclosure .EezStudio_Component_Documentation_Title_ProjectTypes img,.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_TitleEnclosure .EezStudio_Component_Documentation_Title_ProjectTypes svg{margin-right:10px}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_TitleEnclosure .EezStudio_Component_Documentation_Title_ProjectTypes img:last_child,.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_TitleEnclosure .EezStudio_Component_Documentation_Title_ProjectTypes svg:last_child{margin-right:0}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_Body .EezStudio_Component_Documentation_BodySection{margin-bottom:15px}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_Body .EezStudio_Component_Documentation_BodySection>h2:first-child{font-size:12pt;font-weight:700;font-style:italic;text-transform:uppercase;color:#06c}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_Body .EezStudio_Component_Documentation_BodySection>div:nth-child(2){padding-left:1rem}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_Body .EezStudio_Component_Documentation_BodySection div>dl>dt{display:flex;margin-bottom:10px}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_Body .EezStudio_Component_Documentation_BodySection div>dl>dt h3{margin-top:0;margin-bottom:0;margin-right:20px;font-size:14px;line-height:var(--bs-body-line-height)}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_Body .EezStudio_Component_Documentation_BodySection div>dl>dt p{margin-bottom:0}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_Body .EezStudio_Component_Documentation_BodySection .EezStudio_Component_Documentation_Properties .EezStudio_Component_Documentation_PropertiesGroup{margin-bottom:1rem;border:1px solid #e0e0e0}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_Body .EezStudio_Component_Documentation_BodySection .EezStudio_Component_Documentation_Properties .EezStudio_Component_Documentation_PropertiesGroup h3{font-size:14px;font-weight:700;background-color:var(--bs-tertiary-bg);border-bottom:1px solid #e0e0e0;border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px);margin:0;padding:.8rem 1.25rem .5rem 0;text-transform:uppercase;cursor:pointer;display:flex;align-items:center}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_Body .EezStudio_Component_Documentation_BodySection .EezStudio_Component_Documentation_Properties .EezStudio_Component_Documentation_PropertiesGroup h3:before{content:"";display:block;width:24px;height:24px;margin-top:-3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewbox='0 0 24 24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath stroke='none' d='M0 0h24v24H0z'/%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") 0 0 repeat;transition-duration:250ms;transition-property:transform}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_Body .EezStudio_Component_Documentation_BodySection .EezStudio_Component_Documentation_Properties .EezStudio_Component_Documentation_PropertiesGroup.collapsed h3{background-color:var(--bs-body-bg);border-bottom:none}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_Body .EezStudio_Component_Documentation_BodySection .EezStudio_Component_Documentation_Properties .EezStudio_Component_Documentation_PropertiesGroup.collapsed h3:before{transform:rotate(-90deg)}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_Body .EezStudio_Component_Documentation_BodySection .EezStudio_Component_Documentation_Properties .EezStudio_Component_Documentation_PropertiesGroup.collapsed>dl{display:none}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_Body .EezStudio_Component_Documentation_BodySection .EezStudio_Component_Documentation_Properties .EezStudio_Component_Documentation_PropertiesGroup dl{margin:1rem 1.25rem}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_Body .EezStudio_Component_Documentation_BodySection .EezStudio_Component_Documentation_Properties .EezStudio_Component_Documentation_PropertiesGroup dl dt{display:flex;margin-bottom:10px}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_Body .EezStudio_Component_Documentation_BodySection .EezStudio_Component_Documentation_Properties .EezStudio_Component_Documentation_PropertiesGroup dl dt h4{margin-bottom:0;margin-top:0;margin-right:20px;font-size:14px;line-height:var(--bs-body-line-height)}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_Body .EezStudio_Component_Documentation_BodySection .EezStudio_Component_Documentation_Properties .EezStudio_Component_Documentation_PropertiesGroup dl dt p{margin-bottom:0}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_Body .EezStudio_Component_Documentation_BodySection .EezStudio_Component_Documentation_Properties .EezStudio_Component_Documentation_PropertiesGroup:last-child{margin-bottom:0}.EezStudio_DocumentationBrowser_Content_Help .EezStudio_Component_Documentation .EezStudio_Component_Documentation_Body .EezStudio_Component_Documentation_BodySection:last-child{margin-bottom:0}
</style>
<script id="component-doc-script">
function live(eventType, elementQuerySelector, cb) { document.addEventListener(eventType, function (event) { var qs = document.querySelectorAll(elementQuerySelector); if (qs) { var el = event.target, index = -1; while ( el && (index = Array.prototype.indexOf.call(qs, el)) === -1 ) { el = el.parentElement; } if (index > -1) { cb.call(el, event); } } }); } live( "click", ".EezStudio_Component_Documentation_PropertiesGroup h3", function (event) { event.preventDefault(); event.target.parentElement.classList.toggle("collapsed"); } );
</script>
</head>
<body>
<div class="EezStudio_DocumentationBrowser_Content_Help generateHTML"><div class="EezStudio_Component_Documentation"><div class="EezStudio_Component_Documentation_TitleEnclosure"><div class="EezStudio_Component_Documentation_Title"><div><svg viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.47 4.72a.75.75 0 0 1 1.06 0l3.75 3.75a.75.75 0 0 1-1.06 1.06L12 6.31 8.78 9.53a.75.75 0 0 1-1.06-1.06zm-3.75 9.75a.75.75 0 0 1 1.06 0L12 17.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-3.75 3.75a.75.75 0 0 1-1.06 0l-3.75-3.75a.75.75 0 0 1 0-1.06" fill="#0F172A"></path></svg></div><div>Spinbox</div></div><div class="EezStudio_Component_Documentation_Title_ProjectTypes"><svg viewBox="-20 -20 601 448" width="36" height="36"><g><path d="M510 0H51C22.95 0 0 22.95 0 51v306c0 28.05 22.95 51 51 51h459c28.05 0 51-22.95 51-51V51c0-28.05-22.95-51-51-51" fill="#adb5bd"></path></g><g><path d="M527.987 370.963h-495v-334h495z" fill="#ececec" stroke-width="1.23022"></path></g><image width="246.031" height="245.211" preserveAspectRatio="none" xlink:href="data:image/png;base64,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" x="157.471" y="81.358"></image></svg></div></div><div class="EezStudio_Component_Documentation_Body"><div class="EezStudio_Component_Documentation_BodySection"><h2>Description</h2><div><div class="markdown"><p>This widget is work in progress, it means that you can add it to your project and Studio will generate all the code for its creation, but for anything more than that you should do it in your custom code, for example after <code>ui_init()</code> has been called.</p>
<p><a href="https://docs.lvgl.io/master/widgets/spinbox.html">More info</a></p></div></div></div><div class="EezStudio_Component_Documentation_BodySection"><h2>Properties</h2><div><div class="EezStudio_Component_Documentation_Properties"><div class="EezStudio_Component_Documentation_PropertiesGroup"><h3>Specific</h3><dl><dt><h4>Digit count</h4><span style="font-weight: normal; font-style: italic;">Number</span></dt><dd><div class="markdown"><p>The number of digits excluding the decimal separator and the sign</p></div></dd><dt><h4>Separator position</h4><span style="font-weight: normal; font-style: italic;">Number</span></dt><dd><div class="markdown"><p>The number of digits before the decimal point</p></div></dd><dt><h4>Min</h4><span style="font-weight: normal; font-style: italic;">Number</span></dt><dd><div class="markdown"><p>The minimum value that can be selected.</p></div></dd><dt><h4>Max</h4><span style="font-weight: normal; font-style: italic;">Number</span></dt><dd><div class="markdown"><p>The maximum value that can be selected.</p></div></dd><dt><h4>Rollover</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Enables/disabled rollover mode. If either the minimum or maximum value is reached with rollover enabled, the value will change to the other limit. If rollover is disabled the value will remain at the minimum or maximum value.</p></div></dd><dt><h4>Step</h4><span style="font-weight: normal; font-style: italic;">EXPRESSION (integer)</span></dt><dd><div class="markdown"><p>Sets the cursor to a specific digit to change on increment/decrement. For example position '1' sets the cursor to the least significant digit. Only multiples of ten can be set, and not for example 3.</p></div></dd><dt><h4>Step type</h4><span style="font-weight: normal; font-style: italic;">Enum</span></dt><dd><div class="markdown"><p>Select between <code>Literal</code> and <code>Assignable</code>. If <code>Assignable</code> is selected then <code>Step</code> can be variable in which the selected step will be stored.</p></div></dd><dt><h4>Value</h4><span style="font-weight: normal; font-style: italic;">EXPRESSION (integer)</span></dt><dd><div class="markdown"><p>The selected value on the Spinbox.</p></div></dd><dt><h4>Value type</h4><span style="font-weight: normal; font-style: italic;">Enum</span></dt><dd><div class="markdown"><p>Select between <code>Literal</code> and <code>Assignable</code>. If <code>Assignable</code> is selected then <code>Value</code> can be variable in which the selected value will be stored.</p></div></dd></dl></div><div class="EezStudio_Component_Documentation_PropertiesGroup collapsed"><h3>General</h3><dl><dt><h4>Name</h4><span style="font-weight: normal; font-style: italic;">String</span></dt><dd><div class="markdown"><p>Widget name. We reference the Widget within the project by its name, for example in the LVGL action. For each Widget, we must choose a unique name within the entire project. This field is optional and does not need to be set if we do not need to reference the Widget.</p></div></dd><dt><h4>Group</h4><span style="font-weight: normal; font-style: italic;">ObjectReference</span></dt><dd><div class="markdown"><p>The name of the input group this widget belongs to.</p></div></dd><dt><h4>Group index</h4><span style="font-weight: normal; font-style: italic;">Number</span></dt><dd><div class="markdown"><p>Defines the order of widgets within group. This is similar to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> in HTML:</p>
<ul>
<li>if "Group index" is 0 then group order is the same as in Widgets Structure</li>
<li>if "Group index" is > 0 then widget is added to the group before any widget with "Group index" 0 and before any widget with the greater "Group index" value. That is, "Group index"=4 is added before "Group index"=5 and "Group index"=0, but after "Group index"=3. If multiple widgets share the same "Group index" value, their order relative to each other follows their position in the Widgets Structure.</li>
</ul></div></dd></dl></div><div class="EezStudio_Component_Documentation_PropertiesGroup collapsed"><h3>Position and size</h3><dl><dt><h4>Align and distribute</h4><span style="font-weight: normal; font-style: italic;">Any</span></dt><dd><div class="markdown"><p>Alignment icons and component distribution. Alignment icons appear when two or more components are selected, and distribution icons appear when three or more components are selected.</p>
<p><img src="images/align_and_distribute.png" alt="Alt text"></p></div></dd><dt><h4>Center widget</h4><span style="font-weight: normal; font-style: italic;">Any</span></dt><dd><div class="markdown"><p>Icons for horizontal and vertical centering of widgets within a page or parent widget.</p>
<p><img src="images/widget_centering.png" alt="Alt text"></p></div></dd><dt><h4>Left</h4><span style="font-weight: normal; font-style: italic;">Number</span></dt><dd><div class="markdown"><p>X position of the component in relation to the page or parent widget. It is set in pixels.</p>
<p>Hint: when setting the value of this property (as well as the <code>Top</code>, <code>Width</code> and <code>Height</code> properties), simple mathematical expressions can be used. When we enter an expression and press enter, the expression will be evaluated and the result set as the value of this property. It is allowed to use <code>+</code>, <code>-</code>, <code>*</code> and <code>/</code> operators in expressions. Brackets can also be used.</p>
<p>Examples of such mathematical expressions: <code>18 + 36</code>, <code>50 + 32 * 6</code>, <code>(100 - 32) / 2</code>.</p></div></dd><dt><h4>Left unit</h4><span style="font-weight: normal; font-style: italic;">Enum</span></dt><dd><div class="markdown"><p>The following options are available:</p>
<ul>
<li><code>px</code> – Left is default in pixels.</li>
<li><code>%</code> – Left is set as a percentage in relation to the parent width.</li>
</ul></div></dd><dt><h4>Top</h4><span style="font-weight: normal; font-style: italic;">Number</span></dt><dd><div class="markdown"><p>Y position of the component in relation to the page or parent widget. It is set in pixels.</p></div></dd><dt><h4>Top unit</h4><span style="font-weight: normal; font-style: italic;">Enum</span></dt><dd><div class="markdown"><p>The following options are available:</p>
<ul>
<li><code>px</code> – Top is set in pixels.</li>
<li><code>%</code> – The top is set as a percentage in relation to the parent height.</li>
</ul></div></dd><dt><h4>Width</h4><span style="font-weight: normal; font-style: italic;">Number</span></dt><dd><div class="markdown"><p>The width of the component. It is set in pixels.</p></div></dd><dt><h4>Width unit</h4><span style="font-weight: normal; font-style: italic;">Enum</span></dt><dd><div class="markdown"><p>The following options are available:</p>
<ul>
<li><code>px</code> – Width is given in pixels.</li>
<li><code>%</code> – Width is given as a percentage in relation to the parent width.</li>
<li><code>content</code> – Width is automatically set to fit the entire content in width.</li>
</ul></div></dd><dt><h4>Height</h4><span style="font-weight: normal; font-style: italic;">Number</span></dt><dd><div class="markdown"><p>The height of the component. It is set in pixels.</p></div></dd><dt><h4>Height unit</h4><span style="font-weight: normal; font-style: italic;">Enum</span></dt><dd><div class="markdown"><p>The following options are available:</p>
<ul>
<li><code>px</code> – Height is given in pixels.</li>
<li><code>%</code> – Height is given as a percentage in relation to the parent height.</li>
<li><code>content</code> – Height is automatically set to fit the entire content in height.</li>
</ul></div></dd></dl></div><div class="EezStudio_Component_Documentation_PropertiesGroup collapsed"><h3>Layout</h3><dl><dt><h4>Tab title</h4><span style="font-weight: normal; font-style: italic;">EXPRESSION (string)</span></dt><dd><div class="markdown"><p>If this widget is a child of a container with layout set to <code>Docking Manager</code>, use this property to set the title of the tab that contains this widget.</p></div></dd></dl></div><div class="EezStudio_Component_Documentation_PropertiesGroup collapsed"><h3>Style</h3><dl><dt><h4>Use style</h4><span style="font-weight: normal; font-style: italic;">ObjectReference</span></dt><dd><div class="markdown"><p>Here we can select one of the globally defined Styles so that the Widget uses that Style.</p></div></dd></dl></div><div class="EezStudio_Component_Documentation_PropertiesGroup collapsed"><h3>Flags</h3><dl><dt><h4>Hidden</h4><span style="font-weight: normal; font-style: italic;">EXPRESSION (boolean)</span></dt><dd><div class="markdown"><p>Make the object hidden.</p></div></dd><dt><h4>Hidden flag type</h4><span style="font-weight: normal; font-style: italic;">Enum</span></dt><dd><div class="markdown"><p>Here we can choose whether the <code>Hidden</code> flag state will be calculated from the Expression or not.</p></div></dd><dt><h4>Clickable</h4><span style="font-weight: normal; font-style: italic;">EXPRESSION (boolean)</span></dt><dd><div class="markdown"><p>Make the object clickable by input devices.</p></div></dd><dt><h4>Clickable flag type</h4><span style="font-weight: normal; font-style: italic;">Enum</span></dt><dd><div class="markdown"><p>Here we can choose whether the <code>Clickable</code> flag state will be calculated from the Expression or not.</p></div></dd><dt><h4>Click focusable</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Add focused state to the object when clicked.</p></div></dd><dt><h4>Checkable</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Toggle checked state when the object is clicked.</p></div></dd><dt><h4>Scrollable</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Make the object scrollable.</p></div></dd><dt><h4>Scroll elastic</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Allow scrolling inside but with slower speed.</p></div></dd><dt><h4>Scroll momentum</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Make the object scroll further when "thrown".</p></div></dd><dt><h4>Scroll one</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Allow scrolling only one snappable children.</p></div></dd><dt><h4>Scroll chain hor</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Allow propagating the horizontal scroll to a parent.</p></div></dd><dt><h4>Scroll chain ver</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Allow propagating the vertical scroll to a parent.</p></div></dd><dt><h4>Scroll on focus</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Automatically scroll object to make it visible when focused.</p></div></dd><dt><h4>Scroll with arrow</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Allow scrolling the focused object with arrow keys.</p></div></dd><dt><h4>Snappable</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>If scroll snap is enabled on the parent it can snap to this object.</p></div></dd><dt><h4>Press lock</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Keep the object pressed even if the press slid from the object.</p></div></dd><dt><h4>Event bubble</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Propagate the events to the parent too.</p></div></dd><dt><h4>Gesture bubble</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Propagate the gestures to the parent.</p></div></dd><dt><h4>Adv hittest</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Allow performing more accurate hit (click) test. E.g. accounting for rounded corners.</p></div></dd><dt><h4>Ignore layout</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Make the object positionable by the layouts.</p></div></dd><dt><h4>Floating</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Do not scroll the object when the parent scrolls and ignore layout.</p></div></dd><dt><h4>Overflow visible</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Do not clip the children's content to the parent's boundary.</p></div></dd><dt><h4>Scrollbar mode</h4><span style="font-weight: normal; font-style: italic;">Enum</span></dt><dd><div class="markdown"><p>Scrollbars are displayed according to a configured mode. The following mode(s) exist:</p>
<ul>
<li>OFF: Never show the scrollbars</li>
<li>ON: Always show the scrollbars</li>
<li>ACTIVE: Show scroll bars while an object is being scrolled</li>
<li>AUTO: Show scroll bars when the content is large enough to be scrolled</li>
</ul></div></dd><dt><h4>Scroll direction</h4><span style="font-weight: normal; font-style: italic;">Enum</span></dt><dd><div class="markdown"><p>Controls the direction in which scrolling happens. The following mode(s) exist:</p>
<ul>
<li>NONE: no scroll</li>
<li>TOP: only scroll up</li>
<li>LEFT: only scroll left</li>
<li>BOTTOM: only scroll down</li>
<li>RIGHT: only scroll right</li>
<li>HOR: only scroll horizontally</li>
<li>VER: only scroll vertically</li>
<li>ALL: scroll any directions</li>
</ul></div></dd><dt><h4>Scroll snap X</h4><span style="font-weight: normal; font-style: italic;">Enum</span></dt><dd><div class="markdown"><p>The children of an object can be snapped according to specific rules when scrolling ends.</p>
<p>An object can align snapped children in four ways:</p>
<ul>
<li>NONE: Snapping is disabled. (default)</li>
<li>START: Align the children to the left side of a scrolled object</li>
<li>END: Align the children to the right side of a scrolled object</li>
<li>CENTER: Align the children to the center of a scrolled object</li>
</ul></div></dd><dt><h4>Scroll snap Y</h4><span style="font-weight: normal; font-style: italic;">Enum</span></dt><dd><div class="markdown"><p>The children of an object can be snapped according to specific rules when scrolling ends.</p>
<p>An object can align snapped children in four ways:</p>
<ul>
<li>NONE: Snapping is disabled. (default)</li>
<li>START: Align the children to the top side of a scrolled object</li>
<li>END: Align the children to the bottom side of a scrolled object</li>
<li>CENTER: Align the children to the center of a scrolled object</li>
</ul></div></dd></dl></div><div class="EezStudio_Component_Documentation_PropertiesGroup collapsed"><h3>States</h3><dl><dt><h4>Checked</h4><span style="font-weight: normal; font-style: italic;">EXPRESSION (boolean)</span></dt><dd><div class="markdown"><p>Toggled or checked state.</p></div></dd><dt><h4>Checked state type</h4><span style="font-weight: normal; font-style: italic;">Enum</span></dt><dd><div class="markdown"><p>Here we can choose whether the <code>Checked</code> state will be calculated from the Expression or not.</p></div></dd><dt><h4>Disabled</h4><span style="font-weight: normal; font-style: italic;">EXPRESSION (boolean)</span></dt><dd><div class="markdown"><p>Disabled state</p></div></dd><dt><h4>Disabled state type</h4><span style="font-weight: normal; font-style: italic;">Enum</span></dt><dd><div class="markdown"><p>Here we can choose whether the <code>Disabled</code> state will be calculated from the Expression or not.</p></div></dd><dt><h4>Focused</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Focused via keypad or encoder or clicked via touchpad/mouse.</p></div></dd><dt><h4>Focus key</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Focused via keypad or encoder but not via touchpad/mouse</p></div></dd><dt><h4>Pressed</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>Being pressed.</p></div></dd></dl></div><div class="EezStudio_Component_Documentation_PropertiesGroup collapsed"><h3>Events</h3><dl><dt><h4>Event handlers</h4><span style="font-weight: normal; font-style: italic;">Array</span></dt><dd><div class="markdown"><p>List of event handler definitions. During execution, the widget can generate certain events (e.g. the <code>CLICKED</code> event is generated when the touchscreen is pressed and released within the Widget) and through this list we can specify the method of event processing. We must define these properties for each event handler:</p>
<ul>
<li><code>Event</code> – Event that is processed, e.g. <code>CLICKED</code>.</li>
<li><code>Handler type</code> – There are two options: <code>Flow</code> or <code>Action</code>. If <code>Flow</code> is selected, a flow output will be added through which the event is processed, and if <code>Action</code> is selected, then it is necessary to specify which User action will be performed during event processing.</li>
<li><code>Action</code> - If the <code>Handler type</code> is set to <code>Action</code>, then here we need to enter the name of the User action that will be performed during the processing of the selected event.</li>
</ul></div></dd></dl></div><div class="EezStudio_Component_Documentation_PropertiesGroup collapsed"><h3>Flow</h3><dl><dt><h4>Inputs</h4><span style="font-weight: normal; font-style: italic;">Array</span></dt><dd><div class="markdown"><p>Additional component inputs that the user can add as desired in order to use them to receive additional data needed when evaluating expressions in properties. Each input is given a name and type. Name is used when referencing an input within an expression. A type is used to project <em>Check</em> to check whether a data line that transmits data of that type is connected to the input or not.</p></div></dd><dt><h4>Outputs</h4><span style="font-weight: normal; font-style: italic;">Array</span></dt><dd><div class="markdown"><p>Additional component outputs that the user can add to send data through. Each output is assigned a name and type. An example of using this output is e.g. in the <em>Loop</em> component, where we can put the output name for the <code>Variable</code> property instead of e.g. variable name. In that case, the <em>Loop</em> component will not change the content of the variable in each step, but will send the current value through that output.</p></div></dd><dt><h4>Catch error</h4><span style="font-weight: normal; font-style: italic;">Boolean</span></dt><dd><div class="markdown"><p>If this checkbox is enabled then an <code>@Error</code> output will be added to the component and if an error occurs in this component during the execution of the Flow, the Flow will continue through that output. The data that will be passed through that output is the textual description of the error.</p></div></dd></dl></div></div></div></div><div class="EezStudio_Component_Documentation_BodySection"><h2>Examples</h2><div><div class="markdown"><ul>
<li><em>Spinbox</em></li>
</ul></div></div></div></div></div></div>
</body>
</html>