48 lines
14 KiB
JavaScript
48 lines
14 KiB
JavaScript
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 "Vue Links - Flowbite""></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 "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></h4><h2 id="default-link" tabindex="-1">Default link <a class="header-anchor" href="#default-link" aria-label="Permalink to "Default link""></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;"><</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-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">> Flowbite-vue </</span><span style="color:#85E89D;">fwb-a</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;"> { FwbA } </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-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">> Flowbite-vue </</span><span style="color:#22863A;">fwb-a</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;"> { FwbA } </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>`,5),m=c(`<h2 id="paragraph-link" tabindex="-1">Paragraph link <a class="header-anchor" href="#paragraph-link" aria-label="Permalink to "Paragraph link""></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;"><</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-p</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> The free updates that will be provided is based on the <</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;">"#"</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;">"underline hover:no-underline"</span><span style="color:#E1E4E8;">>roadmap</</span><span style="color:#85E89D;">fwb-a</span><span style="color:#E1E4E8;">> 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;"> </</span><span style="color:#85E89D;">fwb-p</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;"> { FwbA, FwbP } </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-p</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> The free updates that will be provided is based on the <</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;">"#"</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;">"underline hover:no-underline"</span><span style="color:#24292E;">>roadmap</</span><span style="color:#22863A;">fwb-a</span><span style="color:#24292E;">> 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;"> </</span><span style="color:#22863A;">fwb-p</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;"> { FwbA, FwbP } </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>`,3),f=c(`<h2 id="custom-classes" tabindex="-1">Custom classes <a class="header-anchor" href="#custom-classes" aria-label="Permalink to "Custom classes""></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;"><</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-a</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"text-orange-500 italic"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">href</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"#"</span><span style="color:#E1E4E8;">> Flowbite-vue </</span><span style="color:#85E89D;">fwb-a</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;"> { FwbA } </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-a</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"text-orange-500 italic"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">href</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"#"</span><span style="color:#24292E;">> Flowbite-vue </</span><span style="color:#22863A;">fwb-a</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;"> { FwbA } </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>`,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};
|