2 lines
8.2 KiB
JavaScript
2 lines
8.2 KiB
JavaScript
import{c as D,t as $}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{u as S,b as x}from"./chunks/index.b15c605d.js";import{u as L}from"./chunks/useMergeClasses.5cec3a4e.js";import{u as H}from"./chunks/index.6b4d4439.js";import{d as k,Y as I,h as j,g as w,o as y,c as i,k as e,r as b,l as a,e as z,n as C,b as M,w as s,a3 as P,I as T,C as u,H as n,a as l,_ as R,Q as d}from"./chunks/framework.3f630664.js";import{_ as G}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const O={class:"container flex flex-wrap justify-between items-center mx-auto"},U=e("span",{class:"sr-only"},"Open main menu",-1),J=e("svg",{"aria-hidden":"true",class:"w-6 h-6",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"clip-rule":"evenodd",d:"M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z","fill-rule":"evenodd"})],-1),Q={key:0,class:"hidden md:order-2 md:flex"},W=" border-gray-200",Y="fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600",K="rounded",X="p-3 bg-gray-50 dark:bg-gray-800 dark:border-gray-700",Z="bg-white px-2 sm:px-4 py-2.5 dark:bg-gray-900",h=k({__name:"FwbNavbar",props:{class:{type:String,default:""},sticky:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},solid:{type:Boolean,default:!1}},setup(r){const p=r,t=I(),g=S(x).smaller("md"),F=j(!1),v=H(F),c=w(()=>L([W,p.sticky?Y:"",p.rounded?K:"",p.solid?X:Z,p.class].join(" "))),f=w(()=>g?F.value:!0);return(m,q)=>(y(),i("nav",{class:C(c.value)},[e("div",O,[b(m.$slots,"logo"),e("button",{"aria-controls":"navbar-default","aria-expanded":"false",class:"inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",type:"button",onClick:q[0]||(q[0]=A=>a(v)())},[U,b(m.$slots,"menu-icon",{},()=>[J])]),b(m.$slots,"default",{isShowMenu:f.value}),a(t)["right-side"]?(y(),i("div",Q,[b(m.$slots,"right-side")])):z("",!0)]),b(m.$slots,"mega-menu-dropdown")],2))}}),ss="w-full md:block md:w-auto",ns="flex flex-col p-4 mt-4 rounded-lg border border-gray-100 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700",as="bg-gray-50",_=k({__name:"FwbNavbarCollapse",props:{isShowMenu:{type:Boolean,default:!1}},setup(r){const t=S(x).smaller("md"),o=r,g=w(()=>D(ss,o.isShowMenu?"":"hidden")),F=w(()=>D(ns,t.value?as:""));return(v,c)=>(y(),i("div",{class:C(g.value)},[e("ul",{class:C(F.value)},[b(v.$slots,"default")],2)],2))}}),ls="bg-blue-700 md:bg-transparent text-white md:text-blue-700 dark:text-white",os="text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent",ps="block py-2 pr-4 pl-3 rounded md:p-0",E=k({__name:"FwbNavbarLink",props:{link:{default:"/"},isActive:{type:Boolean,default:!1},component:{default:"a"},linkAttr:{default:"href"},disabled:{type:Boolean,default:!1}},emits:["click"],setup(r,{emit:p}){const t=r,o=p,g=w(()=>t.component!=="a"?u(t.component):"a"),F=$(ps,t.isActive?ls:os),v=c=>{t.disabled||o("click",c)};return(c,f)=>(y(),i("li",null,[(y(),M(T(g.value),P({[c.linkAttr||""]:c.link,class:a(F),onClick:v}),{default:s(()=>[b(c.$slots,"default")]),_:3},16,["class"]))]))}}),ts=["src","alt"],es={class:"self-center text-xl font-semibold whitespace-nowrap dark:text-white"},B=k({__name:"FwbNavbarLogo",props:{link:{default:"/"},imageUrl:{default:"/assets/logo.svg"},alt:{default:"Logo"},component:{default:"a"},linkAttr:{default:"href"}},setup(r){const p=r,t=w(()=>p.component!=="a"?u(p.component):"a");return(o,g)=>(y(),M(T(t.value),P({class:"flex items-center",[o.linkAttr||""]:o.link}),{default:s(()=>[e("img",{src:o.imageUrl,alt:o.alt,class:"mr-3 h-6 sm:h-10"},null,8,ts),e("span",es,[b(o.$slots,"default")])]),_:3},16))}}),cs={class:"vp-raw"},rs={__name:"FwbNavbarExample",setup(r){return(p,t)=>(y(),i("div",cs,[n(a(h),null,{logo:s(()=>[n(a(B),{alt:"Flowbite logo","image-url":"https://flowbite.com/docs/images/logo.svg",link:"https://www.google.com/"},{default:s(()=>[l(" Flowbite ")]),_:1})]),default:s(({isShowMenu:o})=>[n(a(_),{"is-show-menu":o},{default:s(()=>[n(a(E),{"is-active":"",link:"#"},{default:s(()=>[l(" Home ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Services ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Pricing ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Contact ")]),_:1})]),_:2},1032,["is-show-menu"])]),_:1})]))}},Es={class:"vp-raw"},ys={__name:"FwbNavbarExampleActionButton",setup(r){return(p,t)=>(y(),i("div",Es,[n(a(h),null,{logo:s(()=>[n(a(B),{alt:"Flowbite logo","image-url":"https://flowbite.com/docs/images/logo.svg",link:"https://www.google.com/"},{default:s(()=>[l(" Flowbite ")]),_:1})]),default:s(({isShowMenu:o})=>[n(a(_),{"is-show-menu":o},{default:s(()=>[n(a(E),{"is-active":"",link:"#"},{default:s(()=>[l(" Home ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Services ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Pricing ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Contact ")]),_:1})]),_:2},1032,["is-show-menu"])]),"right-side":s(()=>[n(a(G),null,{default:s(()=>[l(" Get started ")]),_:1})]),_:1})]))}},is={class:"vp-raw"},us=e("svg",{class:"w-6 h-6",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[e("path",{d:"M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})],-1),bs={__name:"FwbNavbarExampleCustomMobileIcon",setup(r){return(p,t)=>(y(),i("div",is,[n(a(h),null,{logo:s(()=>[n(a(B),{alt:"Flowbite logo","image-url":"https://flowbite.com/docs/images/logo.svg",link:"https://www.google.com/"},{default:s(()=>[l(" Flowbite ")]),_:1})]),default:s(({isShowMenu:o})=>[n(a(_),{"is-show-menu":o},{default:s(()=>[n(a(E),{"is-active":"",link:"#"},{default:s(()=>[l(" Home ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Services ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Pricing ")]),_:1}),n(a(E),{link:"#"},{default:s(()=>[l(" Contact ")]),_:1})]),_:2},1032,["is-show-menu"])]),"menu-icon":s(()=>[us]),_:1})]))}},gs={},Fs={class:"vp-raw"};function vs(r,p,t,o,g,F){const v=u("fwb-navbar-logo"),c=u("fwb-navbar-link"),f=u("fwb-navbar-collapse"),m=u("fwb-button"),q=u("fwb-mega-menu-dropdown"),A=u("fwb-navbar");return y(),i("div",Fs,[n(A,null,{logo:s(()=>[n(v,{alt:"Flowbite logo","image-url":"https://flowbite.com/docs/images/logo.svg",link:"https://www.google.com/"},{default:s(()=>[l(" Flowbite ")]),_:1})]),default:s(({isShowMenu:V})=>[n(f,{"is-show-menu":V},{default:s(()=>[n(c,{"is-active":"",link:"#"},{default:s(()=>[l(" Home ")]),_:1}),n(c,{link:"#"},{default:s(()=>[l(" Services ")]),_:1}),n(c,{link:"#"},{default:s(()=>[l(" Pricing ")]),_:1}),n(c,{link:"#"},{default:s(()=>[l(" Contact ")]),_:1})]),_:2},1032,["is-show-menu"])]),"right-side":s(()=>[n(m,null,{default:s(()=>[l(" Get started ")]),_:1})]),"mega-menu-dropdown":s(()=>[n(q)]),_:1})])}const N=R(gs,[["render",vs]]),ms=e("h1",{id:"vue-navbar-–-flowbite",tabindex:"-1"},[l("Vue Navbar – Flowbite "),e("a",{class:"header-anchor",href:"#vue-navbar-–-flowbite","aria-label":'Permalink to "Vue Navbar – Flowbite"'},"")],-1),ws=e("p",null,"The navbar component can be used to show a list of navigation links positioned on the top side of your page based on multiple layouts, sizes, and dropdowns",-1),ds=e("h2",{id:"default-navbar",tabindex:"-1"},[l("Default navbar "),e("a",{class:"header-anchor",href:"#default-navbar","aria-label":'Permalink to "Default navbar"'},"")],-1),fs=d("",2),qs=d("",2),ks=d("",2),Cs=d("",2),hs=d("",1),Ps=JSON.parse('{"title":"Vue Navbar – Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/navbar.md","filePath":"components/navbar.md"}'),_s={name:"components/navbar.md"},Ts=Object.assign(_s,{setup(r){return(p,t)=>(y(),i("div",null,[ms,ws,ds,n(rs),fs,n(N),qs,n(ys),ks,n(bs),Cs,n(N),hs]))}});export{Ps as __pageData,Ts as default};
|