🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

Link Vue Component

Link is main component to create links for navigation, custom actions, switching tabs, open/close modals, etc.

There are following components included:

  • Link
NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.navbarTextIosstring'text-primary'
colors.navbarTextMaterialstring''
colors.textIosstring'text-primary'
colors.textMaterialstring'text-md-light-primary dark:text-md-dark-primary'
componentstring'a'

Component's HTML Element

iconOnlybooleanfalse

Enable if Link doesn't contain anything except icon

linkPropsany

Object with additional props (attributes) to pass to the Link/Button

navbarbooleanfalse

Should be enabled if Link is in the Navbar

tabbarbooleanfalse

Should be enabled if Link is in the Tabbar

tabbarActivebooleanfalse

Highlights Tabbar Link as currently active

toolbarbooleanfalse

Should be enabled if Link is in the Toolbar

touchRipplebooleanundefined

Enables touch ripple effect in Material theme. If not specified, enabled by default if link is toolbar, tabbar or navbar

NameTypeDescription
clickfunction(e)

Click handler

Examples

<k-link href="/about">About</k-link>
<k-link href="https://google.com" target="_blank"> Google </k-link>
<k-link :link-props="{to: '/about'}" component="router-link">
  About
</k-link>
<k-navbar title="My App">
  <template #right>
    <k-link navbar @click="openMenu">Menu</k-link>
  </template>
</k-navbar>
<k-toolbar>
  <k-link toolbar @click="action1">Action 1</k-link>
  <k-link toolbar @click="action2">Action 2</k-link>
</k-toolbar>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.