346 lines
83 KiB
JavaScript
346 lines
83 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(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">logo</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-logo</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"Flowbite logo"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">image-url</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"/images/logo.svg"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Flowbite</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-logo</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">default</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"</span><span style="color:#E1E4E8;">{isShowMenu}</span><span style="color:#9ECBFF;">"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-collapse</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:is-show-menu</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"isShowMenu"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">is-active</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Home</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Services</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Pricing</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Contact</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-collapse</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> FwbNavbar,</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> FwbNavbarCollapse,</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> FwbNavbarLink,</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> FwbNavbarLogo,</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;">} </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">logo</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-logo</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"Flowbite logo"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">image-url</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"/images/logo.svg"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Flowbite</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-logo</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">default</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"</span><span style="color:#24292E;">{isShowMenu}</span><span style="color:#032F62;">"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-collapse</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:is-show-menu</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"isShowMenu"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">is-active</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Home</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Services</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Pricing</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Contact</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-collapse</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> {</span></span>
|
||
<span class="line"><span style="color:#24292E;"> FwbNavbar,</span></span>
|
||
<span class="line"><span style="color:#24292E;"> FwbNavbarCollapse,</span></span>
|
||
<span class="line"><span style="color:#24292E;"> FwbNavbarLink,</span></span>
|
||
<span class="line"><span style="color:#24292E;"> FwbNavbarLogo,</span></span>
|
||
<span class="line"><span style="color:#24292E;">} </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="solid-navbar" tabindex="-1">Solid navbar <a class="header-anchor" href="#solid-navbar" aria-label="Permalink to "Solid navbar""></a></h2>`,2),qs=d(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">solid</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">logo</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-logo</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"Flowbite logo"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">image-url</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"/images/logo.svg"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Flowbite</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-logo</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">default</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"</span><span style="color:#E1E4E8;">{isShowMenu}</span><span style="color:#9ECBFF;">"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-collapse</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:is-show-menu</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"isShowMenu"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">is-active</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Home</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Services</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Pricing</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Contact</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-collapse</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> FwbNavbar,</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> FwbNavbarCollapse,</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> FwbNavbarLink,</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> FwbNavbarLogo,</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;">} </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">solid</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">logo</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-logo</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"Flowbite logo"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">image-url</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"/images/logo.svg"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Flowbite</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-logo</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">default</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"</span><span style="color:#24292E;">{isShowMenu}</span><span style="color:#032F62;">"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-collapse</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:is-show-menu</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"isShowMenu"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">is-active</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Home</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Services</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Pricing</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Contact</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-collapse</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> {</span></span>
|
||
<span class="line"><span style="color:#24292E;"> FwbNavbar,</span></span>
|
||
<span class="line"><span style="color:#24292E;"> FwbNavbarCollapse,</span></span>
|
||
<span class="line"><span style="color:#24292E;"> FwbNavbarLink,</span></span>
|
||
<span class="line"><span style="color:#24292E;"> FwbNavbarLogo,</span></span>
|
||
<span class="line"><span style="color:#24292E;">} </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="navbar-with-action-button" tabindex="-1">Navbar with action button <a class="header-anchor" href="#navbar-with-action-button" aria-label="Permalink to "Navbar with action button""></a></h2>`,2),ks=d(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">logo</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-logo</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"Flowbite logo"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">image-url</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"/images/logo.svg"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Flowbite</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-logo</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">default</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"</span><span style="color:#E1E4E8;">{isShowMenu}</span><span style="color:#9ECBFF;">"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-collapse</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:is-show-menu</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"isShowMenu"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">is-active</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Home</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Services</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Pricing</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Contact</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-collapse</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">right-side</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Get started</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> FwbButton,</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> FwbNavbar,</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> FwbNavbarCollapse,</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> FwbNavbarLink,</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> FwbNavbarLogo,</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;">} </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">logo</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-logo</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"Flowbite logo"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">image-url</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"/images/logo.svg"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Flowbite</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-logo</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">default</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"</span><span style="color:#24292E;">{isShowMenu}</span><span style="color:#032F62;">"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-collapse</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:is-show-menu</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"isShowMenu"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">is-active</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Home</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Services</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Pricing</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Contact</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-collapse</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">right-side</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Get started</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> {</span></span>
|
||
<span class="line"><span style="color:#24292E;"> FwbButton,</span></span>
|
||
<span class="line"><span style="color:#24292E;"> FwbNavbar,</span></span>
|
||
<span class="line"><span style="color:#24292E;"> FwbNavbarCollapse,</span></span>
|
||
<span class="line"><span style="color:#24292E;"> FwbNavbarLink,</span></span>
|
||
<span class="line"><span style="color:#24292E;"> FwbNavbarLogo,</span></span>
|
||
<span class="line"><span style="color:#24292E;">} </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="navbar-with-custom-mobile-icon" tabindex="-1">Navbar with custom mobile icon <a class="header-anchor" href="#navbar-with-custom-mobile-icon" aria-label="Permalink to "Navbar with custom mobile icon""></a></h2>`,2),Cs=d(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">logo</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-logo</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"Flowbite logo"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">image-url</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"/images/logo.svg"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Flowbite</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-logo</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">default</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"</span><span style="color:#E1E4E8;">{isShowMenu}</span><span style="color:#9ECBFF;">"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-collapse</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:is-show-menu</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"isShowMenu"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">is-active</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Home</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Services</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Pricing</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Contact</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-collapse</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">menu-icon</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"w-6 h-6"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"none"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"currentColor"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"0 0 24 24"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">xmlns</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"http://www.w3.org/2000/svg"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"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"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-linecap</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"round"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-linejoin</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"round"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-width</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"2"</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">logo</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-logo</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"Flowbite logo"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">image-url</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"/images/logo.svg"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Flowbite</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-logo</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">default</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"</span><span style="color:#24292E;">{isShowMenu}</span><span style="color:#032F62;">"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-collapse</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:is-show-menu</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"isShowMenu"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">is-active</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Home</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Services</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Pricing</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Contact</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-collapse</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">menu-icon</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"w-6 h-6"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"none"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"currentColor"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"0 0 24 24"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">xmlns</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"http://www.w3.org/2000/svg"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"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"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-linecap</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"round"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-linejoin</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"round"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-width</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"2"</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="navbar-with-megamenu" tabindex="-1">Navbar with Megamenu <a class="header-anchor" href="#navbar-with-megamenu" aria-label="Permalink to "Navbar with Megamenu""></a></h2>`,2),hs=d(`<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">logo</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-logo</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"Flowbite logo"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">image-url</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"/images/logo.svg"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Flowbite</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-logo</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">default</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"</span><span style="color:#E1E4E8;">{isShowMenu}</span><span style="color:#9ECBFF;">"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-collapse</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:is-show-menu</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"isShowMenu"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">is-active</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Home</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Services</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Pricing</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">link</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> Contact</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-link</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar-collapse</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">menu-icon</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"w-6 h-6"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"none"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"currentColor"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"0 0 24 24"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">xmlns</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"http://www.w3.org/2000/svg"</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"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"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-linecap</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"round"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-linejoin</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"round"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">stroke-width</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"2"</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> </</span><span style="color:#85E89D;">fwb-navbar</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> FwbNavbar,</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> FwbNavbarCollapse,</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> FwbNavbarLink,</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> FwbNavbarLogo,</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;">} </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">logo</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-logo</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"Flowbite logo"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">image-url</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"/images/logo.svg"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Flowbite</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-logo</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">default</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"</span><span style="color:#24292E;">{isShowMenu}</span><span style="color:#032F62;">"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-collapse</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:is-show-menu</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"isShowMenu"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">is-active</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Home</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Services</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Pricing</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">link</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> Contact</span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-link</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar-collapse</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">menu-icon</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"w-6 h-6"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"none"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"currentColor"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"0 0 24 24"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">xmlns</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"http://www.w3.org/2000/svg"</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"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"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-linecap</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"round"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-linejoin</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"round"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">stroke-width</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"2"</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> </</span><span style="color:#22863A;">fwb-navbar</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> {</span></span>
|
||
<span class="line"><span style="color:#24292E;"> FwbNavbar,</span></span>
|
||
<span class="line"><span style="color:#24292E;"> FwbNavbarCollapse,</span></span>
|
||
<span class="line"><span style="color:#24292E;"> FwbNavbarLink,</span></span>
|
||
<span class="line"><span style="color:#24292E;"> FwbNavbarLogo,</span></span>
|
||
<span class="line"><span style="color:#24292E;">} </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div>`,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};
|