1import{_ as b}from"./cZyYzc7D.js";import{_ as R}from"./DyGfh5Gl.js";import{u as I}from"./BCgqLys0.js";import{_ as g}from"./BOUaBo7H.js";import{V as y}from"./BKoe1RkJ.js";import{x as $,y as z,z as F,A as L,B as U,C as D,D as H,E as M,G as A,H as E,h as j,I as W,J,K,L as C,M as O,N as Q,O as X,P as q,Q as c,R as Y,S as Z,T as tt,U as et,j as ot,a as t,W as nt,X as at,o as f,c as _,w as e,b as a,d as i,V as u,n as v,u as d,r as x,i as k,e as lt,g as st}from"./SD7QXYVU.js";import{V as N,a as it}from"./DsnVAga1.js";import"./CqvRI9Kf.js";import"./D9kYFWgq.js";import"./Dewa6fzG.js";import"./CAd_HoKX.js";import"./BzzXJq_k.js";import"./Bxk8vgVz.js";const rt=$({baseColor:String,bgColor:String,color:String,grow:Boolean,mode:{type:String,validator:l=>!l||["horizontal","shift"].includes(l)},height:{type:[Number,String],default:56},active:{type:Boolean,default:!0},...z(),...F(),...L(),...U(),...D(),...H({name:"bottom-navigation"}),...M({tag:"header"}),...A({selectedClass:"v-btn--selected"}),...E()},"VBottomNavigation"),w=j()({name:"VBottomNavigation",props:rt(),emits:{"update:active":l=>!0,"update:modelValue":l=>!0},setup(l,r){let{slots:n}=r;const{themeClasses:o}=W(),{borderClasses:s}=J(l),{backgroundColorClasses:p,backgroundColorStyles:m}=K(C(l,"bgColor")),{densityClasses:V}=O(l),{elevationClasses:G}
vendor: 4,332 bytes, lines 1-158
1=Q(l),{roundedClasses:S}=X(l),{ssrBootStyles:T}=q(),h=c(()=>Number(l.height)-(l.density==="comfortable"?8:0)-(l.density==="compact"?16:0)),B=Y(l,"active",l.active),{layoutItemStyles:P}=Z({id:l.name,order:c(()=>parseInt(l.order,10)),position:c(()=>"bottom"),layoutSize:c(()=>B.value?h.value:0),elementSize:h,active:B,absolute:C(l,"absolute")});return tt(l,at),et({VBtn:{baseColor:C(l,"baseColor"),color:C(l,"color"),density:C(l,"density"),stacked:c(()=>l.mode!=="horizontal"),variant:"text"}},{scoped:!0}),ot(()=>t(l.tag,{class:["v-bottom-navigation",{"v-bottom-navigation--active":B.value,"v-bottom-navigation--grow":l.grow,"v-bottom-navigation--shift":l.mode==="shift"},o.value,p.value,s.value,V.value,G.value,S.value,l.class],style:[m.value,P.value,{height:nt(h.value)},T.value,l.style]},{default:()=>[n.default&&t("div",{class:"v-bottom-navigation__content"},[n.default()])]})),{}}}),ut=`<template> 2 <v-layout class="overflow-visible" style="height: 56px"> 3 <v-bottom-navigation> 4 <v-btn value="recent"> 5 <v-icon>tabler-history</v-icon> 6 7 <span>Recent</span> 8 </v-btn> 9 10 <v-btn value="favorites"> 11 <v-icon>tabler-heart</v-icon> 12 13 <span>Favorites</span> 14 </v-btn> 15 16 <v-btn value="nearby"> 17 <v-icon>tabler-map-pin</v-icon> 18 19 <span>Nearby</span> 20 </v-btn> 21 </v-bottom-navigation> 22 </v-layout> 23</template>`,vt=`<script setup> 24 const value = ref(0) 25<\/script> 26 27<template> 28 <v-layout class="overflow-visible" style="height: 56px"> 29 <v-bottom-navigation v-model="value" active color="primary"> 30 <v-btn value="recent"> 31 <v-icon>tabler-history</v-icon> 32 33 <span>Recent</span> 34 </v-btn> 35 36 <v-btn value="favorites"> 37 <v-icon>tabler-heart</v-icon> 38 39 <span>Favorites</span> 40 </v-btn> 41 42 <v-btn value="nearby"> 43 <v-icon>tabler-map-pin</v-icon> 44 45 <span>Nearby</span> 46 </v-btn> 47 </v-bottom-navigation> 48 </v-layout> 49</template>`,dt=`<script setup> 50 const value1 = ref(0) 51<\/script> 52 53<template> 54 <v-layout class="overflow-visible" style="height: 56px"> 55 <v-bottom-navigation v-model="value1" grow color="primary"> 56 <v-btn value="recent"> 57 <v-icon>tabler-history</v-icon> 58 59 <span>Recent</span> 60 </v-btn> 61 62 <v-btn value="favorites"> 63 <v-icon>tabler-heart</v-icon> 64 65 <span>Favorites</span> 66 </v-btn> 67 68 <v-btn value="nearby"> 69 <v-icon>tabler-map-pin</v-icon> 70 71 <span>Nearby</span> 72 </v-btn> 73 </v-bottom-navigation> 74 </v-layout> 75</template>`,pt=`<template> 76 <v-layout class="overflow-visible" style="height: 56px"> 77 <v-bottom-navigation horizontal color="error"> 78 <v-btn value="recent"> 79 <v-icon>tabler-history</v-icon> 80 81 <span>Recent</span> 82 </v-btn> 83 84 <v-btn value="favorites"> 85 <v-icon>tabler-heart</v-icon> 86 87 <span>Favorites</span> 88 </v-btn> 89 90 <v-btn value="nearby"> 91 <v-icon>tabler-map-pin</v-icon> 92 93 <span>Nearby</span> 94 </v-btn> 95 </v-bottom-navigation> 96 </v-layout> 97</template>`,mt=`<script setup> 98 const value3 = ref(1) 99 100 const color = computed(() => { 101 switch (value3.value) { 102 case 0: 103 return 'primary' 104 case 1: 105 return 'warning' 106 case 2: 107 return 'info' 108 case 3: 109 return 'error' 110 default: 111 return 'success' 112 } 113 }) 114<\/script> 115 116<template> 117 <v-layout class="overflow-visible" style="height: 56px"> 118 <v-bottom-navigation 119 v-model="value3" 120 :bg-color="color" 121 mode="shift" 122 > 123 <v-btn> 124 <v-icon>tabler-video</v-icon> 125 126 <span>Video</span> 127 </v-btn> 128 129 <v-btn> 130 <v-icon>tabler-music</v-icon> 131 132 <span>Music</span> 133 </v-btn> 134 135 <v-btn> 136 <v-icon>tabler-settings-filled</v-icon> 137 138 <span>Setting</span> 139 </v-btn> 140 <v-btn> 141 <v-icon>tabler-shopping-cart</v-icon> 142 143 <span>Cart</span> 144 </v-btn> 145 </v-bottom-navigation> 146 </v-layout> 147</template>`,bt=`<script setup> 148 const active = ref(true) 149<\/script> 150 151<template> 152 <v-btn @click="active = !active"> Toggle Navigation </v-btn> 153 154 <v-layout class="overflow-visible" style="height: 56px"> 155 <v-bottom-navigation :active="active"> 156 <v-btn value="recent"> 157 <v-icon>tabler-history</v-icon> 158
159 <span>Recent</span> 160 </v-btn> 161 162 <v-btn value="favorites"> 163 <v-icon>tabler-heart</v-icon> 164 165 <span>Favorites</span> 166 </v-btn> 167 168 <v-btn value="nearby"> 169 <v-icon>tabler-map-pin</v-icon> 170 171 <span>Nearby</span> 172 </v-btn> 173 </v-bottom-navigation> 174 </v-layout> 175</template>`,ft={id:"basic"},ct={__name:"Basic",setup(l){return(r,n)=>{const o=b,s=g;return f(),_("div",ft,[t(o,{title:"Basic"},{default:e(()=>n[0]||(n[0]=[a(" While "),i("code",null,"v-bottom navigation",-1),a(" is meant to be used with "),i("code",null,"vue-router",-1),a(", you can also programmatically control the active state of the buttons by using the value property. A button is given a default value of its index with "),i("code",null,"v-bottom navigation",-1),a(". ")])),_:1}),t(s,{code:d(ut)},{default:e(()=>[t(y,{class:"overflow-visible",style:{height:"56px"}},{default:e(()=>[t(w,null,{default:e(()=>[t(u,{value:"recent"},{default:e(()=>[t(v,null,{default:e(()=>n[1]||(n[1]=[a("tabler-history")])),_:1}),n[2]||(n[2]=i("span",null,"Recent",-1))]),_:1}),t(u,{value:"favorites"},{default:e(()=>[t(v,null,{default:e(()=>n[3]||(n[3]=[a("tabler-heart")])),_:1}),n[4]||(n[4]=i("span",null,"Favorites",-1))]),_:1}),t(u,{value:"nearby"},{default:e(()=>[t(v,null,{default:e(()=>n[5]||(n[5]=[a("tabler-map-pin")])),_:1}),n[6]||(n[6]=i("span",null,"Nearby",-1))]),_:1})]),_:1})]),_:1})]),_:1},8,["code"])])}}},gt={id:"color"},yt={__name:"Color",setup(l){const r=x(0);return(n,o)=>{const s=b,p=g;return f(),_("div",gt,[t(s,{title:"Color"},{default:e(()=>o[1]||(o[1]=[a(" The "),i("code",null,"color",-1),a(" prop applies a color to the background of the bottom navigation. We recommend using the "),i("code",null,"light",-1),a(" and "),i("code",null,"dark",-1),a(" props to properly contrast text color. ")])),_:1}
175),t(p,{code:d(vt)},{default:e(()=>[t(y,{class:"overflow-visible",style:{height:"56px"}},{default:e(()=>[t(w,{modelValue:d(r),"onUpdate:modelValue":o[0]||(o[0]=m=>k(r)?r.value=m:null),active:"",color:"primary"},{default:e(()=>[t(u,{value:"recent"},{default:e(()=>[t(v,null,{default:e(()=>o[2]||(o[2]=[a("tabler-history")])),_:1}),o[3]||(o[3]=i("span",null,"Recent",-1))]),_:1}),t(u,{value:"favorites"},{default:e(()=>[t(v,null,{default:e(()=>o[4]||(o[4]=[a("tabler-heart")])),_:1}),o[5]||(o[5]=i("span",null,"Favorites",-1))]),_:1}),t(u,{value:"nearby"},{default:e(()=>[t(v,null,{default:e(()=>o[6]||(o[6]=[a("tabler-map-pin")])),_:1}),o[7]||(o[7]=i("span",null,"Nearby",-1))]),_:1})]),_:1},8,["modelValue"])]),_:1})]),_:1},8,["code"])])}}},_t={id:"grow"},wt={__name:"Grow",setup(l){const r=x(0);return(n,o)=>{const s=b,p=g;return f(),_("div",_t,[t(s,{title:"Grow"},{default:e(()=>o[1]||(o[1]=[a(" Using the "),i("code",null,"grow",-1),a(" property forces v-btn components to fill all available space. Buttons have a maximum width of 168px. ")])),_:1}
175),t(p,{code:d(dt)},{default:e(()=>[t(y,{class:"overflow-visible",style:{height:"56px"}},{default:e(()=>[t(w,{modelValue:d(r),"onUpdate:modelValue":o[0]||(o[0]=m=>k(r)?r.value=m:null),grow:"",color:"primary"},{default:e(()=>[t(u,{value:"recent"},{default:e(()=>[t(v,null,{default:e(()=>o[2]||(o[2]=[a("tabler-history")])),_:1}),o[3]||(o[3]=i("span",null,"Recent",-1))]),_:1}),t(u,{value:"favorites"},{default:e(()=>[t(v,null,{default:e(()=>o[4]||(o[4]=[a("tabler-heart")])),_:1}),o[5]||(o[5]=i("span",null,"Favorites",-1))]),_:1}),t(u,{value:"nearby"},{default:e(()=>[t(v,null,{default:e(()=>o[6]||(o[6]=[a("tabler-map-pin")])),_:1}),o[7]||(o[7]=i("span",null,"Nearby",-1))]),_:1})]),_:1},8,["modelValue"])]),_:1})]),_:1},8,["code"])])}}},Ct={id:"horizontal"},xt={__name:"Horizontal",setup(l){return(r,n)=>{const o=b,s=g;return f(),_("div",Ct,[t(o,{title:"Horizontal"},{default:e(()=>n[0]||(n[0]=[a(" Adjust the style of buttons and icons by using the horizontal prop. This positions button text inline with the provided "),i("code",null,"v-icon",-1),a(". ")])),_:1}),t(s,{code:d(pt)},{default:e(()=>[t(y,{class:"overflow-visible",style:{height:"56px"}},{default:e(()=>[t(w,{horizontal:"",color:"error"},{default:e(()=>[t(u,{value:"recent"},{default:e(()=>[t(v,null,{default:e(()=>n[1]||(n[1]=[a("tabler-history")])),_:1}),n[2]||(n[2]=i("span",null,"Recent",-1))]),_:1}),t(u,{value:"favorites"},{default:e(()=>[t(v,null,{default:e(()=>n[3]||(n[3]=[a("tabler-heart")])),_:1}),n[4]||(n[4]=i("span",null,"Favorites",-1))]),_:1}),t(u,{value:"nearby"},{default:e(()=>[t(v,null,{default:e(()=>n[5]||(n[5]=[a("tabler-map-pin")])),_:1}),n[6]||(n[6]=i("span",null,"Nearby",-1))]),_:1})]),_:1})]),_:1})]),_:1},8,["code"])])}}},Vt={id:"shift"},ht={__name:"Shift",setup(l){const r=x(1),n=c(()=>{switch(r.value){case 0:return"primary";case 1:return"warning";case 2:return"info";case 3:return"error";default:return"success"}});return(o,s)=>{const p=b,m=g;return f(),_("div",Vt,[t(p,{title:"Shift"},{default:e(()=>s[1]||(s[1]=[a(" The "),i("code",null,"shift",-1),a(" prop hides button text when not active. This provides an alternative visual style to the "),i("code",null,"v-bottom-navigation",-1),a(" component. ")])),_:1}),t(m,{code:d(mt)},{default:e(()=>[t(y,{class:"overflow-visible",style:{height:"56px"}},{default:e(()=>[t(w,{modelValue:d(r),"onUpdate:modelValue":s[0]||(s[0]=V=>k(r)?r.value=V:null),"bg-color":d(n),mode:"shift"},{default:e(()=>[t(u,null,{default:e(()=>[t(v,null,{default:e(()=>s[2]||(s[2]=[a("tabler-video")])),_:1}),s[3]||(s[3]=i("span",null,"Video",-1))]),_:1}),t(u,null,{default:e(()=>[t(v,null,{default:e(()=>s[4]||(s[4]=[a("tabler-music")])),_:1}),s[5]||(s[5]=i("span",null,"Music",-1))]),_:1}),t(u,null,{default:e(()=>[t(v,null,{default:e(()=>s[6]||(s[6]=[a("tabler-settings-filled")])),_:1}),s[7]||(s[7]=i("span",null,"Setting",-1))]),_:1}),t(u,null,{default:e(()=>[t(v,null,{default:e(()=>s[8]||(s[8]=[a("tabler-shopping-cart")])),_:1}),s[9]||(s[9]=i("span",null,"Cart",-1))]),_:1})]),_:1},8,["modelValue","bg-color"])]),_:1})]),_:1},8,["code"])])}}},Bt={id:"toggel"},kt={class:"mb-3 d-flex aligin-center justify-center"},Nt={__name:"Toggel",setup(l){const r=x(!0);return(n,o)=>{const s=b,p=g;return f(),_("div",Bt,[t(s,{title:"Toggel"},{default:e(()=>o[1]||(o[1]=[a(" Since "),i("code",null,"v-bottom-navigation",-1),a(" supports v-model, use the "),i("code",null,"active",-1),a(" prop to control the display state. ")])),_:1}
175),t(p,{code:d(bt)},{default:e(()=>[i("div",kt,[t(u,{onClick:o[0]||(o[0]=m=>r.value=!d(r))},{default:e(()=>o[2]||(o[2]=[a(" Toggle Navigation ")])),_:1})]),t(y,{class:"overflow-visible",style:{height:"56px"}},{default:e(()=>[t(w,{active:d(r)},{default:e(()=>[t(u,{value:"recent"},{default:e(()=>[t(v,null,{default:e(()=>o[3]||(o[3]=[a("tabler-history")])),_:1}),o[4]||(o[4]=i("span",null,"Recent",-1))]),_:1}),t(u,{value:"favorites"},{default:e(()=>[t(v,null,{default:e(()=>o[5]||(o[5]=[a("tabler-heart")])),_:1}),o[6]||(o[6]=i("span",null,"Favorites",-1))]),_:1}),t(u,{value:"nearby"},{default:e(()=>[t(v,null,{default:e(()=>o[7]||(o[7]=[a("tabler-map-pin")])),_:1}),o[8]||(o[8]=i("span",null,"Nearby",-1))]),_:1})]),_:1},8,["active"])]),_:1})]),_:1},8,["code"])])}}},Gt={id:"intro"},At={__name:"bottom-navigation",setup(l){const r=[{name:"Introduction",to:"intro"},{name:"Basic",to:"basic"},{name:"Color",to:"color"},{name:"Grow",to:"grow"},{name:"Horizontal",to:"horizontal"},{name:"Shift",to:"shift"},{name:"Toggel",to:"toggel"}];return I({title:"Bottom navigation",ogTitle:"Bottom navigation",description:"",ogDescription:"",ogImage:"",twitterCard:"summary_large_image"}),(n,o)=>{const s=b,p=R;return f(),lt(st,{fluid:""},{default:e(()=>[t(it,null,{default:e(()=>[t(N,{lg:"9",md:"12"},{default:e(()=>[i("div",Gt,[t(s,{"page-intro":"",title:"Bottom navigation",subtitle:"The v-bottom-navigation component is an alternative to the sidebar. It is primarily used for mobile applications and comes in three variants, icons and text, and shift."})]),t(ct),t(yt),t(wt),t(xt),t(ht),t(Nt)]),_:1}),t(N,{lg:"3",class:"d-none d-lg-block"},{default:e(()=>[t(p,{list:r})]),_:1})]),_:1})]),_:1})}}};export{At 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.