Link Svelte 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'
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
onClick	function(e)		Click handler
tabbarActive	boolean	false	Highlights Tabbar Link as currently active
onClick	function(e)

<Link href="/about">About</Link>

<Link href="https://google.com" target="_blank"> Google </Link>

<Link linkProps={{ to: '/about' }} component={RouterLink}>
  About
</Link>

<Navbar title="My App">
  {#snippet right()}
  <Link navbar onClick={openMenu}>
    Menu
  </Link>
  {/snippet}
</Navbar>

<Toolbar>
  <Link toolbar onClick={action1}>
    Action 1
  </Link>
  <Link toolbar onClick={action2}>
    Action 2
  </Link>
</Toolbar>