Usage
Default
Use the default slot to set the text of the link.
vue
Colors
Use the color prop to customize the component's color.
vue
External Links
Use the external prop to indicate that the link will open a new tab/window. This automatically adds an external link icon.
vue
<script setup lang="ts">
import { CLNavLink } from '@codeandfunction/callaloo'
</script>
<template>
<CLNavLink href="#" external :underline="false" :on-click="(evt) => evt?.preventDefault()">External Link</CLNavLink>
</template>Target
Use the target prop to specify where to open the linked document.
vue
<script setup lang="ts">
import { CLNavLink, CLLinkTarget } from '@codeandfunction/callaloo'
</script>
<template>
<CLNavLink href="#" :target="CLLinkTarget.Blank" :underline="false" :on-click="(evt) => evt?.preventDefault()">Open in New Tab</CLNavLink>
</template>