1import{r as t,o as p,c as o,b as n,a as l,w as c,F as u,e as s,d as a}from"./app.63985fde.js";import{_ as i}from"./plugin-vue_export-helper.21dcd24c.js";const r={},d=s('<h1 id="qcollapse-\u{1FA97}" tabindex="-1"><a class="header-anchor" href="#qcollapse-\u{1FA97}" aria-hidden="true">#</a> QCollapse \u{1FA97}</h1><p>Collapse groups a collection of contents in tabs.</p><h2 id="when-to-use" tabindex="-1"><a class="header-anchor" href="#when-to-use" aria-hidden="true">#</a> When to use</h2><ul><li>Can be used to show or hide content to keep the page clean.</li></ul><h2 id="example" tabindex="-1"><a class="header-anchor" href="#example" aria-hidden="true">#</a> Example</h2><p>Default view:</p>',6),k=n("iframe",{height:"450",style:{width:"100%"},scrolling:"no",frameborder:"no",src:"/QCollapse/main.html"},null,-1),b=s(`<p>Using in template:</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>q-collapse</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>activeNames<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 2 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>q-collapse-item</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Consistency<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>consistency<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 3 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> 4 Consistent with real life: in line with the process and logic of real 5 life, and comply with languages and habits that the users are used to; 6 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> 7 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> 8 Consistent within interface: all elements should be consistent, such as: 9 design style, icons and texts, position of elements, etc. 10 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> 11 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>q-collapse-item</span><span class="token punctuation">></span></span> 12 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>q-collapse-item</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Efficiency<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 13 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> 14 Simplify the process: keep operating process simple and intuitive; 15 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> 16 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> 17 Definite and clear: enunciate your intentions clearly so that the users 18 can quickly understand and make decisions; 19 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> 20 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> 21 Easy to identify: the interface should be straightforward, which helps 22 the users to identify and frees them from memorizing and recalling. 23 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> 24 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>q-collapse-item</span><span class="token punctuation">></span></span> 25 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>q-collapse-item</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Controllability<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 26 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
27 Decision making: giving advices about operations is acceptable, but do 28 not make decisions for the users; 29 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> 30 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> 31 Controlled consequences: users should be granted the freedom to operate, 32 including canceling, aborting or terminating current operation. 33 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> 34 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>q-collapse-item</span><span class="token punctuation">></span></span> 35<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>q-collapse</span><span class="token punctuation">></span></span> 36</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div><p>Using in component instance:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 37 <span class="token keyword">const</span> activeNames <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'consistency'</span><span class="token punctuation">]</span><span class="token punctuation">;</span> 38 <span class="token keyword">return</span> <span class="token punctuation">{</span> activeNames <span class="token punctuation">}</span><span class="token punctuation">;</span> 39 <span class="token punctuation">}</span> 40</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="props" tabindex="-1"><a class="header-anchor" href="#props" aria-hidden="true">#</a> Props</h2><h3 id="modelvalue" tabindex="-1"><a class="header-anchor" href="#modelvalue" aria-hidden="true">#</a> modelValue</h3><ul><li>Type: <code>String</code>, <code>Number</code>, <code>Array</code></li><li>Default: <code>null</code></li></ul><p>Binding value.</p><div class="language-typescript ext-ts line-numbers-mode"><pre class="language-typescript"><code><span class="token comment">// import type from lib</span> 41<span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> QCollapsePropModelValue <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@qvant'</span><span class="token punctuation">;</span> 42 43<span class="token comment">// TS type</span> 44<span class="token class-name"><span class="token keyword">export</span></span> <span class="token keyword">type</span> <span class="token class-name">QCollapsePropModelValue</span> <span class="token operator">=</span>
44 Nullable<span class="token operator"><</span> 45 <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token punctuation">(</span><span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">]</span> 46<span class="token operator">></span><span class="token punctuation">;</span> 47</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="accordion" tabindex="-1"><a class="header-anchor" href="#accordion" aria-hidden="true">#</a> accordion</h3><ul><li>Type: <code>Boolean</code></li><li>Default: <code>false</code></li></ul><p>Shrink all panels, except the last selected.</p><p>Using in template:</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>q-collapse</span> 48 <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>activeNames<span class="token punctuation">"</span></span> 49 <span class="token attr-name">accordion</span> 50<span class="token punctuation">></span></span> 51 ... 52<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>q-collapse</span><span class="token punctuation">></span></span> 53</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div>`,14),m=n("iframe",{height:"450",style:{width:"100%"},scrolling:"no",frameborder:"no",src:"/QCollapse/accordion.html"},null,-1),g=s(`<h3 id="closeicon" tabindex="-1"><a class="header-anchor" href="#closeicon" aria-hidden="true">#</a> closeIcon</h3><ul><li>Type: <code>String | Component</code></li><li>Default: <code>null</code></li></ul><p>Allows you to control what icon will be displayed near opened <code>QCollapseItem</code>.</p><hr><p><strong>IMPORTANT</strong></p><p>For proper use you need to provide both <code>openIcon</code> and <code>closeIcon</code></p><hr><p>Using in template:</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>q-collapse</span> <span class="token attr-name">close-icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>your-icon-component-name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 54 ... 55<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>q-collapse</span><span class="token punctuation">></span></span> 56<span class="token comment"><!-- or --></span> 57<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>q-collapse</span> <span class="token attr-name">:close-icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>YourIconComponent<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 58... 59<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>q-collapse</span><span class="token punctuation">></span></span> 60</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div>`,9),h=n("iframe",{height:"100",style:{width:"100%"},scrolling:"no",frameborder:"no",src:"/QCollapse/closeIcon.html"},null,-1),v=s(`<h3 id="openicon" tabindex="-1"><a class="header-anchor" href="#openicon" aria-hidden="true">
60#</a> openIcon</h3><ul><li>Type: <code>String | Component</code></li><li>Default: <code>null</code></li></ul><p>Allows you to control what icon will be displayed near closed <code>QCollapseItem</code>.</p><hr><p><strong>IMPORTANT</strong></p><p>For proper use you need to provide both <code>openIcon</code> and <code>closeIcon</code></p><hr><p>Using in template:</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>q-collapse</span> <span class="token attr-name">open-icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>your-icon-component-name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 61 ... 62<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>q-collapse</span><span class="token punctuation">></span></span> 63<span class="token comment"><!-- or --></span> 64<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>q-collapse</span> <span class="token attr-name">:open-icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>YourIconComponent<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 65... 66<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>q-collapse</span><span class="token punctuation">></span></span> 67</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div>`,9),f=n("iframe",{height:"100",style:{width:"100%"},scrolling:"no",frameborder:"no",src:"/QCollapse/openIcon.html"},null,-1),q=s(`<h2 id="events" tabindex="-1"><a class="header-anchor" href="#events" aria-hidden="true">#</a> Events</h2><h3 id="update-modelvalue" tabindex="-1"><a class="header-anchor" href="#update-modelvalue" aria-hidden="true">#</a> update:modelValue</h3><p>Triggers when model updates.</p><h3 id="change" tabindex="-1"><a class="header-anchor" href="#change" aria-hidden="true">#</a> change</h3><p>Alias for update:modelValue</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>q-collapse</span> 68 <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>activeNames<span class="token punctuation">"</span></span> 69 <span class="token attr-name"><span class="token namespace">@update:</span>modelValue</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>handleValueUpdate<span class="token punctuation">"</span></span> 70 <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>handleValueUpdate<span class="token punctuation">"</span></span> 71<span class="token punctuation">></span></span> 72 ... 73<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>q-collapse</span><span class="token punctuation">></span></span> 74</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 75 <span class="token keyword">const</span> <span class="token function-variable function">handleValueUpdate</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
76 <span class="token operator">...</span> 77 <span class="token punctuation">}</span> 78 79 <span class="token keyword">return</span> <span class="token punctuation">{</span> handleValueUpdate <span class="token punctuation">}</span> 80 <span class="token punctuation">}</span> 81</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="slots" tabindex="-1"><a class="header-anchor" href="#slots" aria-hidden="true">#</a> Slots</h2><h3 id="default" tabindex="-1"><a class="header-anchor" href="#default" aria-hidden="true">#</a> default</h3>`,9),y=a("See "),_=a("example"),x=a(" above. Using "),w=n("code",null,"default",-1),C=a(" slot recommended by default.");function I(V,N){const e=t("RouterLink");return p(),o(u,null,[d,k,b,m,g,h,v,f,q,n("p",null,[y,l(e,{to:"/components/QCollapse/#example"},{default:c(()=>[_]),_:1}),x,w,C])],64)}var U=i(r,[["render",I]]);export{U as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.