Commit 45085a80 authored by Martin Alvarez-Espinar's avatar Martin Alvarez-Espinar
Browse files

Distribution generated

parent a7fc07f5
Pipeline #18393 failed with stage
in 1 minute and 35 seconds
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>picker | Quick Apps</title>
<meta name="generator" content="VuePress 1.9.5">
<meta name="description" content="Quick App reference guide for developers">
<meta name="theme-color" content="#38b5ff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="preload" href="/developers/assets/css/0.styles.f297bc98.css" as="style"><link rel="preload" href="/developers/assets/js/app.4b1167ed.js" as="script"><link rel="preload" href="/developers/assets/js/2.0c90b5ef.js" as="script"><link rel="preload" href="/developers/assets/js/22.6999e8ff.js" as="script"><link rel="prefetch" href="/developers/assets/js/10.2156cdfe.js"><link rel="prefetch" href="/developers/assets/js/100.038af2fc.js"><link rel="prefetch" href="/developers/assets/js/101.315bea04.js"><link rel="prefetch" href="/developers/assets/js/102.151e66a2.js"><link rel="prefetch" href="/developers/assets/js/103.9ba01750.js"><link rel="prefetch" href="/developers/assets/js/104.e04d6157.js"><link rel="prefetch" href="/developers/assets/js/105.03af8b7d.js"><link rel="prefetch" href="/developers/assets/js/106.fdbb7328.js"><link rel="prefetch" href="/developers/assets/js/107.0984490c.js"><link rel="prefetch" href="/developers/assets/js/108.2234eb4c.js"><link rel="prefetch" href="/developers/assets/js/109.e15c5ad7.js"><link rel="prefetch" href="/developers/assets/js/11.dc71520b.js"><link rel="prefetch" href="/developers/assets/js/110.7e092174.js"><link rel="prefetch" href="/developers/assets/js/111.1b1d57da.js"><link rel="prefetch" href="/developers/assets/js/112.e590539f.js"><link rel="prefetch" href="/developers/assets/js/113.cf4827c6.js"><link rel="prefetch" href="/developers/assets/js/12.107ffb2e.js"><link rel="prefetch" href="/developers/assets/js/13.5d658c48.js"><link rel="prefetch" href="/developers/assets/js/14.64254d8f.js"><link rel="prefetch" href="/developers/assets/js/15.9a04fe04.js"><link rel="prefetch" href="/developers/assets/js/16.82d55f37.js"><link rel="prefetch" href="/developers/assets/js/17.fdc401b5.js"><link rel="prefetch" href="/developers/assets/js/18.aa734709.js"><link rel="prefetch" href="/developers/assets/js/19.a3bddb91.js"><link rel="prefetch" href="/developers/assets/js/20.898f80cd.js"><link rel="prefetch" href="/developers/assets/js/21.b5f4ba1a.js"><link rel="prefetch" href="/developers/assets/js/23.bb7a4ae1.js"><link rel="prefetch" href="/developers/assets/js/24.cf493e39.js"><link rel="prefetch" href="/developers/assets/js/25.eed84f79.js"><link rel="prefetch" href="/developers/assets/js/26.a3822e1c.js"><link rel="prefetch" href="/developers/assets/js/27.c9926129.js"><link rel="prefetch" href="/developers/assets/js/28.910aab3f.js"><link rel="prefetch" href="/developers/assets/js/29.f0f3da68.js"><link rel="prefetch" href="/developers/assets/js/3.98a25a7a.js"><link rel="prefetch" href="/developers/assets/js/30.4dc87f81.js"><link rel="prefetch" href="/developers/assets/js/31.d6c51da3.js"><link rel="prefetch" href="/developers/assets/js/32.9b6a5d46.js"><link rel="prefetch" href="/developers/assets/js/33.f9a34b67.js"><link rel="prefetch" href="/developers/assets/js/34.1be5ed49.js"><link rel="prefetch" href="/developers/assets/js/35.92bad26a.js"><link rel="prefetch" href="/developers/assets/js/36.4269943c.js"><link rel="prefetch" href="/developers/assets/js/37.e67e3e2b.js"><link rel="prefetch" href="/developers/assets/js/38.95710002.js"><link rel="prefetch" href="/developers/assets/js/39.4a27013e.js"><link rel="prefetch" href="/developers/assets/js/4.c45fc624.js"><link rel="prefetch" href="/developers/assets/js/40.f3b3b2c9.js"><link rel="prefetch" href="/developers/assets/js/41.f5a3fb56.js"><link rel="prefetch" href="/developers/assets/js/42.9a1bdcad.js"><link rel="prefetch" href="/developers/assets/js/43.9267a3df.js"><link rel="prefetch" href="/developers/assets/js/44.151a0e89.js"><link rel="prefetch" href="/developers/assets/js/45.6b0cec03.js"><link rel="prefetch" href="/developers/assets/js/46.df37048f.js"><link rel="prefetch" href="/developers/assets/js/47.9fe86222.js"><link rel="prefetch" href="/developers/assets/js/48.77de4866.js"><link rel="prefetch" href="/developers/assets/js/49.1a12d589.js"><link rel="prefetch" href="/developers/assets/js/5.71cdc252.js"><link rel="prefetch" href="/developers/assets/js/50.50213a02.js"><link rel="prefetch" href="/developers/assets/js/51.ac4a08c7.js"><link rel="prefetch" href="/developers/assets/js/52.f54921c8.js"><link rel="prefetch" href="/developers/assets/js/53.8ea79d5f.js"><link rel="prefetch" href="/developers/assets/js/54.194cf5af.js"><link rel="prefetch" href="/developers/assets/js/55.a5b418b9.js"><link rel="prefetch" href="/developers/assets/js/56.ec8192ea.js"><link rel="prefetch" href="/developers/assets/js/57.4b7ea8cb.js"><link rel="prefetch" href="/developers/assets/js/58.6cb47b2e.js"><link rel="prefetch" href="/developers/assets/js/59.44b4341e.js"><link rel="prefetch" href="/developers/assets/js/6.44988a9b.js"><link rel="prefetch" href="/developers/assets/js/60.55f344f0.js"><link rel="prefetch" href="/developers/assets/js/61.0444b094.js"><link rel="prefetch" href="/developers/assets/js/62.856dc838.js"><link rel="prefetch" href="/developers/assets/js/63.09799600.js"><link rel="prefetch" href="/developers/assets/js/64.cc45f664.js"><link rel="prefetch" href="/developers/assets/js/65.9c451be5.js"><link rel="prefetch" href="/developers/assets/js/66.bf2ee7a5.js"><link rel="prefetch" href="/developers/assets/js/67.25ee9554.js"><link rel="prefetch" href="/developers/assets/js/68.44671807.js"><link rel="prefetch" href="/developers/assets/js/69.ba08ab7e.js"><link rel="prefetch" href="/developers/assets/js/7.2f94e492.js"><link rel="prefetch" href="/developers/assets/js/70.30349711.js"><link rel="prefetch" href="/developers/assets/js/71.a36522f9.js"><link rel="prefetch" href="/developers/assets/js/72.8b6101f2.js"><link rel="prefetch" href="/developers/assets/js/73.ba6b048d.js"><link rel="prefetch" href="/developers/assets/js/74.5abf265c.js"><link rel="prefetch" href="/developers/assets/js/75.867935fc.js"><link rel="prefetch" href="/developers/assets/js/76.c444a096.js"><link rel="prefetch" href="/developers/assets/js/77.2c1c557c.js"><link rel="prefetch" href="/developers/assets/js/78.5f7b1c3e.js"><link rel="prefetch" href="/developers/assets/js/79.a680e3f9.js"><link rel="prefetch" href="/developers/assets/js/8.d9a74d5e.js"><link rel="prefetch" href="/developers/assets/js/80.03770288.js"><link rel="prefetch" href="/developers/assets/js/81.cbe2c473.js"><link rel="prefetch" href="/developers/assets/js/82.1c6ac4bf.js"><link rel="prefetch" href="/developers/assets/js/83.d08419a1.js"><link rel="prefetch" href="/developers/assets/js/84.1505c4c2.js"><link rel="prefetch" href="/developers/assets/js/85.b464c282.js"><link rel="prefetch" href="/developers/assets/js/86.e0df47a8.js"><link rel="prefetch" href="/developers/assets/js/87.abcd802c.js"><link rel="prefetch" href="/developers/assets/js/88.07faba71.js"><link rel="prefetch" href="/developers/assets/js/89.9dc9eba0.js"><link rel="prefetch" href="/developers/assets/js/9.21e12ace.js"><link rel="prefetch" href="/developers/assets/js/90.fc31e508.js"><link rel="prefetch" href="/developers/assets/js/91.f5bd9acd.js"><link rel="prefetch" href="/developers/assets/js/92.0572caf1.js"><link rel="prefetch" href="/developers/assets/js/93.544a3b6b.js"><link rel="prefetch" href="/developers/assets/js/94.377a31bf.js"><link rel="prefetch" href="/developers/assets/js/95.27737fb7.js"><link rel="prefetch" href="/developers/assets/js/96.9655a8bb.js"><link rel="prefetch" href="/developers/assets/js/97.345971d4.js"><link rel="prefetch" href="/developers/assets/js/98.6dabc14b.js"><link rel="prefetch" href="/developers/assets/js/99.6d4060bc.js">
<link rel="stylesheet" href="/developers/assets/css/0.styles.f297bc98.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/developers/" class="home-link router-link-active"><!----> <span class="site-name">Quick Apps</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/developers/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link router-link-active">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/developers/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link router-link-active">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guide</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>UI Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/developers/components/" aria-current="page" class="sidebar-link">Elements Summary</a></li><li><a href="/developers/components/attributes.html" class="sidebar-link">Common Attributes</a></li><li><a href="/developers/components/styles.html" class="sidebar-link">Common Styles</a></li><li><a href="/developers/components/events.html" class="sidebar-link">Common Events</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Basic Elements</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Containers</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>Forms</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/developers/components/input.html" class="sidebar-link">input</a></li><li><a href="/developers/components/label.html" class="sidebar-link">label</a></li><li><a href="/developers/components/option.html" class="sidebar-link">option</a></li><li><a href="/developers/components/picker.html" aria-current="page" class="active sidebar-link">picker</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/developers/components/picker.html#children-elements" class="sidebar-link">Children Elements</a></li><li class="sidebar-sub-header"><a href="/developers/components/picker.html#attributes" class="sidebar-link">Attributes</a></li><li class="sidebar-sub-header"><a href="/developers/components/picker.html#events" class="sidebar-link">Events</a></li><li class="sidebar-sub-header"><a href="/developers/components/picker.html#methods" class="sidebar-link">Methods</a></li><li class="sidebar-sub-header"><a href="/developers/components/picker.html#example" class="sidebar-link">Example</a></li></ul></li><li><a href="/developers/components/select.html" class="sidebar-link">select</a></li><li><a href="/developers/components/slider.html" class="sidebar-link">slider</a></li><li><a href="/developers/components/switch.html" class="sidebar-link">switch</a></li><li><a href="/developers/components/textarea.html" class="sidebar-link">textarea</a></li></ul></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Media</span> <span class="arrow right"></span></p> <!----></section></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>API &amp; Services</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="picker"><a href="#picker" class="header-anchor">#</a> <code>picker</code></h1> <p>Input element for selecting values of different nature, like text items, date, time, multi-column text.</p> <p>Visit our <a href="https://gitlab.ow2.org/quick-app-initiative/quick-app-initiative" target="_blank" rel="noopener noreferrer">repository<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> and <a href="https://gitlab.ow2.org/quick-app-initiative/quick-app-initiative" target="_blank" rel="noopener noreferrer">raise an issue<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> if you want to contribute. Thanks you for your collaboration</p> <img src="/developers/assets/img/picker01.06faa7d2.gif" alt="Picker component on a Quick App" style="height:500px;border-radius:6px;border:1px #333333 solid;"> <p>(<a href="#example">Example code</a>)</p> <p></p><div class="table-of-contents"><ul><li><a href="#children-elements">Children Elements</a></li><li><a href="#attributes">Attributes</a><ul><li><a href="#text-picker-attributes">text Picker Attributes</a></li><li><a href="#date-picker-attributes">date Picker Attributes</a></li><li><a href="#time-picker-attributes">time Picker Attributes</a></li><li><a href="#multi-text-picker-attributes">multi-text Picker Attributes</a></li></ul></li><li><a href="#events">Events</a><ul><li><a href="#text-picker-events">text Picker Events</a></li><li><a href="#date-picker-events">date Picker Events</a></li><li><a href="#time-picker-events">time Picker Events</a></li><li><a href="#date-picker-events">date Picker Events</a></li></ul></li><li><a href="#methods">Methods</a><ul><li><a href="#show">show()</a></li></ul></li><li><a href="#example">Example</a></li></ul></div><p></p> <h2 id="children-elements"><a href="#children-elements" class="header-anchor">#</a> Children Elements</h2> <p>This element doesn't support children elements.</p> <h2 id="attributes"><a href="#attributes" class="header-anchor">#</a> Attributes</h2> <p>In addition to the <a href="./attributes">common attributes</a>, this element may contain the following attributes, depending on the type of picker, determined by the value of the attribute <code>type</code> (i.e., <code>text</code>, <code>date</code>, <code>time</code>, <code>multi-text</code>).</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <ul><li>Do not add spaces before or after the value of <code>type</code>. Otherwise, the compilation will fail.</li> <li>In a multi-column picker, each column must have data.</li></ul></div> <h3 id="text-picker-attributes"><a href="#text-picker-attributes" class="header-anchor">#</a> <code>text</code> Picker Attributes</h3> <h4 id="range"><a href="#range" class="header-anchor">#</a> <code>range</code></h4> <p>List of textual values of the picker.</p> <ul><li>Type: <code>array</code></li> <li>Default value: -</li> <li>Mandatory: no</li></ul> <h4 id="selected"><a href="#selected" class="header-anchor">#</a> <code>selected</code></h4> <p>The index of the value selected in the picker.</p> <ul><li>Type: <code>string</code></li> <li>Default value: <code>0</code></li> <li>Mandatory: no</li></ul> <h4 id="value"><a href="#value" class="header-anchor">#</a> <code>value</code></h4> <p>Value selected in a picker.</p> <ul><li>Type: <code>string</code></li> <li>Default value: -</li> <li>Mandatory: no</li></ul> <h3 id="date-picker-attributes"><a href="#date-picker-attributes" class="header-anchor">#</a> <code>date</code> Picker Attributes</h3> <h4 id="start"><a href="#start" class="header-anchor">#</a> <code>start</code></h4> <p>Start date of the picker, in the format yyyy-(M)M-dd.</p> <ul><li>Type: <code>string</code> (time)</li> <li>Default value: <code>1970-1-1</code></li> <li>Mandatory: no</li></ul> <h4 id="end"><a href="#end" class="header-anchor">#</a> <code>end</code></h4> <p>End date of the picker, in the format yyyy-(M)M-dd.</p> <ul><li>Type: <code>string</code> (time)</li> <li>Default value: <code>2100-12-31</code></li> <li>Mandatory: no</li></ul> <h4 id="selected-2"><a href="#selected-2" class="header-anchor">#</a> <code>selected</code></h4> <p>Current value selected in the picker (date), in the format yyyy-(M)M-(d)d.</p> <ul><li>Type: <code>string</code></li> <li>Default value: (current date)</li> <li>Mandatory: no</li></ul> <h4 id="value-2"><a href="#value-2" class="header-anchor">#</a> <code>value</code></h4> <p>Value selected in the picker.</p> <ul><li>Type: <code>string</code></li> <li>Default value: -</li> <li>Mandatory: no</li></ul> <h3 id="time-picker-attributes"><a href="#time-picker-attributes" class="header-anchor">#</a> <code>time</code> Picker Attributes</h3> <h4 id="selected-3"><a href="#selected-3" class="header-anchor">#</a> <code>selected</code></h4> <p>Current value selected in the picker (time), in the format (h)h:(m)m.</p> <ul><li>Type: <code>string</code></li> <li>Default value: (current time)</li> <li>Mandatory: no</li></ul> <h4 id="value-3"><a href="#value-3" class="header-anchor">#</a> <code>value</code></h4> <p>Value selected in the picker.</p> <ul><li>Type: <code>string</code></li> <li>Default value: -</li> <li>Mandatory: no</li></ul> <h3 id="multi-text-picker-attributes"><a href="#multi-text-picker-attributes" class="header-anchor">#</a> <code>multi-text</code> Picker Attributes</h3> <h4 id="range-2"><a href="#range-2" class="header-anchor">#</a> <code>range</code></h4> <p>List of textual values of the picker.</p> <ul><li>Type: <code>array</code> (two-dimension array)</li> <li>Default value: -</li> <li>Mandatory: yes</li></ul> <h4 id="selected-4"><a href="#selected-4" class="header-anchor">#</a> <code>selected</code></h4> <p>Array with the indexes of the selected items in each column (e.g., <code>[0,1,2,1]</code>).</p> <ul><li>Type: <code>array</code></li> <li>Default value: <code>[0,0,0,0]</code></li> <li>Mandatory: no</li></ul> <h4 id="value-4"><a href="#value-4" class="header-anchor">#</a> <code>value</code></h4> <p>Array with the values of the selected items in each column.</p> <ul><li>Type: <code>string</code></li> <li>Default value: -</li> <li>Mandatory: no</li></ul> <h2 id="events"><a href="#events" class="header-anchor">#</a> Events</h2> <p>This element supports the <a href="./events">common events</a>, with the exception of <a href="/developers/components/events.html#swipe"><code>swipe</code></a> and <a href="/developers/components/events.html#click"><code>click</code></a>. In addition to this, <code>picker</code> elements support the following events:</p> <h3 id="text-picker-events"><a href="#text-picker-events" class="header-anchor">#</a> <code>text</code> Picker Events</h3> <h4 id="change"><a href="#change" class="header-anchor">#</a> <code>change</code></h4> <p>This event is triggered when the current value of the text picker changes.</p> <p><strong>Additional parameters</strong>:</p> <ul><li><code>{ newValue: string, newSelected: integer }</code></li></ul> <h3 id="date-picker-events"><a href="#date-picker-events" class="header-anchor">#</a> <code>date</code> Picker Events</h3> <h4 id="change-2"><a href="#change-2" class="header-anchor">#</a> <code>change</code></h4> <p>This event is triggered when the current value of the date picker changes.</p> <p><strong>Additional parameters</strong>:</p> <ul><li><code>{ year: integer, month: integer, day: integer }</code> (<code>month</code> is a value in the <code>[0..11]</code> range).</li></ul> <h3 id="time-picker-events"><a href="#time-picker-events" class="header-anchor">#</a> <code>time</code> Picker Events</h3> <h4 id="change-3"><a href="#change-3" class="header-anchor">#</a> <code>change</code></h4> <p>This event is triggered when the current value of the time picker changes.</p> <p><strong>Additional parameters</strong>:</p> <ul><li><code>{ hour:integer, minute:integer }</code></li></ul> <h3 id="date-picker-events-2"><a href="#date-picker-events-2" class="header-anchor">#</a> <code>date</code> Picker Events</h3> <h4 id="multi-text"><a href="#multi-text" class="header-anchor">#</a> <code>multi-text</code></h4> <p>This event is triggered when the current value of the multi-text picker changes.</p> <p><strong>Additional parameters</strong>:</p> <ul><li><code>{ newValue:[string, string, string,...], newSelected: [integer, integer, integer...] }</code></li></ul> <h4 id="columnchange"><a href="#columnchange" class="header-anchor">#</a> <code>columnchange</code></h4> <p>This event is triggered when the current value of a multi-text changes.</p> <p><strong>Additional parameters</strong>:</p> <ul><li><code>{ column: integer, newValue: string, newSelected: integer}</code>. Indicating the new column index, the selected value (text), and the index of the item selected in the row.</li></ul> <h4 id="cancel"><a href="#cancel" class="header-anchor">#</a> <code>cancel</code></h4> <p>This event is triggered when the user cancels the selection in a multi-text picker.</p> <h2 id="methods"><a href="#methods" class="header-anchor">#</a> Methods</h2> <p>This element has the following method:</p> <h3 id="show"><a href="#show" class="header-anchor">#</a> <code>show()</code></h3> <p>This method displays the picker.</p> <h2 id="example"><a href="#example" class="header-anchor">#</a> Example</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item-container mt-item fdir-column<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input-item divider-border-color border-bottom-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>label color-primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-area<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Country:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>picker</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">range</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{list}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{country}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-area<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onchange</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript">countryChange</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>picker</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input-item divider-border-color border-bottom-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>label color-primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-date<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Select date<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>picker</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{date}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-date<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onchange</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript">dateChange</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>picker</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>label color-primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-time<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Select time<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>picker</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>time<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{time}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-time<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onchange</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript">timeChange</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>picker</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sass<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.input-item</span><span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
<span class="token selector">.label</span><span class="token punctuation">{</span>
<span class="token property">flex-basis</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token property">flex-shrink</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.picker</span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">const</span> <span class="token function-variable function">lessTenFormat</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">num</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token function">isNaN</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span> <span class="token operator">||</span> num <span class="token operator">&lt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token string">''</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> newNum <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> newNum <span class="token operator">&gt;=</span> <span class="token number">10</span> <span class="token operator">?</span> newNum <span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">0</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>num<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token keyword">public</span><span class="token operator">:</span> <span class="token punctuation">{</span>
list<span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
country<span class="token operator">:</span><span class="token string">''</span><span class="token punctuation">,</span>
date<span class="token operator">:</span><span class="token string">''</span><span class="token punctuation">,</span>
time<span class="token operator">:</span><span class="token string">''</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">onInit</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$page<span class="token punctuation">.</span><span class="token function">setTitleBar</span><span class="token punctuation">(</span><span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'message.component.picker.barTitle'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'Afghanistan'</span><span class="token punctuation">,</span><span class="token string">'Albania'</span><span class="token punctuation">,</span><span class="token string">'Algeria'</span><span class="token punctuation">,</span><span class="token string">'Andorra'</span><span class="token punctuation">,</span><span class="token string">'Angola'</span><span class="token punctuation">,</span><span class="token string">'Antigua and Barbuda'</span><span class="token punctuation">,</span><span class="token string">'Argentina'</span><span class="token punctuation">,</span><span class="token string">'Armenia'</span><span class="token punctuation">,</span><span class="token string">'Australia'</span><span class="token punctuation">,</span><span class="token string">'Austria'</span><span class="token punctuation">,</span><span class="token string">'Azerbaijan'</span><span class="token punctuation">,</span><span class="token string">'Bahamas'</span><span class="token punctuation">,</span><span class="token string">'Bahrain'</span><span class="token punctuation">,</span><span class="token string">'Bangladesh'</span><span class="token punctuation">,</span><span class="token string">'Barbados'</span><span class="token punctuation">,</span><span class="token string">'Belarus'</span><span class="token punctuation">,</span><span class="token string">'Belgium'</span><span class="token punctuation">,</span><span class="token string">'Belize'</span><span class="token punctuation">,</span><span class="token string">'Benin'</span><span class="token punctuation">,</span><span class="token string">'Bhutan'</span><span class="token punctuation">,</span><span class="token string">'Bolivia'</span><span class="token punctuation">,</span><span class="token string">'Bosnia and Herzegovina'</span><span class="token punctuation">,</span><span class="token string">'Botswana'</span><span class="token punctuation">,</span><span class="token string">'Brazil'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>country <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>list<span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// Selection by default</span>
<span class="token keyword">let</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> <span class="token constant">Y</span> <span class="token operator">=</span> date<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> <span class="token constant">M</span> <span class="token operator">=</span> date<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> <span class="token constant">D</span> <span class="token operator">=</span> date<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> <span class="token constant">H</span> <span class="token operator">=</span> date<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> m <span class="token operator">=</span> date<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>date <span class="token operator">=</span> <span class="token constant">Y</span> <span class="token operator">+</span> <span class="token string">'-'</span> <span class="token operator">+</span> <span class="token constant">M</span> <span class="token operator">+</span> <span class="token string">'-'</span> <span class="token operator">+</span> <span class="token constant">D</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>time <span class="token operator">=</span> <span class="token constant">H</span> <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> m<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">dateChange</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>year<span class="token punctuation">,</span>month<span class="token punctuation">,</span>day<span class="token punctuation">}</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>date <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>year<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">lessTenFormat</span><span class="token punctuation">(</span>month<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">lessTenFormat</span><span class="token punctuation">(</span>day<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">timeChange</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>hour<span class="token punctuation">,</span>minute<span class="token punctuation">}</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>time <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>hour<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">lessTenFormat</span><span class="token punctuation">(</span>minute<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">countryChange</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>newValue<span class="token punctuation">}</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>country <span class="token operator">=</span> newValue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://gitlab.ow2.org/quick-app-initiative/quick-app-initiative/edit/master/technology-guides/developer-docs/content/components/picker.md" target="_blank" rel="noopener noreferrer">Help us improve this document!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">10/22/2021, 10:44:33 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/developers/components/option.html" class="prev">
option
</a></span> <span class="next"><a href="/developers/components/select.html">
select
</a>
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
<script src="/developers/assets/js/app.4b1167ed.js" defer></script><script src="/developers/assets/js/2.0c90b5ef.js" defer></script><script src="/developers/assets/js/22.6999e8ff.js" defer></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>popup | Quick Apps</title>
<meta name="generator" content="VuePress 1.9.5">
<meta name="description" content="Quick App reference guide for developers">
<meta name="theme-color" content="#38b5ff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="preload" href="/developers/assets/css/0.styles.f297bc98.css" as="style"><link rel="preload" href="/developers/assets/js/app.4b1167ed.js" as="script"><link rel="preload" href="/developers/assets/js/2.0c90b5ef.js" as="script"><link rel="preload" href="/developers/assets/js/23.bb7a4ae1.js" as="script"><link rel="prefetch" href="/developers/assets/js/10.2156cdfe.js"><link rel="prefetch" href="/developers/assets/js/100.038af2fc.js"><link rel="prefetch" href="/developers/assets/js/101.315bea04.js"><link rel="prefetch" href="/developers/assets/js/102.151e66a2.js"><link rel="prefetch" href="/developers/assets/js/103.9ba01750.js"><link rel="prefetch" href="/developers/assets/js/104.e04d6157.js"><link rel="prefetch" href="/developers/assets/js/105.03af8b7d.js"><link rel="prefetch" href="/developers/assets/js/106.fdbb7328.js"><link rel="prefetch" href="/developers/assets/js/107.0984490c.js"><link rel="prefetch" href="/developers/assets/js/108.2234eb4c.js"><link rel="prefetch" href="/developers/assets/js/109.e15c5ad7.js"><link rel="prefetch" href="/developers/assets/js/11.dc71520b.js"><link rel="prefetch" href="/developers/assets/js/110.7e092174.js"><link rel="prefetch" href="/developers/assets/js/111.1b1d57da.js"><link rel="prefetch" href="/developers/assets/js/112.e590539f.js"><link rel="prefetch" href="/developers/assets/js/113.cf4827c6.js"><link rel="prefetch" href="/developers/assets/js/12.107ffb2e.js"><link rel="prefetch" href="/developers/assets/js/13.5d658c48.js"><link rel="prefetch" href="/developers/assets/js/14.64254d8f.js"><link rel="prefetch" href="/developers/assets/js/15.9a04fe04.js"><link rel="prefetch" href="/developers/assets/js/16.82d55f37.js"><link rel="prefetch" href="/developers/assets/js/17.fdc401b5.js"><link rel="prefetch" href="/developers/assets/js/18.aa734709.js"><link rel="prefetch" href="/developers/assets/js/19.a3bddb91.js"><link rel="prefetch" href="/developers/assets/js/20.898f80cd.js"><link rel="prefetch" href="/developers/assets/js/21.b5f4ba1a.js"><link rel="prefetch" href="/developers/assets/js/22.6999e8ff.js"><link rel="prefetch" href="/developers/assets/js/24.cf493e39.js"><link rel="prefetch" href="/developers/assets/js/25.eed84f79.js"><link rel="prefetch" href="/developers/assets/js/26.a3822e1c.js"><link rel="prefetch" href="/developers/assets/js/27.c9926129.js"><link rel="prefetch" href="/developers/assets/js/28.910aab3f.js"><link rel="prefetch" href="/developers/assets/js/29.f0f3da68.js"><link rel="prefetch" href="/developers/assets/js/3.98a25a7a.js"><link rel="prefetch" href="/developers/assets/js/30.4dc87f81.js"><link rel="prefetch" href="/developers/assets/js/31.d6c51da3.js"><link rel="prefetch" href="/developers/assets/js/32.9b6a5d46.js"><link rel="prefetch" href="/developers/assets/js/33.f9a34b67.js"><link rel="prefetch" href="/developers/assets/js/34.1be5ed49.js"><link rel="prefetch" href="/developers/assets/js/35.92bad26a.js"><link rel="prefetch" href="/developers/assets/js/36.4269943c.js"><link rel="prefetch" href="/developers/assets/js/37.e67e3e2b.js"><link rel="prefetch" href="/developers/assets/js/38.95710002.js"><link rel="prefetch" href="/developers/assets/js/39.4a27013e.js"><link rel="prefetch" href="/developers/assets/js/4.c45fc624.js"><link rel="prefetch" href="/developers/assets/js/40.f3b3b2c9.js"><link rel="prefetch" href="/developers/assets/js/41.f5a3fb56.js"><link rel="prefetch" href="/developers/assets/js/42.9a1bdcad.js"><link rel="prefetch" href="/developers/assets/js/43.9267a3df.js"><link rel="prefetch" href="/developers/assets/js/44.151a0e89.js"><link rel="prefetch" href="/developers/assets/js/45.6b0cec03.js"><link rel="prefetch" href="/developers/assets/js/46.df37048f.js"><link rel="prefetch" href="/developers/assets/js/47.9fe86222.js"><link rel="prefetch" href="/developers/assets/js/48.77de4866.js"><link rel="prefetch" href="/developers/assets/js/49.1a12d589.js"><link rel="prefetch" href="/developers/assets/js/5.71cdc252.js"><link rel="prefetch" href="/developers/assets/js/50.50213a02.js"><link rel="prefetch" href="/developers/assets/js/51.ac4a08c7.js"><link rel="prefetch" href="/developers/assets/js/52.f54921c8.js"><link rel="prefetch" href="/developers/assets/js/53.8ea79d5f.js"><link rel="prefetch" href="/developers/assets/js/54.194cf5af.js"><link rel="prefetch" href="/developers/assets/js/55.a5b418b9.js"><link rel="prefetch" href="/developers/assets/js/56.ec8192ea.js"><link rel="prefetch" href="/developers/assets/js/57.4b7ea8cb.js"><link rel="prefetch" href="/developers/assets/js/58.6cb47b2e.js"><link rel="prefetch" href="/developers/assets/js/59.44b4341e.js"><link rel="prefetch" href="/developers/assets/js/6.44988a9b.js"><link rel="prefetch" href="/developers/assets/js/60.55f344f0.js"><link rel="prefetch" href="/developers/assets/js/61.0444b094.js"><link rel="prefetch" href="/developers/assets/js/62.856dc838.js"><link rel="prefetch" href="/developers/assets/js/63.09799600.js"><link rel="prefetch" href="/developers/assets/js/64.cc45f664.js"><link rel="prefetch" href="/developers/assets/js/65.9c451be5.js"><link rel="prefetch" href="/developers/assets/js/66.bf2ee7a5.js"><link rel="prefetch" href="/developers/assets/js/67.25ee9554.js"><link rel="prefetch" href="/developers/assets/js/68.44671807.js"><link rel="prefetch" href="/developers/assets/js/69.ba08ab7e.js"><link rel="prefetch" href="/developers/assets/js/7.2f94e492.js"><link rel="prefetch" href="/developers/assets/js/70.30349711.js"><link rel="prefetch" href="/developers/assets/js/71.a36522f9.js"><link rel="prefetch" href="/developers/assets/js/72.8b6101f2.js"><link rel="prefetch" href="/developers/assets/js/73.ba6b048d.js"><link rel="prefetch" href="/developers/assets/js/74.5abf265c.js"><link rel="prefetch" href="/developers/assets/js/75.867935fc.js"><link rel="prefetch" href="/developers/assets/js/76.c444a096.js"><link rel="prefetch" href="/developers/assets/js/77.2c1c557c.js"><link rel="prefetch" href="/developers/assets/js/78.5f7b1c3e.js"><link rel="prefetch" href="/developers/assets/js/79.a680e3f9.js"><link rel="prefetch" href="/developers/assets/js/8.d9a74d5e.js"><link rel="prefetch" href="/developers/assets/js/80.03770288.js"><link rel="prefetch" href="/developers/assets/js/81.cbe2c473.js"><link rel="prefetch" href="/developers/assets/js/82.1c6ac4bf.js"><link rel="prefetch" href="/developers/assets/js/83.d08419a1.js"><link rel="prefetch" href="/developers/assets/js/84.1505c4c2.js"><link rel="prefetch" href="/developers/assets/js/85.b464c282.js"><link rel="prefetch" href="/developers/assets/js/86.e0df47a8.js"><link rel="prefetch" href="/developers/assets/js/87.abcd802c.js"><link rel="prefetch" href="/developers/assets/js/88.07faba71.js"><link rel="prefetch" href="/developers/assets/js/89.9dc9eba0.js"><link rel="prefetch" href="/developers/assets/js/9.21e12ace.js"><link rel="prefetch" href="/developers/assets/js/90.fc31e508.js"><link rel="prefetch" href="/developers/assets/js/91.f5bd9acd.js"><link rel="prefetch" href="/developers/assets/js/92.0572caf1.js"><link rel="prefetch" href="/developers/assets/js/93.544a3b6b.js"><link rel="prefetch" href="/developers/assets/js/94.377a31bf.js"><link rel="prefetch" href="/developers/assets/js/95.27737fb7.js"><link rel="prefetch" href="/developers/assets/js/96.9655a8bb.js"><link rel="prefetch" href="/developers/assets/js/97.345971d4.js"><link rel="prefetch" href="/developers/assets/js/98.6dabc14b.js"><link rel="prefetch" href="/developers/assets/js/99.6d4060bc.js">
<link rel="stylesheet" href="/developers/assets/css/0.styles.f297bc98.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/developers/" class="home-link router-link-active"><!----> <span class="site-name">Quick Apps</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/developers/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link router-link-active">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/developers/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link router-link-active">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guide</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>UI Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/developers/components/" aria-current="page" class="sidebar-link">Elements Summary</a></li><li><a href="/developers/components/attributes.html" class="sidebar-link">Common Attributes</a></li><li><a href="/developers/components/styles.html" class="sidebar-link">Common Styles</a></li><li><a href="/developers/components/events.html" class="sidebar-link">Common Events</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>Basic Elements</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/developers/components/a.html" class="sidebar-link">a</a></li><li><a href="/developers/components/image.html" class="sidebar-link">image</a></li><li><a href="/developers/components/popup.html" aria-current="page" class="active sidebar-link">popup</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/developers/components/popup.html#children-elements" class="sidebar-link">Children Elements</a></li><li class="sidebar-sub-header"><a href="/developers/components/popup.html#attributes" class="sidebar-link">Attributes</a></li><li class="sidebar-sub-header"><a href="/developers/components/popup.html#css-properties" class="sidebar-link">CSS Properties</a></li><li class="sidebar-sub-header"><a href="/developers/components/popup.html#events" class="sidebar-link">Events</a></li><li class="sidebar-sub-header"><a href="/developers/components/popup.html#methods" class="sidebar-link">Methods</a></li><li class="sidebar-sub-header"><a href="/developers/components/popup.html#example" class="sidebar-link">Example</a></li></ul></li><li><a href="/developers/components/progress.html" class="sidebar-link">progress</a></li><li><a href="/developers/components/rating.html" class="sidebar-link">rating</a></li><li><a href="/developers/components/slot.html" class="sidebar-link">slot</a></li><li><a href="/developers/components/span.html" class="sidebar-link">span</a></li><li><a href="/developers/components/text.html" class="sidebar-link">text</a></li><li><a href="/developers/components/web.html" class="sidebar-link">web</a></li></ul></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Containers</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Forms</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Media</span> <span class="arrow right"></span></p> <!----></section></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>API &amp; Services</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="popup"><a href="#popup" class="header-anchor">#</a> <code>popup</code></h1> <p>Displays a tooltip text on an element.</p> <p>The content in the pop-up element is a <code>text</code> specified as a child node.</p> <img src="/developers/assets/img/popup01.2dc4ec3d.gif" alt="Pop up component on a Quick App" style="height:500px;border-radius:6px;border:1px #333333 solid;"> <p>(<a href="#example">Example code</a>)</p> <p></p><div class="table-of-contents"><ul><li><a href="#children-elements">Children Elements</a></li><li><a href="#attributes">Attributes</a><ul><li><a href="#target">target</a></li><li><a href="#placement">placement</a></li></ul></li><li><a href="#css-properties">CSS Properties</a><ul><li><a href="#mask-color">mask-color</a></li></ul></li><li><a href="#events">Events</a><ul><li><a href="#visibilitychange">visibilitychange</a></li></ul></li><li><a href="#methods">Methods</a></li><li><a href="#example">Example</a></li></ul></div><p></p> <h2 id="children-elements"><a href="#children-elements" class="header-anchor">#</a> Children Elements</h2> <p>This element only supports <a href="./text"><code>text</code> elements</a> elements as children nodes.</p> <h2 id="attributes"><a href="#attributes" class="header-anchor">#</a> Attributes</h2> <p>In addition to the <a href="./attributes">common attributes</a>, this element may contain the following attributes.</p> <ul><li><a href="#target"><code>target</code></a></li> <li><a href="#placement"><code>placement</code></a></li></ul> <h3 id="target"><a href="#target" class="header-anchor">#</a> <code>target</code></h3> <p>This attribute identifies the target element (its <code>id</code>) where the pop-up will be shown.</p> <ul><li>Type: <code>string</code></li> <li>Default value: -</li> <li>Mandatory: yes</li></ul> <h3 id="placement"><a href="#placement" class="header-anchor">#</a> <code>placement</code></h3> <p>This attribute defines the position of the pop-up.</p> <ul><li>Type: <code>string</code> (<code>left</code> | <code>right</code> | <code>top</code> | <code>bottom</code> | <code>topLeft</code> | <code>topRight</code> | <code>bottomLeft</code> | <code>bottomRight</code>)</li> <li>Default value: <code>bottom</code></li> <li>Mandatory: no</li></ul> <h2 id="css-properties"><a href="#css-properties" class="header-anchor">#</a> CSS Properties</h2> <p>In addition to the <a href="./styles">common styles</a>, this element supports the following styling property:</p> <ul><li><a href="#mask-color"><code>mask-color</code></a></li></ul> <h3 id="mask-color"><a href="#mask-color" class="header-anchor">#</a> <code>mask-color</code></h3> <p>Color of the overlay mask.</p> <ul><li>Type: <code>&lt;color&gt;</code></li> <li>Default value: <code>#000000</code></li> <li>Mandatory: no</li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>If the value is not specified, the mask will be completely transparent.
If only the color is specified, the opacity is set to <code>30%</code> by default.</p></div> <h2 id="events"><a href="#events" class="header-anchor">#</a> Events</h2> <p>In addition to the <a href="./events">common events</a> (with the exception of <a href="/developers/components/events.html#appear"><code>appear</code></a> and <a href="/developers/components/events.html#disappear"><code>disappear</code></a>, this element supports the following event:</p> <ul><li><a href="#visibilitychange"><code>visibilitychange</code></a></li></ul> <h3 id="visibilitychange"><a href="#visibilitychange" class="header-anchor">#</a> <code>visibilitychange</code></h3> <p>This event is triggered when a pop-up becomes visible or hidden.</p> <p><strong>Additional parameters</strong>:</p> <ul><li><code>{ visible: boolean }</code></li></ul> <h2 id="methods"><a href="#methods" class="header-anchor">#</a> Methods</h2> <p>This element doesn't support additional methods.</p> <h2 id="example"><a href="#example" class="header-anchor">#</a> Example</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container column-center row-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mlr-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pop up:top-pop<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-blue<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pop-top<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mlr-container mt-btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>button<span class="token punctuation">&quot;</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pop up:bottom-pop<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-blue<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pop-bottom<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>popup</span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pop-top<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">mask-color</span><span class="token punctuation">:</span> #333333<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>top<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>popup</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>popup</span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pop-bottom<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">mask-color</span><span class="token punctuation">:</span> #333333<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>bottom<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>popup</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://gitlab.ow2.org/quick-app-initiative/quick-app-initiative/edit/master/technology-guides/developer-docs/content/components/popup.md" target="_blank" rel="noopener noreferrer">Help us improve this document!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">10/22/2021, 2:12:43 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/developers/components/image.html" class="prev">
image
</a></span> <span class="next"><a href="/developers/components/progress.html">
progress
</a>
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
<script src="/developers/assets/js/app.4b1167ed.js" defer></script><script src="/developers/assets/js/2.0c90b5ef.js" defer></script><script src="/developers/assets/js/23.bb7a4ae1.js" defer></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>progress | Quick Apps</title>
<meta name="generator" content="VuePress 1.9.5">
<meta name="description" content="Quick App reference guide for developers">
<meta name="theme-color" content="#38b5ff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="preload" href="/developers/assets/css/0.styles.f297bc98.css" as="style"><link rel="preload" href="/developers/assets/js/app.4b1167ed.js" as="script"><link rel="preload" href="/developers/assets/js/2.0c90b5ef.js" as="script"><link rel="preload" href="/developers/assets/js/24.cf493e39.js" as="script"><link rel="prefetch" href="/developers/assets/js/10.2156cdfe.js"><link rel="prefetch" href="/developers/assets/js/100.038af2fc.js"><link rel="prefetch" href="/developers/assets/js/101.315bea04.js"><link rel="prefetch" href="/developers/assets/js/102.151e66a2.js"><link rel="prefetch" href="/developers/assets/js/103.9ba01750.js"><link rel="prefetch" href="/developers/assets/js/104.e04d6157.js"><link rel="prefetch" href="/developers/assets/js/105.03af8b7d.js"><link rel="prefetch" href="/developers/assets/js/106.fdbb7328.js"><link rel="prefetch" href="/developers/assets/js/107.0984490c.js"><link rel="prefetch" href="/developers/assets/js/108.2234eb4c.js"><link rel="prefetch" href="/developers/assets/js/109.e15c5ad7.js"><link rel="prefetch" href="/developers/assets/js/11.dc71520b.js"><link rel="prefetch" href="/developers/assets/js/110.7e092174.js"><link rel="prefetch" href="/developers/assets/js/111.1b1d57da.js"><link rel="prefetch" href="/developers/assets/js/112.e590539f.js"><link rel="prefetch" href="/developers/assets/js/113.cf4827c6.js"><link rel="prefetch" href="/developers/assets/js/12.107ffb2e.js"><link rel="prefetch" href="/developers/assets/js/13.5d658c48.js"><link rel="prefetch" href="/developers/assets/js/14.64254d8f.js"><link rel="prefetch" href="/developers/assets/js/15.9a04fe04.js"><link rel="prefetch" href="/developers/assets/js/16.82d55f37.js"><link rel="prefetch" href="/developers/assets/js/17.fdc401b5.js"><link rel="prefetch" href="/developers/assets/js/18.aa734709.js"><link rel="prefetch" href="/developers/assets/js/19.a3bddb91.js"><link rel="prefetch" href="/developers/assets/js/20.898f80cd.js"><link rel="prefetch" href="/developers/assets/js/21.b5f4ba1a.js"><link rel="prefetch" href="/developers/assets/js/22.6999e8ff.js"><link rel="prefetch" href="/developers/assets/js/23.bb7a4ae1.js"><link rel="prefetch" href="/developers/assets/js/25.eed84f79.js"><link rel="prefetch" href="/developers/assets/js/26.a3822e1c.js"><link rel="prefetch" href="/developers/assets/js/27.c9926129.js"><link rel="prefetch" href="/developers/assets/js/28.910aab3f.js"><link rel="prefetch" href="/developers/assets/js/29.f0f3da68.js"><link rel="prefetch" href="/developers/assets/js/3.98a25a7a.js"><link rel="prefetch" href="/developers/assets/js/30.4dc87f81.js"><link rel="prefetch" href="/developers/assets/js/31.d6c51da3.js"><link rel="prefetch" href="/developers/assets/js/32.9b6a5d46.js"><link rel="prefetch" href="/developers/assets/js/33.f9a34b67.js"><link rel="prefetch" href="/developers/assets/js/34.1be5ed49.js"><link rel="prefetch" href="/developers/assets/js/35.92bad26a.js"><link rel="prefetch" href="/developers/assets/js/36.4269943c.js"><link rel="prefetch" href="/developers/assets/js/37.e67e3e2b.js"><link rel="prefetch" href="/developers/assets/js/38.95710002.js"><link rel="prefetch" href="/developers/assets/js/39.4a27013e.js"><link rel="prefetch" href="/developers/assets/js/4.c45fc624.js"><link rel="prefetch" href="/developers/assets/js/40.f3b3b2c9.js"><link rel="prefetch" href="/developers/assets/js/41.f5a3fb56.js"><link rel="prefetch" href="/developers/assets/js/42.9a1bdcad.js"><link rel="prefetch" href="/developers/assets/js/43.9267a3df.js"><link rel="prefetch" href="/developers/assets/js/44.151a0e89.js"><link rel="prefetch" href="/developers/assets/js/45.6b0cec03.js"><link rel="prefetch" href="/developers/assets/js/46.df37048f.js"><link rel="prefetch" href="/developers/assets/js/47.9fe86222.js"><link rel="prefetch" href="/developers/assets/js/48.77de4866.js"><link rel="prefetch" href="/developers/assets/js/49.1a12d589.js"><link rel="prefetch" href="/developers/assets/js/5.71cdc252.js"><link rel="prefetch" href="/developers/assets/js/50.50213a02.js"><link rel="prefetch" href="/developers/assets/js/51.ac4a08c7.js"><link rel="prefetch" href="/developers/assets/js/52.f54921c8.js"><link rel="prefetch" href="/developers/assets/js/53.8ea79d5f.js"><link rel="prefetch" href="/developers/assets/js/54.194cf5af.js"><link rel="prefetch" href="/developers/assets/js/55.a5b418b9.js"><link rel="prefetch" href="/developers/assets/js/56.ec8192ea.js"><link rel="prefetch" href="/developers/assets/js/57.4b7ea8cb.js"><link rel="prefetch" href="/developers/assets/js/58.6cb47b2e.js"><link rel="prefetch" href="/developers/assets/js/59.44b4341e.js"><link rel="prefetch" href="/developers/assets/js/6.44988a9b.js"><link rel="prefetch" href="/developers/assets/js/60.55f344f0.js"><link rel="prefetch" href="/developers/assets/js/61.0444b094.js"><link rel="prefetch" href="/developers/assets/js/62.856dc838.js"><link rel="prefetch" href="/developers/assets/js/63.09799600.js"><link rel="prefetch" href="/developers/assets/js/64.cc45f664.js"><link rel="prefetch" href="/developers/assets/js/65.9c451be5.js"><link rel="prefetch" href="/developers/assets/js/66.bf2ee7a5.js"><link rel="prefetch" href="/developers/assets/js/67.25ee9554.js"><link rel="prefetch" href="/developers/assets/js/68.44671807.js"><link rel="prefetch" href="/developers/assets/js/69.ba08ab7e.js"><link rel="prefetch" href="/developers/assets/js/7.2f94e492.js"><link rel="prefetch" href="/developers/assets/js/70.30349711.js"><link rel="prefetch" href="/developers/assets/js/71.a36522f9.js"><link rel="prefetch" href="/developers/assets/js/72.8b6101f2.js"><link rel="prefetch" href="/developers/assets/js/73.ba6b048d.js"><link rel="prefetch" href="/developers/assets/js/74.5abf265c.js"><link rel="prefetch" href="/developers/assets/js/75.867935fc.js"><link rel="prefetch" href="/developers/assets/js/76.c444a096.js"><link rel="prefetch" href="/developers/assets/js/77.2c1c557c.js"><link rel="prefetch" href="/developers/assets/js/78.5f7b1c3e.js"><link rel="prefetch" href="/developers/assets/js/79.a680e3f9.js"><link rel="prefetch" href="/developers/assets/js/8.d9a74d5e.js"><link rel="prefetch" href="/developers/assets/js/80.03770288.js"><link rel="prefetch" href="/developers/assets/js/81.cbe2c473.js"><link rel="prefetch" href="/developers/assets/js/82.1c6ac4bf.js"><link rel="prefetch" href="/developers/assets/js/83.d08419a1.js"><link rel="prefetch" href="/developers/assets/js/84.1505c4c2.js"><link rel="prefetch" href="/developers/assets/js/85.b464c282.js"><link rel="prefetch" href="/developers/assets/js/86.e0df47a8.js"><link rel="prefetch" href="/developers/assets/js/87.abcd802c.js"><link rel="prefetch" href="/developers/assets/js/88.07faba71.js"><link rel="prefetch" href="/developers/assets/js/89.9dc9eba0.js"><link rel="prefetch" href="/developers/assets/js/9.21e12ace.js"><link rel="prefetch" href="/developers/assets/js/90.fc31e508.js"><link rel="prefetch" href="/developers/assets/js/91.f5bd9acd.js"><link rel="prefetch" href="/developers/assets/js/92.0572caf1.js"><link rel="prefetch" href="/developers/assets/js/93.544a3b6b.js"><link rel="prefetch" href="/developers/assets/js/94.377a31bf.js"><link rel="prefetch" href="/developers/assets/js/95.27737fb7.js"><link rel="prefetch" href="/developers/assets/js/96.9655a8bb.js"><link rel="prefetch" href="/developers/assets/js/97.345971d4.js"><link rel="prefetch" href="/developers/assets/js/98.6dabc14b.js"><link rel="prefetch" href="/developers/assets/js/99.6d4060bc.js">
<link rel="stylesheet" href="/developers/assets/css/0.styles.f297bc98.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/developers/" class="home-link router-link-active"><!----> <span class="site-name">Quick Apps</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/developers/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link router-link-active">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/developers/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link router-link-active">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guide</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>UI Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/developers/components/" aria-current="page" class="sidebar-link">Elements Summary</a></li><li><a href="/developers/components/attributes.html" class="sidebar-link">Common Attributes</a></li><li><a href="/developers/components/styles.html" class="sidebar-link">Common Styles</a></li><li><a href="/developers/components/events.html" class="sidebar-link">Common Events</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>Basic Elements</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/developers/components/a.html" class="sidebar-link">a</a></li><li><a href="/developers/components/image.html" class="sidebar-link">image</a></li><li><a href="/developers/components/popup.html" class="sidebar-link">popup</a></li><li><a href="/developers/components/progress.html" aria-current="page" class="active sidebar-link">progress</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/developers/components/progress.html#children-elements" class="sidebar-link">Children Elements</a></li><li class="sidebar-sub-header"><a href="/developers/components/progress.html#attributes" class="sidebar-link">Attributes</a></li><li class="sidebar-sub-header"><a href="/developers/components/progress.html#css-properties" class="sidebar-link">CSS Properties</a></li><li class="sidebar-sub-header"><a href="/developers/components/progress.html#events" class="sidebar-link">Events</a></li><li class="sidebar-sub-header"><a href="/developers/components/progress.html#methods" class="sidebar-link">Methods</a></li><li class="sidebar-sub-header"><a href="/developers/components/progress.html#example" class="sidebar-link">Example</a></li></ul></li><li><a href="/developers/components/rating.html" class="sidebar-link">rating</a></li><li><a href="/developers/components/slot.html" class="sidebar-link">slot</a></li><li><a href="/developers/components/span.html" class="sidebar-link">span</a></li><li><a href="/developers/components/text.html" class="sidebar-link">text</a></li><li><a href="/developers/components/web.html" class="sidebar-link">web</a></li></ul></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Containers</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Forms</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Media</span> <span class="arrow right"></span></p> <!----></section></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>API &amp; Services</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="progress"><a href="#progress" class="header-anchor">#</a> <code>progress</code></h1> <p>Progress indicator.</p> <img src="/developers/assets/img/progress01.7b5b6202.gif" alt="Progress statuses on a Quick App" style="height:500px;border-radius:6px;border:1px #333333 solid;"> <p>(<a href="#example">Example code</a>)</p> <p></p><div class="table-of-contents"><ul><li><a href="#children-elements">Children Elements</a></li><li><a href="#attributes">Attributes</a><ul><li><a href="#percent">percent</a></li><li><a href="#type">type</a></li></ul></li><li><a href="#css-properties">CSS Properties</a><ul><li><a href="#color">color</a></li><li><a href="#stroke-width">stroke-width</a></li><li><a href="#layer-color">layer-color</a></li></ul></li><li><a href="#events">Events</a></li><li><a href="#methods">Methods</a></li><li><a href="#example">Example</a></li></ul></div><p></p> <h2 id="children-elements"><a href="#children-elements" class="header-anchor">#</a> Children Elements</h2> <p>This element doesn't support children elements.</p> <h2 id="attributes"><a href="#attributes" class="header-anchor">#</a> Attributes</h2> <p>In addition to the <a href="./attributes">common attributes</a>, this element may contain the following attributes.</p> <ul><li><a href="#percent"><code>percent</code></a></li> <li><a href="#type"><code>type</code></a></li></ul> <h3 id="percent"><a href="#percent" class="header-anchor">#</a> <code>percent</code></h3> <p>This attribute indicates the value of the progress as a percentage.</p> <ul><li>Type: <code>number</code></li> <li>Default value: <code>0</code></li> <li>Mandatory: no</li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>This attribute is invalid when <a href="#type"><code>type</code></a> is <code>circular</code>.
Decimal values will be rounded off to integers.</p></div> <h3 id="type"><a href="#type" class="header-anchor">#</a> <code>type</code></h3> <p>Type of the progress bar.</p> <ul><li>Type: <code>string</code> (<code>horizontal</code> | <code>circular</code>)</li> <li>Default value: <code>horizontal</code></li> <li>Mandatory: no</li></ul> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>The value of this attribute cannot be modified dynamically.</p></div> <h2 id="css-properties"><a href="#css-properties" class="header-anchor">#</a> CSS Properties</h2> <p>In addition to the <a href="./styles">common styles</a>, this element supports the following styling properties:</p> <ul><li><a href="#color"><code>color</code></a></li> <li><a href="#stroke-width"><code>stroke-width</code></a></li> <li><a href="#layer-color"><code>layer-color</code></a></li></ul> <p>This element supports the <a href="/developers/guide/styling.html#css-selectors"><code>:active</code> pseudo-class</a>.</p> <h3 id="color"><a href="#color" class="header-anchor">#</a> <code>color</code></h3> <p>Color of the progress bar.</p> <ul><li>Type: <code>&lt;color&gt;</code></li> <li>Default value: <code>#33b4ff</code></li> <li>Mandatory: no</li></ul> <h3 id="stroke-width"><a href="#stroke-width" class="header-anchor">#</a> <code>stroke-width</code></h3> <p>Width of a horizontal progress bar.</p> <ul><li>Type: <code>&lt;length&gt;</code></li> <li>Default value: <code>32px</code></li> <li>Mandatory: no</li></ul> <h3 id="layer-color"><a href="#layer-color" class="header-anchor">#</a> <code>layer-color</code></h3> <p>Background color of a progress bar.</p> <ul><li>Type: <code>&lt;color&gt;</code></li> <li>Default value: <code>#f0f0f0</code></li> <li>Mandatory: no</li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <ul><li>For a <code>horizontal</code> progress bar, the background color by default is <code>#f0f0f0</code>.</li> <li>For a <code>circular</code> progress bar, the <code>width</code> and <code>height</code> are <code>32px</code> by default. If the <code>width</code> and <code>height</code> are different, the smaller value will be applied to both properties.</li> <li>To set the width of a progress bar, you should place the <code>progress</code> element into a <a href="./div"><code>div</code></a> element and set the <code>div</code>'s width.</li></ul></div> <h2 id="events"><a href="#events" class="header-anchor">#</a> Events</h2> <p>This element support all the <a href="./events">common events</a>, with the exception of <a href="/developers/components/events.html#swipe"><code>swipe</code></a>.</p> <h2 id="methods"><a href="#methods" class="header-anchor">#</a> Methods</h2> <p>This element does not have additional methods.</p> <h2 id="example"><a href="#example" class="header-anchor">#</a> Example</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>case-title mt-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>type=&quot;horizontal&quot;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>progress-box row-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>progress</span> <span class="token attr-name">percent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>40<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>horizontal-progress<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>progress</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>case-title mt-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>type=&quot;circular&quot;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>progress-box row-center column-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>progress</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>circular<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>circular-progress<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>progress</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sass<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.progress-box</span> <span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.horizontal-progress</span> <span class="token punctuation">{</span>
<span class="token property">stroke-width</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.circular-progress</span> <span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 70px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 70px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://gitlab.ow2.org/quick-app-initiative/quick-app-initiative/edit/master/technology-guides/developer-docs/content/components/progress.md" target="_blank" rel="noopener noreferrer">Help us improve this document!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">10/22/2021, 8:21:24 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/developers/components/popup.html" class="prev">
popup
</a></span> <span class="next"><a href="/developers/components/rating.html">
rating
</a>
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
<script src="/developers/assets/js/app.4b1167ed.js" defer></script><script src="/developers/assets/js/2.0c90b5ef.js" defer></script><script src="/developers/assets/js/24.cf493e39.js" defer></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>rating | Quick Apps</title>
<meta name="generator" content="VuePress 1.9.5">
<meta name="description" content="Quick App reference guide for developers">
<meta name="theme-color" content="#38b5ff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="preload" href="/developers/assets/css/0.styles.f297bc98.css" as="style"><link rel="preload" href="/developers/assets/js/app.4b1167ed.js" as="script"><link rel="preload" href="/developers/assets/js/2.0c90b5ef.js" as="script"><link rel="preload" href="/developers/assets/js/25.eed84f79.js" as="script"><link rel="prefetch" href="/developers/assets/js/10.2156cdfe.js"><link rel="prefetch" href="/developers/assets/js/100.038af2fc.js"><link rel="prefetch" href="/developers/assets/js/101.315bea04.js"><link rel="prefetch" href="/developers/assets/js/102.151e66a2.js"><link rel="prefetch" href="/developers/assets/js/103.9ba01750.js"><link rel="prefetch" href="/developers/assets/js/104.e04d6157.js"><link rel="prefetch" href="/developers/assets/js/105.03af8b7d.js"><link rel="prefetch" href="/developers/assets/js/106.fdbb7328.js"><link rel="prefetch" href="/developers/assets/js/107.0984490c.js"><link rel="prefetch" href="/developers/assets/js/108.2234eb4c.js"><link rel="prefetch" href="/developers/assets/js/109.e15c5ad7.js"><link rel="prefetch" href="/developers/assets/js/11.dc71520b.js"><link rel="prefetch" href="/developers/assets/js/110.7e092174.js"><link rel="prefetch" href="/developers/assets/js/111.1b1d57da.js"><link rel="prefetch" href="/developers/assets/js/112.e590539f.js"><link rel="prefetch" href="/developers/assets/js/113.cf4827c6.js"><link rel="prefetch" href="/developers/assets/js/12.107ffb2e.js"><link rel="prefetch" href="/developers/assets/js/13.5d658c48.js"><link rel="prefetch" href="/developers/assets/js/14.64254d8f.js"><link rel="prefetch" href="/developers/assets/js/15.9a04fe04.js"><link rel="prefetch" href="/developers/assets/js/16.82d55f37.js"><link rel="prefetch" href="/developers/assets/js/17.fdc401b5.js"><link rel="prefetch" href="/developers/assets/js/18.aa734709.js"><link rel="prefetch" href="/developers/assets/js/19.a3bddb91.js"><link rel="prefetch" href="/developers/assets/js/20.898f80cd.js"><link rel="prefetch" href="/developers/assets/js/21.b5f4ba1a.js"><link rel="prefetch" href="/developers/assets/js/22.6999e8ff.js"><link rel="prefetch" href="/developers/assets/js/23.bb7a4ae1.js"><link rel="prefetch" href="/developers/assets/js/24.cf493e39.js"><link rel="prefetch" href="/developers/assets/js/26.a3822e1c.js"><link rel="prefetch" href="/developers/assets/js/27.c9926129.js"><link rel="prefetch" href="/developers/assets/js/28.910aab3f.js"><link rel="prefetch" href="/developers/assets/js/29.f0f3da68.js"><link rel="prefetch" href="/developers/assets/js/3.98a25a7a.js"><link rel="prefetch" href="/developers/assets/js/30.4dc87f81.js"><link rel="prefetch" href="/developers/assets/js/31.d6c51da3.js"><link rel="prefetch" href="/developers/assets/js/32.9b6a5d46.js"><link rel="prefetch" href="/developers/assets/js/33.f9a34b67.js"><link rel="prefetch" href="/developers/assets/js/34.1be5ed49.js"><link rel="prefetch" href="/developers/assets/js/35.92bad26a.js"><link rel="prefetch" href="/developers/assets/js/36.4269943c.js"><link rel="prefetch" href="/developers/assets/js/37.e67e3e2b.js"><link rel="prefetch" href="/developers/assets/js/38.95710002.js"><link rel="prefetch" href="/developers/assets/js/39.4a27013e.js"><link rel="prefetch" href="/developers/assets/js/4.c45fc624.js"><link rel="prefetch" href="/developers/assets/js/40.f3b3b2c9.js"><link rel="prefetch" href="/developers/assets/js/41.f5a3fb56.js"><link rel="prefetch" href="/developers/assets/js/42.9a1bdcad.js"><link rel="prefetch" href="/developers/assets/js/43.9267a3df.js"><link rel="prefetch" href="/developers/assets/js/44.151a0e89.js"><link rel="prefetch" href="/developers/assets/js/45.6b0cec03.js"><link rel="prefetch" href="/developers/assets/js/46.df37048f.js"><link rel="prefetch" href="/developers/assets/js/47.9fe86222.js"><link rel="prefetch" href="/developers/assets/js/48.77de4866.js"><link rel="prefetch" href="/developers/assets/js/49.1a12d589.js"><link rel="prefetch" href="/developers/assets/js/5.71cdc252.js"><link rel="prefetch" href="/developers/assets/js/50.50213a02.js"><link rel="prefetch" href="/developers/assets/js/51.ac4a08c7.js"><link rel="prefetch" href="/developers/assets/js/52.f54921c8.js"><link rel="prefetch" href="/developers/assets/js/53.8ea79d5f.js"><link rel="prefetch" href="/developers/assets/js/54.194cf5af.js"><link rel="prefetch" href="/developers/assets/js/55.a5b418b9.js"><link rel="prefetch" href="/developers/assets/js/56.ec8192ea.js"><link rel="prefetch" href="/developers/assets/js/57.4b7ea8cb.js"><link rel="prefetch" href="/developers/assets/js/58.6cb47b2e.js"><link rel="prefetch" href="/developers/assets/js/59.44b4341e.js"><link rel="prefetch" href="/developers/assets/js/6.44988a9b.js"><link rel="prefetch" href="/developers/assets/js/60.55f344f0.js"><link rel="prefetch" href="/developers/assets/js/61.0444b094.js"><link rel="prefetch" href="/developers/assets/js/62.856dc838.js"><link rel="prefetch" href="/developers/assets/js/63.09799600.js"><link rel="prefetch" href="/developers/assets/js/64.cc45f664.js"><link rel="prefetch" href="/developers/assets/js/65.9c451be5.js"><link rel="prefetch" href="/developers/assets/js/66.bf2ee7a5.js"><link rel="prefetch" href="/developers/assets/js/67.25ee9554.js"><link rel="prefetch" href="/developers/assets/js/68.44671807.js"><link rel="prefetch" href="/developers/assets/js/69.ba08ab7e.js"><link rel="prefetch" href="/developers/assets/js/7.2f94e492.js"><link rel="prefetch" href="/developers/assets/js/70.30349711.js"><link rel="prefetch" href="/developers/assets/js/71.a36522f9.js"><link rel="prefetch" href="/developers/assets/js/72.8b6101f2.js"><link rel="prefetch" href="/developers/assets/js/73.ba6b048d.js"><link rel="prefetch" href="/developers/assets/js/74.5abf265c.js"><link rel="prefetch" href="/developers/assets/js/75.867935fc.js"><link rel="prefetch" href="/developers/assets/js/76.c444a096.js"><link rel="prefetch" href="/developers/assets/js/77.2c1c557c.js"><link rel="prefetch" href="/developers/assets/js/78.5f7b1c3e.js"><link rel="prefetch" href="/developers/assets/js/79.a680e3f9.js"><link rel="prefetch" href="/developers/assets/js/8.d9a74d5e.js"><link rel="prefetch" href="/developers/assets/js/80.03770288.js"><link rel="prefetch" href="/developers/assets/js/81.cbe2c473.js"><link rel="prefetch" href="/developers/assets/js/82.1c6ac4bf.js"><link rel="prefetch" href="/developers/assets/js/83.d08419a1.js"><link rel="prefetch" href="/developers/assets/js/84.1505c4c2.js"><link rel="prefetch" href="/developers/assets/js/85.b464c282.js"><link rel="prefetch" href="/developers/assets/js/86.e0df47a8.js"><link rel="prefetch" href="/developers/assets/js/87.abcd802c.js"><link rel="prefetch" href="/developers/assets/js/88.07faba71.js"><link rel="prefetch" href="/developers/assets/js/89.9dc9eba0.js"><link rel="prefetch" href="/developers/assets/js/9.21e12ace.js"><link rel="prefetch" href="/developers/assets/js/90.fc31e508.js"><link rel="prefetch" href="/developers/assets/js/91.f5bd9acd.js"><link rel="prefetch" href="/developers/assets/js/92.0572caf1.js"><link rel="prefetch" href="/developers/assets/js/93.544a3b6b.js"><link rel="prefetch" href="/developers/assets/js/94.377a31bf.js"><link rel="prefetch" href="/developers/assets/js/95.27737fb7.js"><link rel="prefetch" href="/developers/assets/js/96.9655a8bb.js"><link rel="prefetch" href="/developers/assets/js/97.345971d4.js"><link rel="prefetch" href="/developers/assets/js/98.6dabc14b.js"><link rel="prefetch" href="/developers/assets/js/99.6d4060bc.js">
<link rel="stylesheet" href="/developers/assets/css/0.styles.f297bc98.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/developers/" class="home-link router-link-active"><!----> <span class="site-name">Quick Apps</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/developers/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link router-link-active">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/developers/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link router-link-active">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guide</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>UI Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/developers/components/" aria-current="page" class="sidebar-link">Elements Summary</a></li><li><a href="/developers/components/attributes.html" class="sidebar-link">Common Attributes</a></li><li><a href="/developers/components/styles.html" class="sidebar-link">Common Styles</a></li><li><a href="/developers/components/events.html" class="sidebar-link">Common Events</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>Basic Elements</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/developers/components/a.html" class="sidebar-link">a</a></li><li><a href="/developers/components/image.html" class="sidebar-link">image</a></li><li><a href="/developers/components/popup.html" class="sidebar-link">popup</a></li><li><a href="/developers/components/progress.html" class="sidebar-link">progress</a></li><li><a href="/developers/components/rating.html" aria-current="page" class="active sidebar-link">rating</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/developers/components/rating.html#children-elements" class="sidebar-link">Children Elements</a></li><li class="sidebar-sub-header"><a href="/developers/components/rating.html#attributes" class="sidebar-link">Attributes</a></li><li class="sidebar-sub-header"><a href="/developers/components/rating.html#css-properties" class="sidebar-link">CSS Properties</a></li><li class="sidebar-sub-header"><a href="/developers/components/rating.html#events" class="sidebar-link">Events</a></li><li class="sidebar-sub-header"><a href="/developers/components/rating.html#methods" class="sidebar-link">Methods</a></li><li class="sidebar-sub-header"><a href="/developers/components/rating.html#example" class="sidebar-link">Example</a></li></ul></li><li><a href="/developers/components/slot.html" class="sidebar-link">slot</a></li><li><a href="/developers/components/span.html" class="sidebar-link">span</a></li><li><a href="/developers/components/text.html" class="sidebar-link">text</a></li><li><a href="/developers/components/web.html" class="sidebar-link">web</a></li></ul></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Containers</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Forms</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Media</span> <span class="arrow right"></span></p> <!----></section></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>API &amp; Services</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="rating"><a href="#rating" class="header-anchor">#</a> <code>rating</code></h1> <p>Star-based rating input field.</p> <img src="/developers/assets/img/rating01.2fef427c.gif" alt="Rating stars on a Quick App" style="height:500px;border-radius:6px;border:1px #333333 solid;"> <p>(<a href="#example">Example code</a>)</p> <p></p><div class="table-of-contents"><ul><li><a href="#children-elements">Children Elements</a></li><li><a href="#attributes">Attributes</a><ul><li><a href="#numstars">numstars</a></li><li><a href="#rating">rating</a></li><li><a href="#stepsize">stepsize</a></li><li><a href="#indicator">indicator</a></li></ul></li><li><a href="#css-properties">CSS Properties</a><ul><li><a href="#star-background">star-background</a></li><li><a href="#star-foreground">star-foreground</a></li><li><a href="#star-secondary">star-secondary</a></li><li><a href="#width">width</a></li><li><a href="#height">height</a></li></ul></li><li><a href="#events">Events</a><ul><li><a href="#change">change</a></li></ul></li><li><a href="#methods">Methods</a></li><li><a href="#example">Example</a></li></ul></div><p></p> <h2 id="children-elements"><a href="#children-elements" class="header-anchor">#</a> Children Elements</h2> <p>This element doesn't support any element as child node.</p> <h2 id="attributes"><a href="#attributes" class="header-anchor">#</a> Attributes</h2> <p>In addition to the <a href="./attributes">common attributes</a>, this element may contain the following attributes.</p> <ul><li><a href="#numstars"><code>numstars</code></a></li> <li><a href="#rating"><code>rating</code></a></li> <li><a href="#stepsize"><code>stepsize</code></a></li> <li><a href="#indicator"><code>indicator</code></a></li></ul> <h3 id="numstars"><a href="#numstars" class="header-anchor">#</a> <code>numstars</code></h3> <p>This attribute indicates the number of star elements to be displayed on a rating bar.</p> <ul><li>Type: <code>number</code></li> <li>Default value: <code>5</code></li> <li>Mandatory: no</li></ul> <h3 id="rating-2"><a href="#rating-2" class="header-anchor">#</a> <code>rating</code></h3> <p>The current value with the number of selected stars.</p> <ul><li>Type: <code>number</code></li> <li>Default value: <code>5</code></li> <li>Mandatory: no</li></ul> <h3 id="stepsize"><a href="#stepsize" class="header-anchor">#</a> <code>stepsize</code></h3> <p>This attribute indicates the size of the steps for the rating.</p> <ul><li>Type: <code>number</code></li> <li>Default value: <code>0.5</code></li> <li>Mandatory: no</li></ul> <h3 id="indicator"><a href="#indicator" class="header-anchor">#</a> <code>indicator</code></h3> <p>Flag to indicate if rating field is editable (<code>false</code>) or not (<code>true</code>).</p> <ul><li>Type: <code>boolean</code></li> <li>Default value: <code>false</code></li> <li>Mandatory: no</li></ul> <h2 id="css-properties"><a href="#css-properties" class="header-anchor">#</a> CSS Properties</h2> <p>In addition to the <a href="./styles">common styles</a>, this element supports the following styling properties:</p> <ul><li><a href="#star-background"><code>star-background</code></a></li> <li><a href="#star-foreground"><code>star-foreground</code></a></li> <li><a href="#star-secondary"><code>star-secondary</code></a></li> <li><a href="#width"><code>width</code></a></li> <li><a href="#height"><code>height</code></a></li></ul> <p>This element supports the <a href="/developers/guide/styling.html#css-selectors"><code>:active</code> pseudo-class</a>.</p> <h3 id="star-background"><a href="#star-background" class="header-anchor">#</a> <code>star-background</code></h3> <p>Background image of the selectable element (when it is not selected). The URI specified in this element may contain either a local resource or a base64-encoded image.</p> <ul><li>Type: <code>uri</code></li> <li>Default value: -</li> <li>Mandatory: no</li></ul> <h3 id="star-foreground"><a href="#star-foreground" class="header-anchor">#</a> <code>star-foreground</code></h3> <p>Image of the selectable element when it's selected. The URI specified in this element may contain either a local resource or a base64-encoded image.</p> <ul><li>Type: <code>uri</code></li> <li>Default value: -</li> <li>Mandatory: no</li></ul> <h3 id="star-secondary"><a href="#star-secondary" class="header-anchor">#</a> <code>star-secondary</code></h3> <p>Secondary image of the selectable element when it's selected. The URI specified in this element may contain either a local resource or a base64-encoded image.</p> <ul><li>Type: <code>uri</code></li> <li>Default value: -</li> <li>Mandatory: no</li></ul> <h3 id="width"><a href="#width" class="header-anchor">#</a> <code>width</code></h3> <p>Attribute that indicates the width of the stars rating bar.</p> <ul><li>Type: <code>string</code> (<code>&lt;length&gt;</code> | <code>&lt;percentage&gt;</code>)</li> <li>Default value: (<code>numstars</code> value x width of a star)</li> <li>Mandatory: no</li></ul> <h3 id="height"><a href="#height" class="header-anchor">#</a> <code>height</code></h3> <p>Height of a star.</p> <ul><li>Type: <code>string</code> (<code>&lt;length&gt;</code> | <code>&lt;percentage&gt;</code>)</li> <li>Default value: (height of a star)</li> <li>Mandatory: no</li></ul> <h2 id="events"><a href="#events" class="header-anchor">#</a> Events</h2> <p>This element supports the <a href="./events">common events</a>, with the exception of <a href="/developers/components/events.html#click"><code>click</code></a>, <a href="/developers/components/events.html#longpress"><code>longpress</code></a>, and <a href="/developers/components/events.html#swipe"><code>swipe</code></a>. In addition to this, this element supports the following event:</p> <ul><li><a href="#change"><code>change</code></a></li></ul> <h3 id="change"><a href="#change" class="header-anchor">#</a> <code>change</code></h3> <p>This event is triggered when the current value of a rating input changes.</p> <p><strong>Additional parameters</strong>:</p> <ul><li><code>{ rating: number }</code></li></ul> <h2 id="methods"><a href="#methods" class="header-anchor">#</a> Methods</h2> <p>This element does not have additional methods.</p> <h2 id="example"><a href="#example" class="header-anchor">#</a> Example</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>case-title mt-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Slide on the stars to rate<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item-container rating-container row-center column-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rating</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ratingStyle<span class="token punctuation">&quot;</span></span> <span class="token attr-name">rating</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rating</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sass<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.rating-container</span> <span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span> 320px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.ratingStyle</span> <span class="token punctuation">{</span>
<span class="token property">star-background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>/Common/img/ic_stars_gray_mid.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token property">star-foreground</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>/Common/img/ic_stars_blue_mid.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token property">star-secondary</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>/Common/img/ic_stars_blue_half_mid.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 64px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://gitlab.ow2.org/quick-app-initiative/quick-app-initiative/edit/master/technology-guides/developer-docs/content/components/rating.md" target="_blank" rel="noopener noreferrer">Help us improve this document!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">10/22/2021, 2:55:48 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">