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(`

Vue Links - Flowbite ​

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 ​

Use this example to set default styles to an inline link element.

vue
<template>
  <fwb-a href="#"> Flowbite-vue </fwb-a>
</template>

<script setup>
import { FwbA } from 'flowbite-vue'
</script>
<template>
  <fwb-a href="#"> Flowbite-vue </fwb-a>
</template>

<script setup>
import { FwbA } from 'flowbite-vue'
</script>
`,5),m=c(`

Use this example to set a link inside a paragraph with an underline style.

vue
<template>
  <fwb-p>
    The free updates that will be provided is based on the <fwb-a href="#"
    class="underline hover:no-underline">roadmap</fwb-a> that we have laid
    out for this project. It is also possible that we will provide
    extra updates outside of the roadmap as well.
  </fwb-p>
</template>

<script setup>
import { FwbA, FwbP } from 'flowbite-vue'
</script>
<template>
  <fwb-p>
    The free updates that will be provided is based on the <fwb-a href="#"
    class="underline hover:no-underline">roadmap</fwb-a> that we have laid
    out for this project. It is also possible that we will provide
    extra updates outside of the roadmap as well.
  </fwb-p>
</template>

<script setup>
import { FwbA, FwbP } from 'flowbite-vue'
</script>
`,3),f=c(`

Custom classes ​

Use class attribute prop to apply the tailwind classes.

vue
<template>
  <fwb-a class="text-orange-500 italic" href="#"> Flowbite-vue </fwb-a>
</template>

<script setup>
import { FwbA } from 'flowbite-vue'
</script>
<template>
  <fwb-a class="text-orange-500 italic" href="#"> Flowbite-vue </fwb-a>
</template>

<script setup>
import { FwbA } from 'flowbite-vue'
</script>
`,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};