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	''
colors.navbarTextMaterial	string	''
colors.textIos	string	'text-primary'
colors.textMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
colors.toolbarTextIos	string	''
colors.toolbarTextMaterial	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
tabbarActive	boolean	false	Highlights Tabbar Link as currently active

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>