import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as r}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";import{o as p,b as i,w as n,a as s,l,H as a,c as E,Q as c}from"./chunks/framework.3f630664.js";import{_ as y}from"./chunks/FwbP.vue_vue_type_script_setup_true_lang.b05f1505.js";import"./chunks/useMergeClasses.5cec3a4e.js";const u={__name:"FwbAExample",setup(e){return(o,t)=>(p(),i(l(r),{href:"#"},{default:n(()=>[s(" Flowbite-vue ")]),_:1}))}},d={__name:"FwbAExampleParagraph",setup(e){return(o,t)=>(p(),i(l(y),null,{default:n(()=>[s(" The free updates that will be provided is based on the "),a(l(r),{href:"/",class:"underline hover:no-underline"},{default:n(()=>[s(" roadmap ")]),_:1}),s(" that we have laid out for this project. It is also possible that we will provide extra updates outside of the roadmap as well. ")]),_:1}))}},h={class:"vp-raw"},b={__name:"FwbAExampleCustom",setup(e){return(o,t)=>(p(),E("div",h,[a(l(r),{class:"text-orange-500 italic",href:"#"},{default:n(()=>[s(" Flowbite-vue ")]),_:1})]))}},_=c(`<h1 id="vue-links-flowbite" tabindex="-1">Vue Links - Flowbite <a class="header-anchor" href="#vue-links-flowbite" aria-label="Permalink to &quot;Vue Links - Flowbite&quot;">​</a></h1><h4 id="the-link-component-can-be-used-to-set-hyperlinks-from-one-page-to-another-or-to-an-external-website-when-clicking-on-an-inline-text-item-button-or-card" tabindex="-1">The link component can be used to set hyperlinks from one page to another or to an external website when clicking on an inline text item, button, or card <a class="header-anchor" href="#the-link-component-can-be-used-to-set-hyperlinks-from-one-page-to-another-or-to-an-external-website-when-clicking-on-an-inline-text-item-button-or-card" aria-label="Permalink to &quot;The link component can be used to set hyperlinks from one page to another or to an external website when clicking on an inline text item, button, or card&quot;">​</a></h4><h2 id="default-link" tabindex="-1">Default link <a class="header-anchor" href="#default-link" aria-label="Permalink to &quot;Default link&quot;">​</a></h2><p>Use this example to set default styles to an inline link element.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;">&gt; Flowbite-vue &lt;/</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbA } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;">&gt; Flowbite-vue &lt;/</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbA } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,5),m=c(`<h2 id="paragraph-link" tabindex="-1">Paragraph link <a class="header-anchor" href="#paragraph-link" aria-label="Permalink to &quot;Paragraph link&quot;">​</a></h2><p>Use this example to set a link inside a paragraph with an underline style.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#85E89D;">fwb-p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    The free updates that will be provided is based on the &lt;</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;underline hover:no-underline&quot;</span><span style="color:#E1E4E8;">&gt;roadmap&lt;/</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">&gt; that we have laid</span></span>
<span class="line"><span style="color:#E1E4E8;">    out for this project. It is also possible that we will provide</span></span>
<span class="line"><span style="color:#E1E4E8;">    extra updates outside of the roadmap as well.</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;/</span><span style="color:#85E89D;">fwb-p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbA, FwbP } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#22863A;">fwb-p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    The free updates that will be provided is based on the &lt;</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;underline hover:no-underline&quot;</span><span style="color:#24292E;">&gt;roadmap&lt;/</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">&gt; that we have laid</span></span>
<span class="line"><span style="color:#24292E;">    out for this project. It is also possible that we will provide</span></span>
<span class="line"><span style="color:#24292E;">    extra updates outside of the roadmap as well.</span></span>
<span class="line"><span style="color:#24292E;">  &lt;/</span><span style="color:#22863A;">fwb-p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbA, FwbP } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),f=c(`<h2 id="custom-classes" tabindex="-1">Custom classes <a class="header-anchor" href="#custom-classes" aria-label="Permalink to &quot;Custom classes&quot;">​</a></h2><p>Use <code>class</code> attribute prop to apply the tailwind classes.</p><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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-orange-500 italic&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;#&quot;</span><span style="color:#E1E4E8;">&gt; Flowbite-vue &lt;/</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbA } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-orange-500 italic&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;#&quot;</span><span style="color:#24292E;">&gt; Flowbite-vue &lt;/</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbA } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),C=JSON.parse('{"title":"Vue Links - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/link.md","filePath":"components/link.md"}'),g={name:"components/link.md"},D=Object.assign(g,{setup(e){return(o,t)=>(p(),E("div",null,[_,a(u),m,a(d),f,a(b)]))}});export{C as __pageData,D as default};
