https://qui-docs.netlify.app/assets/QBreadcrumbs.html.95605e7a.js

1import{r as e,o as c,c as u,b as n,a,w as t,F as i,d as s,e as o}from"./app.63985fde.js";import{_ as b}from"./plugin-vue_export-helper.21dcd24c.js";const k={},d=n("h1",{id:"qbreadcrumbs-\u{1F35E}",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#qbreadcrumbs-\u{1F35E}","aria-hidden":"true"},"#"),s(" QBreadcrumbs \u{1F35E}")],-1),m=s("Displays the location of the current page, shows all nested levels. Try a sandbox "),h={href:"https://qui-max.netlify.app/?path=/story/components-qbreadcrumbs--default",target:"_blank",rel:"noopener noreferrer"},_=s("story"),g=n("h2",{id:"when-to-use",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#when-to-use","aria-hidden":"true"},"#"),s(" When to use")],-1),y=n("ul",null,[n("li",null,"When the system has more than two layers in a hierarchy."),n("li",null,"When you need to inform the user of where they are."),n("li",null,"When the user may need to navigate back to a higher level.")],-1),f=n("h2",{id:"example",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#example","aria-hidden":"true"},"#"),s(" Example")],-1),v=n("p",null,"Default view:",-1),x=n("iframe",{height:"80",style:{width:"100%"},scrolling:"no",frameborder:"no",src:"/QBreadcrumbs/main.html"},null,-1),w=o(`<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">&lt;</span>q-breadcrumbs</span> <span class="token attr-name">:route</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>route<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
2</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>Using in component instance:</p>`,3),q=n("div",{class:"language-javascript ext-js line-numbers-mode"},[n("pre",{class:"language-javascript"},[n("code",null,[n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
3  `),n("span",{class:"token keyword"},"const"),s(" route "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"["),s(`
4    `),n("span",{class:"token punctuation"},"{"),s(`
5      `),n("span",{class:"token literal-property property"},"path"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'path-a'"),n("span",{class:"token punctuation"},","),s(`
6      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'ROUTE_A'"),n("span",{class:"token punctuation"},","),s(`
7      `),n("span",{class:"token literal-property property"},"meta"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
8        `),n("span",{class:"token literal-property property"},"breadcrumb"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'First route'"),s(`
9      `),n("span",{class:"token punctuation"},"}"),s(`
10    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
11    `),n("span",{class:"token punctuation"},"{"),s(`
12      `),n("span",{class:"token literal-property property"},"path"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'path-b'"),n("span",{class:"token punctuation"},","),s(`
13      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'ROUTE_b'"),n("span",{class:"token punctuation"},","),s(`
14      `),n("span",{class:"token literal-property property"},"meta"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
15        `),n("span",{class:"token literal-property property"},"breadcrumb"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'Second route'"),s(`
16      `),n("span",{class:"token punctuation"},"}"),s(`
17    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
18    `),n("span",{class:"token punctuation"},"{"),s(`
19      `),n("span",{class:"token literal-property property"},"path"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'path-c'"),n("span",{class:"token punctuation"},","),s(`
20      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'ROUTE_c'"),n("span",{class:"token punctuation"},","),s(`
21      `),n("span",{class:"token literal-property property"},"meta"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
22        `),n("span",{class:"token literal-property property"},"breadcrumb"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'Third route'"),s(`
23      `),n("span",{class:"token punctuation"},"}"),s(`
24    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
25  `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),s(`
26
27  `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(" route "),n("span",{class:"token punctuation"},"}"),s(`
28`),n("span",{class:"token punctuation"},"}"),s(`
29`)])]),n("div",{class:"line-numbers"},[n("span",{class:"line-number"},"1"),n("br"),n("span",{class:"line-number"},"2"),n("br"),n("span",{class:"line-number"},"3"),n("br"),n("span",{class:"line-number"},"4"),n("br"),n("span",{class:"line-number"},"5"),n("br"),n("span",{class:"line-number"},"6"),n("br"),n("span",{class:"line-number"},"7"),n("br"),n("span",{class:"line-number"},"8"),n("br"),n("span",{class:"line-number"},"9"),n("br"),n("span",{class:"line-number"},"10"),n("br"),n("span",{class:"line-number"},"11"),n("br"),n("span",{class:"line-number"},"12"),n("br"),n("span",{class:"line-number"},"13"),n("br"),n("span",{class:"line-number"},"14"),n("br"),n("span",{class:"line-number"},"15"),n("br"),n("span",{class:"line-number"},"16"),n("br"),n("span",{class:"line-number"},"17"),n("br"),n("span",{class:"line-number"},"18"),n("br"),n("span",{class:"line-number"},"19"),n("br"),n("span",{class:"line-number"},"20"),n("br"),n("span",{class:"line-number"},"21"),n("br"),n("span",{class:"line-number"},"22"),n("br"),n("span",{class:"line-number"},"23"),n("br"),n("span",{class:"line-number"},"24"),n("br"),n("span",{class:"line-number"},"25"),n("br"),n("span",{class:"line-number"},"26"),n("br"),n("span",{class:"line-number"},"27"),n("br")])],-1),T=n("div",{class:"language-typescript ext-ts line-numbers-mode"},[n("pre",{class:"language-typescript"},[n("code",null,[n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token keyword"},"type"),s(),n("span",{class:"token punctuation"},"{"),s(" QBreadcrumbsPropRoute "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@qvant/qui-max'"),n("span",{class:"token punctuation"},";"),s(`
30
31`),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
32  `),n("span",{class:"token keyword"},"const"),s(" route"),n("span",{class:"token operator"},":"),s(" QBreadcrumbsPropRoute "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"["),s(`
33    `),n("span",{class:"token punctuation"},"{"),s(`
34      path`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'path-a'"),n("span",{class:"token punctuation"},","),s(`
35      name`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'ROUTE_A'"),n("span",{class:"token punctuation"},","),s(`
36      meta`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
37        breadcrumb`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'First route'"),s(`
38      `),n("span",{class:"token punctuation"},"}"),s(`
39    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
40    `),n("span",{class:"token punctuation"},"{"),s(`
41      path`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'path-b'"),n("span",{class:"token punctuation"},","),s(`
42      name`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'ROUTE_b'"),n("span",{class:"token punctuation"},","),s(`
43      meta`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
44        breadcrumb`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'Second route'"),s(`
45      `),n("span",{class:"token punctuation"},"}"),s(`
46    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
47    `),n("span",{class:"token punctuation"},"{"),s(`
48      path`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'path-c'"),n("span",{class:"token punctuation"},","),s(`
49      name`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'ROUTE_c'"),n("span",{class:"token punctuation"},","),s(`
50      meta`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"{"),s(`
51        breadcrumb`),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},"'Third route'"),s(`
52      `),n("span",{class:"token punctuation"},"}"),s(`
53    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
54  `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),s(`
55
56  `),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(" route "),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
57`),n("span",{class:"token punctuation"},"}"),s(`
58`)])]),n("div",{class:"line-numbers"},[n("span",{class:"line-number"},"1"),n("br"),n("span",{class:"line-number"},"2"),n("br"),n("span",{class:"line-number"},"3"),n("br"),n("span",{class:"line-number"},"4"),n("br"),n("span",{class:"line-number"},"5"),n("br"),n("span",{class:"line-number"},"6"),n("br"),n("span",{class:"line-number"},"7"),n("br"),n("span",{class:"line-number"},"8"),n("br"),n("span",{class:"line-number"},"9"),n("br"),n("span",{class:"line-number"},"10"),n("br"),n("span",{class:"line-number"},"11"),n("br"),n("span",{class:"line-number"},"12"),n("br"),n("span",{class:"line-number"},"13"),n("br"),n("span",{class:"line-number"},"14"),n("br"),n("span",{class:"line-number"},"15"),n("br"),n("span",{class:"line-number"},"16"),n("br"),n("span",{class:"line-number"},"17"),n("br"),n("span",{class:"line-number"},"18"),n("br"),n("span",{class:"line-number"},"19"),n("br"),n("span",{class:"line-number"},"20"),n("br"),n("span",{class:"line-number"},"21"),n("br"),n("span",{class:"line-number"},"22"),n("br"),n("span",{class:"line-number"},"23"),n("br"),n("span",{class:"line-number"},"24"),n("br"),n("span",{class:"line-number"},"25"),n("br"),n("span",{class:"line-number"},"26"),n("br"),n("span",{class:"line-number"},"27"),n("br"),n("span",{class:"line-number"},"28"),n("br"),n("span",{class:"line-number"},"29"),n("br")])],-1),R=o(`<h2 id="props" tabindex="-1"><a class="header-anchor" href="#props" aria-hidden="true">

58#</a> Props</h2><h3 id="route" tabindex="-1"><a class="header-anchor" href="#route" aria-hidden="true">#</a> route</h3><ul><li>Type: <code>Array</code></li><li>Default: <code>null</code></li></ul><div class="language-typescript ext-ts line-numbers-mode"><pre class="language-typescript"><code><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> QBreadcrumbsPropRoute <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@qvant/qui-max&#39;</span><span class="token punctuation">;</span>
59</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p><code>route</code> MUST be an <code>Array</code> of <code>Object</code>s, each object MUST contain required fields:</p><ul><li><code>path</code> - uses as route path</li><li><code>name</code> - route name</li><li><code>meta</code> - MUST contain: <ul><li><code>breadcrumb</code> - visible title</li></ul></li></ul><h3 id="linkcomponent" tabindex="-1"><a class="header-anchor" href="#linkcomponent" aria-hidden="true">#</a> linkComponent</h3><ul><li>Type: <code>String</code></li><li>Default: <code>&#39;RouterLink&#39;</code></li></ul>`,8),U=s("The name of the component for enabling user navigation in a router-enabled app, if you use "),B={href:"https://router.vuejs.org/",target:"_blank",rel:"noopener noreferrer"},E=s("Vue Router"),S=s(", you don't need change this prop, "),C=n("code",null,"RouterLink",-1),O=s(" by default. With Nuxt change on "),Q=n("code",null,"NuxtLink",-1),j=o(`<h3 id="last" tabindex="-1"><a class="header-anchor" href="#last" aria-hidden="true">#</a> last</h3><ul><li>Type: <code>String</code></li></ul><p>Changes last crumb with custom string</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">&lt;</span>q-breadcrumbs</span>
60  <span class="token attr-name">:route</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>route<span class="token punctuation">&quot;</span></span>
61  <span class="token attr-name">last</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Custom string<span class="token punctuation">&quot;</span></span>
62<span class="token punctuation">/&gt;</span></span>
63</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>`,4),N=n("iframe",{height:"80",style:{width:"100%"},scrolling:"no",frameborder:"no",src:"/QBreadcrumbs/last.html"},null,-1);function L(V,W){const p=e("ExternalLinkIcon"),r=e("CodeGroupItem"),l=e("CodeGroup");return c(),u(i,null,[d,n("p",null,[m,n("a",h,[_,a(p)])]),g,y,f,v,x,w,a(l,null,{default:t(()=>[a(r,{title:"JS",active:""},{default:t(()=>[q]),_:1}),a(r,{title:"TS"},{default:t(()=>[T]),_:1})]),_:1}),R,n("p",null,[U,n("a",B,[E,a(p)]),S,C,O,Q]),j,N],64)}var F=b(k,[["render",L]]);export{F as default};