Link Vue Component

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

Link Components

There are following components included:

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.navbarTextIos	string	'text-primary'
colors.navbarTextMaterial	string	''
colors.textIos	string	'text-primary'
colors.textMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
component	string	'a'	Component's HTML Element
iconOnly	boolean	false	Enable if Link doesn't contain anything except icon
linkProps	any		Object with additional props (attributes) to pass to the Link/Button
navbar	boolean	false	Should be enabled if Link is in the Navbar
tabbar	boolean	false	Should be enabled if Link is in the Tabbar
tabbarActive	boolean	false	Highlights Tabbar Link as currently active
toolbar	boolean	false	Should be enabled if Link is in the Toolbar
touchRipple	boolean	undefined	Enables touch ripple effect in Material theme. If not specified, enabled by default if link is `toolbar`, `tabbar` or `navbar`

Name	Type	Description
click	function(e)	Click handler

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